【HTML＋CSS初心者講座08】文字装飾の基本（font-weight・font-style・text-decoration など）

この記事はCSS入門の続きです。文字装飾を理解するにはCSSの基礎知識が必要です。まだCSSの基本を学んでいない方は、先に「CSS入門：基本的な書き方を総まとめ！」をご覧ください。

1. CSSの文字装飾の基本

まずは必ず覚えておきたい基本的な設定と装飾方法を解説していきます。フォントサイズや色変更など、よく使うものから順に見ていきましょう。

1-1. フォントサイズの変更（font-size）

セレクタ
{ font-size: ◯◯px または ◯◯em; }

文字のサイズは font-size プロパティで指定します。値は「数字＋単位」で書きます。

単位 意味 使い方の目安
px ピクセル数で指定 本文は 15px〜18px がおすすめ
em 現在のフォントサイズに対する倍率 親要素が 16px のとき 1.5em → 24px になる
CSSコード
.default { /* 初期設定のまま */ }
.px {
  font-size: 15px;
}
.em {
  font-size: 1.5em;
}

表示結果

初期設定のフォントサイズ

15px にした場合

1.5em にした場合

1-2. 文字色を変える（color）

セレクタ
{ color: 色名 または カラーコード; }

文字色を変えるには color プロパティを使います。値には色名かカラーコードを書きます。

値の種類 書き方 例
色名 英語の色名をそのまま書く red / blue / green
カラーコード # + 6ケタの英数字 #FFC778 / #f89174
CSSコード
#example1 { color: green;   }
#example2 { color: #FFC778; }
#example3 { color: #f89174; }

表示結果

通常の文字

green の場合

#FFC778 の場合

#f89174 の場合

💡 カラーコードは覚えなくてOKです。「カラーコード表」などで検索して使いたい色のコードをコピーしましょう。

1-3. 太字にする（font-weight）

セレクタ
{ font-weight: bold; }

文字を太字にするには font-weight: bold を使います。よく使うので覚えておきましょう。

CSSコード
p {
  font-weight: bold;
}

表示結果

通常の文字（normal）

太字にした場合（bold）

1-4. 斜体にする（font-style）

セレクタ
{ font-style: italic; }

文字を斜体にするには font-style: italic を使います。引用文などでよく使われます。

CSSコード
p {
  font-style: italic;
}

表示結果

通常の文字

斜体にした場合（italic）

1-5. 行間を変える（line-height）

セレクタ
{ line-height: 数値; }

line-height は行の高さを指定するプロパティです。単位なしの数値で指定するのがおすすめで、line-height: 1.5 なら「文字の高さの1.5倍の行高」になります。

CSSコード
.lh1  { line-height: 1;   }
.lh15 { line-height: 1.5; }
.lh2  { line-height: 2;   }

表示結果

line-height: 1
サルワカでは「暮らしの雑学」や「ウェブデザインの知識」を分かりやすく解説しています。

line-height: 1.5
サルワカでは「暮らしの雑学」や「ウェブデザインの知識」を分かりやすく解説しています。

line-height: 2
サルワカでは「暮らしの雑学」や「ウェブデザインの知識」を分かりやすく解説しています。

💡 本文の行間は 1.5〜2.0 の範囲にすると読みやすくなります。

1-6. 字間を変える（letter-spacing）

セレクタ
{ letter-spacing: ◯◯em; }

文字と文字の間隔（字間）は letter-spacing プロパティで指定します。em 単位がおすすめで、0.1em なら「文字の高さの1/10」の字間になります。

CSSコード
.ls0   { /* 初期値 */ }
.ls005 { letter-spacing: 0.05em; }
.ls01  { letter-spacing: 0.1em;  }
.ls02  { letter-spacing: 0.2em;  }

表示結果

初期値のまま

0.05em の場合

0.1em の場合

0.2em の場合

💡 こだわりがなければ指定しなくてもOKです。指定する場合は 0.05〜0.1em 程度にとどめましょう。

1-7. 下線・取り消し線・上線（text-decoration）

セレクタ
{ text-decoration: 値; }

text-decoration プロパティを使うと、文字に線を加えたり、リンクの下線を消したりできます。

値 効果
underline 下線をひく
line-through 取り消し線をひく
overline 上線をひく
none 装飾を消す（リンクの下線を消したいときなど）
CSSコード
.under  { text-decoration: underline;    }
.line   { text-decoration: line-through; }
.over   { text-decoration: overline;     }
a.clean { text-decoration: none;         }

表示結果

