ブログ投稿日時：
ブログ更新日時：
フォントの太さを指定するfont-weightについて解説
1.
font-weightとは
font-weight とは、フォントの太さを指定するプロパティです。
2.
font-weightの指定方法
font-weight を指定するときは主に数値、キーワードのどちらかを使って指定します。
それでは、指定方法を細かく見ていきましょう。
数値で指定
font-weight を数値で指定するときは100の倍数で指定します。
数値が小さければ細くなり、数値が大きければ太くなります。
指定できる範囲は 100 〜 900 になります。
font-size を数値で指定する方法と表示は下記の通りです。
<p class="font-weight-100">フォントの太さが100です。</p>
<p class="font-weight-200">フォントの太さが200です。</p>
<p class="font-weight-300">フォントの太さが300です。</p>
<p class="font-weight-400">フォントの太さが400です。</p>
<p class="font-weight-500">フォントの太さが500です。</p>
<p class="font-weight-600">フォントの太さが600です。</p>
<p class="font-weight-700">フォントの太さが700です。</p>
<p class="font-weight-800">フォントの太さが800です。</p>
<p class="font-weight-900">フォントの太さが900です。</p>.font-weight-100 {
font-weight: 100;
}
.font-weight-200 {
font-weight: 200;
}
.font-weight-300 {
font-weight: 300;
}
.font-weight-400 {
font-weight: 400;
}
.font-weight-500 {
font-weight: 500;
}
.font-weight-600 {
font-weight: 600;
}
.font-weight-700 {
font-weight: 700;
}
.font-weight-800 {
font-weight: 800;
}
.font-weight-900 {
font-weight: 900;
}HTMLの表示
フォントの太さが100です。
フォントの太さが200です。
フォントの太さが300です。
フォントの太さが400です。
フォントの太さが500です。
フォントの太さが600です。
フォントの太さが700です。
フォントの太さが800です。
フォントの太さが900です。
上記のように100の倍数の数値を使って指定することでフォントの太さを変更することができます。
キーワードで指定
font-weight をキーワードで指定するときは主に normal, bold のどちらかを使って太さを指定します。
太さの目安は下記の通りです。
| キーワード | 太さの目安 |
|---|---|
| normal | 400で指定したときと同じ (初期値) |
| bold | 700で指定したときと同じ |
font-size をキーワードで指定する方法と表示は下記の通りです。
<p class="font-weight-normal">フォントの太さが100です。</p>
<p class="font-weight-bold">フォントの太さが200です。</p>.font-weight-normal {
font-weight: normal;
}
.font-weight-bold {
font-weight: bold;
}HTMLの表示
フォントの太さがnormalです。
フォントの太さがboldです。
上記のようにキーワードを使って指定することでフォントの太さを変更することができます。
3.
今回のまとめ
この記事では font-weight について解説しました。
font-weight とは、フォントの太さを指定するプロパティです。
font-weight を指定するときは主に数値、キーワードのどちらかを使って指定します。
それぞれの内容を理解して使い分けていきましょう。
最後までお読みいただきありがとうございます。