【CSS】文字装飾の基本を総まとめ！初心者向けに解説
【CSS】文字装飾の基本を総まとめ！初心者向けに解説

【CSS】文字装飾の基本を総まとめ！初心者向けに解説

HTML&CSSでの文字の装飾方法を初心者向けにまとめました。サイズや色変更から、太字、斜体、影、テキストの縦書きなどまで。

▼ line-height: 1の場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。 ▼ line-height: 1.5の場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。 ▼ line-height: 2の場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。

おすすめはline-height: 1.5〜2 1-6.文字の間隔を変える

文字どうしの間隔（字間）は letter-spacing というプロパティにより設定します。

letter-spacingの値の指定にも何パターンかありますが、おすすめは「em」という単位で指定することです。emでは 文字の高さに対する比率で 字間を指定します。1emだと文字の高さと同じだけの字間になります。0.1emだと「文字の高さの1/10の大きさ」の字間ができるということになります。

▼ letter-spacing: 0.05em場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。 ▼ letter-spacing: 0.1em場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。 ▼ letter-spacing: 0.2em場合 サルワカでは知っておきたい「暮らしの雑学」や「インターネットの知識」「ウェブデザインの知識」を分かりやすく解説していきます。

おすすめは「指定しない」もしく「0.05〜0.1em」 1-7. 文字に下線を引く

文字に下線を引く方法はたくさんあります。 text-decoration: underline を使うとシンプルで“ぶなん”な下線を引くことができます。

text-decorationで下線を引く例

これは例文です

【参考】色々なデザインの下線を引く方法
  • 点線の下線を引く
  • 破線の下線を引く
  • 波線の下線を引く
  • 蛍光ペン風にする
1-8. 取り消し線を引く 取り消し線の例

これは例文です

1-9. 文字を実線の枠で囲む
  • 線の種類
  • 線の太さ
  • 線の色

上図の場合だと、 実線（solid） で太さは 1px 、色は 黒（black） という指定になります。

文字を実線で囲む例

これは例文です

これは例文です

1-10. 文字を点線・破線の枠で囲む

borderプロパティの線の種類でsolidを指定すると実線になりますが、これを dottedにすると点線 、 dashedにすると破線 になります。

点線と破線の枠でかこむ例 CSSコード .dotted_line < border: dotted 2px skyblue; >.dashed_line < border: dashed 2px skyblue; >p < /*両方ともpadding10pxに*/ padding: 10px; > 1-11. 文字の上下に線を引く 上下左右 個別に線をひく
  • 上にだけ線を引く： border-top :〜
  • 下にだけ線を引く： border-bottom :〜
  • 左にだけ線を引く： border-left :〜
  • 右にだけ線を引く： border-right :〜

値の書き方はさきほどの border:線の種類 太さ 色 と変わりません。 これらを組み合わせることで、文字の上下にだけ線を引くことができます。

文字の上下に線を引く例 CSSコード .solid_line < /*上と下にグレイの1pxの線を引きます*/ border-top: solid 1px gray; border-bottom: solid 1px gray; >.dashed_line < /*上と下に水色の1pxの破線を引きます*/ border-top: dashed 1px skyblue; border-bottom: dashed 1px skyblue; >p 1-12. 文字の左と下に線を引く

さきほどと同じ要領で、文字の左と下にだけ実線を引いてみましょう。左は border-left 、下は border-bottom ですね。

文字の左に線を引く例

これは例文です

1-13. フォント種類の変更

たとえばこの図のように p と書けば、pタグ内の文字がImpactというフォントになります。

2. 文字の位置を変える（中央・右寄せ）

文字は初期設定では、左寄せで表示されます。これを中央寄せや右寄せにすることもできます。「文字をどちらに寄せるか」は text-align プロパティで指定します。値は以下の3つをよく使います。

text-alignに対する値
  • left ：左寄せ ←初期値
  • center ：中央寄せ
  • right ：右寄せ
文字寄せの変更例

CSS指定なしの文

CSSコード .center < text-align: center; >.right

3. CSSの文字設定や装飾【応用編】

3-1. 文字を縦書きにする

これは例文です。Exampleですよ。例文なのです。例文なのですよ。

3-2. 文字に影をつける
  1. 影の右への長さ（px）
  2. 影の下への長さ（px）
  3. 影のぼけ具合（px）
  4. 影の色
文字に影をつける例 CSSコード .shadow < text-shadow: 1px 1px 2px silver; /*文字を太字にするとよりそれらしくなります*/ font-weight: bold; >

4. 一部の文字だけ設定を変える方法

  1. 文字を~ではさみ、style=” “内に設定内容を書く
  2. 文字をclass名を指定したspanタグではさみ、CSSでそのclassに対して設定内容を書く
方法1: 文字をspanで挟みタグ内に設定内容を書く

これは例文です。

方法2：文字をclass名のついたspanタグではさむ⇒CSSで設定を書く

これはCSSコード

.bold

5. この記事のまとめ

  • フォントサイズの変更 ⇒ font-size: ◯◯px(em)
  • 文字色の変更 ⇒ color: 色名orカラーコード
  • 文字を太くする ⇒ font-weight: bold
  • 文字を斜体に ⇒ font-style: italic
  • 行間を変える ⇒ line-height: 値(1.5〜2がおすすめ)
  • 字間を変える ⇒ letter-spacing: ◯◯em(〜0.1emがおすすめ)
  • 文字に単純な下線を引く ⇒ text-decoration: underline
  • 取り消し線を引く ⇒ text-decoration: line-through
  • 実線の枠で囲む ⇒ border: solid 太さ 色
  • 点線の枠で囲む ⇒ border: dashed 太さ 色
  • 文字の上下に線を引く ⇒border-topとborder-bottomを指定
  • 一部の文字だけ設定を変える方法 1. spanタグではさみタグの style属性 内に設定内容を書く 2. class名付きのspanタグではさみ、 CSSファイルにそのclassに対する設定内容 を書く
  • 中央・右寄せ ⇒ text-align: center or right
  • 文字に影をつける ⇒ text-shadow
HTML＆CSS入門 HTMLとCSSの勉強に必要なツールを用意しよう 初心者向けHTML入門：書き方の基本とタグの使い方 初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！ CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう 【CSS】max-widthとmin-widthの使い方まとめ CSSのmarginとは？paddingとは？余白の指定方法まとめ 【CSS】displayの使い方を総まとめ！inlineやblockの違いは？ font-familyの書き方まとめ：CSSでフォント種類を指定しよう 【CSS】文字装飾の基本を総まとめ！初心者向けに解説 HTMLのリンク＜aタグ＞の書き方を初心者向けに解説 翻訳も AI にまるっとお任せ

AI翻訳ツール Nani !? ならネイティブ講師に教わるかのように自然な翻訳ができます。

サルワカについて サルワカくん 少し役立つ生活やインターネットの知識を分かりやすく解説していきます。 検索

© Copyright 2020 サルワカ All rights reserved.