underline（下線）

line-through（取り消し線）

overline（上線）

none（下線なし）

1-8. フォントの種類を変える（font-family）

セレクタ
{ font-family: フォント名, …; }

font-family でフォントの種類を指定できます。カンマ区切りで複数書いておくと、左から順に使えるフォントが適用されます。最後に sans-serif（ゴシック体）や serif（明朝体）などの汎用ファミリーを書いておくのが定番です。

CSSコード
/* ゴシック体 */
body {
  font-family: "Hiragino Sans",
    "Meiryo", sans-serif;
}

/* 明朝体 */
.serif {
  font-family: "Hiragino Mincho ProN",
    "Yu Mincho", serif;
}

表示結果

ゴシック体：これは例文です。

明朝体：これは例文です。

2. 文字の位置を変える（text-align）

セレクタ
{ text-align: left / center / right; }

text-align プロパティで、テキストの水平方向の配置を変えることができます。

値 効果
left 左揃え（初期値）
center 中央揃え
right 右揃え
CSSコード
.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }

表示結果

left（左揃え）

center（中央揃え）

right（右揃え）

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

3-1. 縦書きにする（writing-mode）

セレクタ
{ writing-mode: vertical-rl; }

writing-mode: vertical-rl を使うと、テキストを縦書きにできます。vertical-rl は右から左へ流れる日本語の縦組みに対応しています。

CSSコード
.tate {
  writing-mode: vertical-rl;
}

表示結果

縦書きのサンプルです。

3-2. 文字に影をつける（text-shadow）

セレクタ
{ text-shadow: X方向 Y方向 ぼかし 色; }

text-shadow で文字に影を付けることができます。4つの値を半角スペースで区切って指定します。

値 意味 例
X方向 右（＋）左（－）へのずれ 2px
Y方向 下（＋）上（－）へのずれ 2px
ぼかし 影のぼかし具合 3px
色 影の色 #aaa
CSSコード
.shadow1 {
  text-shadow: 2px 2px 3px #aaa;
}
.shadow2 {
  text-shadow: 2px 2px 0 #f89174;
}
.shadow3 {
  color: white;
  text-shadow: 1px 1px 6px #333;
}

表示結果

グレーのぼかし影

オレンジのくっきり影

白文字＋影

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

段落の中で一部分だけ文字の色や太さを変えたい場合は、<span> タグを使って範囲を指定し、CSSを適用します。

HTMLコード
<p>
  CSSで<span class="hl">一部だけ</span>
  色を変えられます。
</p>

CSSコード
.hl {
  color: #f89174;
  font-weight: bold;
}

表示結果

CSSで一部だけ色を変えられます。

💡 <span> はブロックを作らないインライン要素なので、文中の一部に使うのに最適です。

5. ここまでの復習

学んだ文字装飾プロパティを組み合わせて、少し見栄えの良いページを作ってみましょう。

HTMLコード
<h1 class="title">CSS文字装飾入門</h1>
<p class="lead">
  CSSを使うと文字を
  <span class="hl">自由</span>に
  デザインできます。
</p>
<p class="note">※ブラウザにより表示が異なる場合があります。</p>

CSSコード
.title {
  color: #f89174;
  text-align: center;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 0 #ffe0d4;
}
.lead {
  font-size: 1.2em;
  line-height: 1.8;
  text-align: center;
}
.hl {
  color: #f89174;
  font-weight: bold;
  text-decoration: underline;
}
.note {
  font-size: 0.85em;
  color: gray;
  text-align: right;
}

ブラウザ表示イメージ

CSS文字装飾入門

CSSを使うと文字を自由にデザインできます。

※ブラウザにより表示が異なる場合があります。

📝 まとめ

  • フォントサイズ：font-size（px / em）
  • 文字色：color（色名 / カラーコード）
  • 太字：font-weight: bold
  • 斜体：font-style: italic
  • 行間：line-height（1.5〜2.0 がおすすめ）
  • 字間：letter-spacing（0.05〜0.1em がおすすめ）
  • 線の装飾：text-decoration（underline / line-through / overline / none）
  • フォント種類：font-family（複数指定・最後に汎用ファミリーを書く）
  • 文字位置：text-align（left / center / right）
  • 縦書き：writing-mode: vertical-rl
  • 文字の影：text-shadow（X Y ぼかし 色）
  • 一部だけ変えたいとき：<span> タグでくくってクラスを付ける

次のステップ

文字装飾をマスターしたら、次は paddingとmarginで余白を調整 する方法を学びましょう。