CSSで文字の太さを自由に変えよう！初心者向けフォントウェイト完全ガイド
生徒
「CSSで文字の太さを変える方法ってありますか？」
先生
「はい、CSSではfont-weightというプロパティを使って文字の太さを簡単に変えることができます。」
生徒
「文字の太さってどんなときに使い分けるんですか？」
先生
「例えば、見出しは太くして目立たせたり、本文は普通の太さで読みやすくしたりしますよ。それでは、詳しく見ていきましょう！」
1. CSSで文字の太さを変える基本の方法
CSSでは、文字の太さをfont-weightプロパティで指定します。これは英語で「フォントウェイト」と読み、文字がどれくらい太いか（重みがあるか）を意味します。
font-weightには、主に次のような値を指定できます：
- normal：通常の太さ（標準）
- bold：太字
- lighter：親要素より細く
- bolder：親要素より太く
- 数値（100〜900）：細かい太さの調整（数字が大きいほど太い）
2. よく使う文字の太さの指定例
まずは基本的な使い方から見ていきましょう。下のサンプルでは、<p>タグに対して、それぞれ違う太さを指定しています。
<style>
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
p.light {
font-weight: 300;
}
p.heavy {
font-weight: 900;
}
</style>
<p class="normal">これは通常の太さのテキストです。</p>
<p class="bold">これは太字のテキストです。</p>
<p class="light">これは細めのテキストです。</p>
<p class="heavy">これはとても太いテキストです。</p>
3. なぜ文字の太さを変えるの？
Webサイトでは、見た目のメリハリをつけたり、読みやすさを高めたりするために、文字の太さをうまく使い分けることが重要です。
たとえば：
- 見出し：太くして目立たせる（
boldや700など） - 本文：読みやすさを考えて標準（
normalや400） - 注目してほしい部分：部分的に太くして強調
逆に、すべての文字が同じ太さだと、読みづらく、情報が伝わりにくくなります。
4. 数値指定で細かく調整する方法
font-weightは、数値でも指定できます。よく使われる数値の意味は以下の通りです：
- 100：非常に細い
- 300：細め
- 400：通常（normal）
- 700：太字（bold）
- 900：極太
数字を使うと、デザインの微調整がしやすくなります。ただし、フォントの種類によっては、すべての数値に対応していない場合もあるので注意しましょう。
5. 親要素と子要素での影響と使い方
bolderやlighterという指定方法もあります。これは、親の文字の太さを基準にして、それより太くまたは細くします。
たとえば、親の文字が太字だった場合、子のbolderはより太くなり、lighterは少し細くなります。これは相対的な指定方法です。
6. CSSでよくある間違いと注意点
初心者の方がよくやってしまう間違いのひとつに、「すべてのフォントで太さが変わるわけではない」という点があります。
たとえば、あるフォントは400と700だけに対応していて、それ以外の数値にしても見た目が変わらないことがあります。
このため、見た目を確認しながら指定することが大切です。
7. 文字の太さを変更してデザインにメリハリを
Webデザインでは、文字の太さをうまく使うことで、視覚的に「どこが重要か」を伝えることができます。たとえば：
- タイトルは太字にして存在感を出す
- リンク文字を少し太くしてクリックされやすくする
- 目立たせたい単語を
<strong>タグと併用して強調
読者にとって、情報が「見やすい」「わかりやすい」ことはとても大切です。文字の太さは、そのための強力なデザインツールになります。
この記事を読んだ人からの質問
