Webページの見出しを太くしたり、大切な言葉を目立たせたりしたいときは、CSSの「font-weight（フォントウェイト）」を使います。
例えば、文章の中で重要な部分だけを太字にすると、読者が大切な情報を見つけやすくなります。
font-weightでは、一般的な太字だけでなく、通常の太さや少し太めの文字なども指定できます。ただし、実際に表示できる太さは使用するフォントによって異なります。
この記事では、font-weightの基本的な書き方、normal・bold・数値の違い、文字が太くならないときの確認方法まで、初心者向けにわかりやすく解説します。
CSSのfont-weightとは？
font-weightは、文字の太さを指定するCSSのプロパティです。
プロパティとは、文字の色や大きさなど、見た目を変更するための設定項目のことです。
font-weightを使うと、次のような文字の太さを設定できます。
- 通常の太さで表示する
- 文字を太字にする
- 対応するフォントで、少し細め・少し太めの文字にする
まずは、最も基本的な書き方を見てみましょう。
font-weightの基本的な指定方法
p {
font-weight: bold;
}このCSSでは、pタグで囲まれた文章を太字に指定しています。
それぞれの意味は次のとおりです。
p：太字にする対象（セレクタ）font-weight：文字の太さを指定するプロパティbold：太字にするための値
このように、font-weightは「どの文字を、どのくらいの太さにするか」を設定するために使います。
なお、文字の大きさを変えたい場合は、font-weightではなく、CSSのfont-sizeを使用します。
font-weightで指定できる値と違い
font-weightには、normalやboldのほかに、数値を使った指定方法があります。
まずは、よく使う値を確認しましょう。
| 指定する値 | 意味 |
|---|---|
| normal | 通常の太さ。400と同じ指定 |
| bold | 太字。700と同じ指定 |
| 100〜900 | 100刻みでよく使われる太さの指定 |
| 1〜1000 | CSSで指定できる数値の範囲。中間の数値も指定可能 |
| bolder | 親要素より太い方向の太さを指定 |
| lighter | 親要素より細い方向の太さを指定 |
normalとboldの違い
初心者が最初に覚えておきたいのは、normalとboldの2つです。
.normal-text {
font-weight: normal;
}
.bold-text {
font-weight: bold;
}normalは通常の太さ、boldは太字を指定します。
文字の太さを細かく調整する必要がなければ、まずはこの2つを使い分ければ十分です。
数値を使った指定方法
font-weightは、数字でも文字の太さを指定できます。
.text-400 {
font-weight: 400;
}
.text-500 {
font-weight: 500;
}
.text-700 {
font-weight: 700;
}基本的には、数字が大きいほど太い文字を指定します。
代表的な数値の目安は次のとおりです。
| 数値 | 太さの目安 |
|---|---|
| 100 | 非常に細い |
| 300 | 細め |
| 400 | 通常の太さ |
| 500 | やや太め |
| 600 | 太め |
| 700 | 太字 |
| 900 | 非常に太い |
ただし、数値を変更すれば、必ず見た目が変わるわけではありません。
例えば、使用しているフォントに400と700の太さしか用意されていない場合、500を指定しても400と同じように見えることがあります。
最初は400と700の違いを確認し、慣れてきたら500や600なども試してみましょう。
font-weightの基本的な使い方【HTML・CSS実例】
ここからは、実際にHTMLとCSSを書いて、文字の太さを変更してみましょう。
今回は、通常の文字・太字・少し太めの文字の3種類を表示します。
STEP1：HTMLを書く
まずは、次のHTMLを用意してください。
<p class="weight-normal">通常の太さの文字</p>
<p class="weight-bold">太字の文字</p>
<p class="weight-medium">少し太めの文字</p>それぞれのpタグに、異なるclassを付けています。
classは、CSSを適用する要素を区別するための目印です。
STEP2：CSSで文字の太さを指定する
続いて、次のCSSを記述します。
.weight-normal {
font-weight: 400;
}
.weight-bold {
font-weight: 700;
}
.weight-medium {
font-weight: 500;
}CSSでは、class名の先頭に「.（ドット）」を付けて指定します。
例えば、.weight-boldは、HTMLのclass="weight-bold"が付いた要素にCSSを適用するという意味です。
STEP3：ブラウザーで表示を確認する
HTMLとCSSを保存したら、ブラウザーで表示を確認しましょう。
次のように、文字の太さを変えて表示できます。
通常の太さの文字（400）
太字の文字（700）
少し太めの文字（500）
400は通常の太さ、700は太字です。500はフォントによって400と同じように見える場合があります。
違いがわかりにくい場合は、400と700を切り替えながら確認してみてください。
見出しや文章の一部を太字にする方法
font-weightは、Webページの見出しや文章の一部を目立たせたいときによく使用します。
ここでは、お知らせの見出しを太字にし、本文の重要な言葉も強調する例を紹介します。
HTMLの記述例
<div class="sample-weight">
<h3>お知らせ</h3>
<p>大切な内容は<strong>必ず確認</strong>してください。</p>
</div>CSSの記述例
.sample-weight h3 {
font-weight: 700;
}
.sample-weight p {
font-weight: 400;
}
.sample-weight strong {
font-weight: 700;
}このCSSでは、次のように太さを指定しています。
- 見出し（h3）は700で太字にする
- 本文（p）は400で通常の太さにする
- 重要な言葉（strong）は700で太字にする
表示結果
大切な内容は必ず確認してください。
見出しや大切な言葉を太字にすると、文章の中で重要な部分がわかりやすくなります。
font-weightとstrongタグの違い
ここで覚えておきたいのが、CSSのfont-weightとHTMLのstrongタグの違いです。
| 項目 | 役割 |
|---|---|
| font-weight | CSSで文字の見た目の太さを変更する |
| strongタグ | HTMLで文章の重要性を示す |
strongタグは、文章の意味として「ここは重要です」と示すために使用します。
一方、font-weightは、文字の見た目を太くしたり細くしたりするためのCSSです。
多くのブラウザーではstrongタグの文字は初期状態で太字になりますが、CSSで太さを変更することもできます。
意味として重要な言葉にはstrongタグ、見た目の調整にはfont-weightと覚えておくとよいでしょう。
font-weightで指定しても文字が太くならない原因
font-weightを指定したのに、文字の太さが変わらないことがあります。
そんなときは、次の項目を順番に確認してみましょう。
使用しているフォントが指定した太さに対応していない
フォントによっては、通常の太さと太字の2種類しか用意されていない場合があります。
そのため、500や600を指定しても、ほとんど違いが見られないことがあります。
まずは、次のように400と700を指定して違いを確認しましょう。
.sample-normal {
font-weight: 400;
}
.sample-bold {
font-weight: 700;
}400と700でも違いがわからない場合は、使用しているフォントの種類も確認してください。
ほかのCSSが優先されている
同じ文字に複数のCSSが指定されていると、思ったとおりの太さにならない場合があります。
例えば、次のCSSを見てください。
p {
font-weight: 700;
}
.sample-text {
font-weight: 400;
}HTMLが次のようになっている場合は、
<p class="sample-text">サンプル文章です。</p>.sample-textの指定が優先されるため、通常の太さ（400）になります。
これは、CSSには「どの設定を優先するか」という決まりがあるためです。
詳しくは、CSSの優先順位と継承で解説しています。
HTMLのclass名とCSSが一致していない
HTMLとCSSでclass名が異なると、指定したスタイルは適用されません。
例えば、HTMLでは次のように書いているのに、
<p class="bold-text">太字にしたい文字</p>CSSで次のように書いている場合です。
.bold {
font-weight: 700;
}HTMLのbold-textとCSSのboldは名前が異なります。
正しく指定するには、CSSを次のように変更します。
.bold-text {
font-weight: 700;
}特に初心者のうちは、class名のスペル間違いに注意しましょう。
CSSファイルの変更が反映されていない
CSSを変更したあとに保存していなかったり、ブラウザーが以前のCSSを表示していたりすることもあります。
次の点を確認してください。
- HTMLファイルとCSSファイルを保存したか
- HTMLから正しいCSSファイルを読み込んでいるか
- ブラウザーを更新したか
- 変更しているCSSファイルが実際に使用されているものか
それでも直らない場合は、ブラウザーの開発者ツールで、対象の文字にどのCSSが適用されているか確認すると原因を見つけやすくなります。
font-weightを使うときの注意点
font-weightは便利ですが、文字を太くしすぎると、かえって読みにくくなることがあります。
本文全体を太字にしない
文章のすべてを太字にすると、どこが重要なのかわかりにくくなります。
通常の文章は400を基本にし、見出しや特に大切な部分だけを700にするなど、太さを使い分けると読みやすくなります。
文字の太さだけで情報を区別しない
細い文字と太い文字の違いは、フォントや閲覧環境によってわかりにくいことがあります。
重要なお知らせなどは、太字だけに頼らず、見出しや文章でも内容が伝わるようにしましょう。
フォントによって見え方が違うことを覚えておく
同じfont-weightの値でも、使用するフォントによって太さや印象が変わります。
また、複数の太さを細かく表現できる「可変フォント（バリアブルフォント）」もあります。
これは、対応したフォントであれば文字の太さをより細かく調整できる仕組みです。
ただし、初心者のうちは難しく考える必要はありません。まずはnormalとbold、数値の400と700を覚えれば十分です。
まとめ
CSSのfont-weightは、文字の太さを変更するためのプロパティです。
今回のポイントを振り返りましょう。
- font-weightを使うと、文章や見出しの太さを変更できる
- normalは通常の太さ（400）、boldは太字（700）
- 数値を使えば、対応するフォントで太さを細かく指定できる
- 文字が太くならない場合は、フォント・class名・CSSの優先順位を確認する
- 意味として重要な言葉には、HTMLのstrongタグを使用する
まずは、次のCSSを実際に書いてみてください。
p {
font-weight: 400;
}
h2 {
font-weight: 700;
}本文は通常の太さ、見出しは太字にする基本的な設定です。
慣れてきたら、500や600なども試して、文字の太さがどう変わるか確認してみましょう。
次に読む記事
CSSのline-heightとは？行間を調整して文章を読みやすくする方法
→ HTML講座トップページへ
→ CSS講座トップページへ
