この記事では、文字の太さを指定する「font-weight」プロパティについて、基本的な使い方から具体的な値の設定方法まで、解説していきます。
文字の太さをコントロールすることでテキストの可読性を高めたり、デザインに変化を持たせたりすることができます。
font-weightプロパティとは
font-weightプロパティは、テキストの太さ（フォントのウエイト）を指定するためのCSSプロパティです。
テキストのスタイルを調整する際に欠かせないものであり、文字の重要度や強調を示すために使われます。
例えば、見出しを太字にすることで目立たせたり、本文の一部を強調したりすることができます。
font-weightプロパティの基本的な使い方
font-weightプロパティを使うことで、簡単に文字の太さを調整できます。
基本的な使い方は以下の通りです。
.element {
font-weight: 値;
}font-weightプロパティには、さまざまな値を設定することができ、それによって文字の太さを調整します。
次に、font-weightプロパティで使用できる値について詳しく説明します。
font-weightの指定方法
font-weightプロパティで指定できる値は大きく分けて3つのタイプに分類できます。
- キーワード
- 数値
- グローバル値
1. キーワード
font-weightプロパティには、特定の太さを指定するためのキーワードがあります。
代表的なキーワードは以下の2つです。
- normal: 通常の太さ（標準の太さ）を指定します。通常、400に相当します。
- bold: 太字を指定します。通常、700に相当します。
具体的な使用例は以下の通りです。
.normal-text {
font-weight: normal; /* 標準の太さ */
}
.bold-text {
font-weight: bold; /* 太字 */
}2. 数値
より細かく文字の太さを調整するために、数値を使用してfont-weightを指定することもできます。
数値は100から900の範囲で指定でき、100単位で太さを調整できます。数値が大きくなるほど文字が太くなります。
| 値 | 説明 |
|---|---|
| 100 | 超極細 |
| 200 | 極細 |
| 300 | 細字 |
| 400 | 標準（normal） |
| 500 | やや太め |
| 600 | 中太 |
| 700 | 太字（bold） |
| 800 | 極太 |
| 900 | 超極太 |
具体的な使用例は以下の通りです。
.thin-text {
font-weight: 100; /* 超極細 */
}
.light-text {
font-weight: 300; /* 細字 */
}
.medium-text {
font-weight: 500; /* やや太め */
}
.extra-bold-text {
font-weight: 900; /* 超極太 */
}3. グローバル値
font-weightプロパティには、CSS全体に影響を及ぼす特定のグローバル値も使用できます。 これらの値は、スタイルの継承やリセットに便利です。
- inherit: 親要素のfont-weightプロパティの値を継承します。
- initial: 初期値（通常はnormal）にリセットします。
- unset: 継承する場合は継承し、そうでない場合は初期値にリセットします。
具体的な使用例は以下の通りです。
.inherit-text {
font-weight: inherit; /* 親要素の値を継承 */
}
.initial-text {
font-weight: initial; /* 初期値にリセット */
}
.unset-text {
font-weight: unset; /* 継承するか初期値にリセット */
}font-weightプロパティの注意点
フォントファミリーの対応
font-weightプロパティの値がすべてのフォントで同じようにサポートされるわけではありません。
特定のフォントファミリーは、一部の太さしかサポートしていない場合があります。
例えば、font-weightプロパティで600を指定しても、そのフォントが中太をサポートしていなければ、ブラウザは最も近い値（例えば700の太字）を使用します。
ウェブフォントの利用
ウェブフォントを使用する場合、そのフォントがサポートするfont-weightを確認する必要があります。
例えば、Google Fontsなどで提供されているウェブフォントは、多くの太さをサポートしていますが、すべての太さが必ずしも利用可能ではありません。
フォントファイルを選択する際には、必要な太さを含めるように注意しましょう。
実際の使用例
実際にfont-weightプロパティを使用して、異なる太さの文字を表示する例を見てみましょう。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-weightの例</title>
<style>
body {
font-family: Arial, sans-serif;
}
.bold-text {
font-weight: bold; /* 太字 */
}
.normal-text {
font-weight: normal; /* 標準 */
}
.light-text {
font-weight: 300; /* 細字 */
}
.extra-bold-text {
font-weight: 900; /* 超極太 */
}
</style>
</head>
<bod
<h1 class="bold-text">太字の見出し</h1>
<p class="normal-text">これは標準の太さの段落です。</p>
<p class="light-text">これは細い文字の段落です。</p>
<p class="extra-bold-text">これは非常に太い文字の段落です。</p>
</body>
</html>
この例では、<h1>要素にbold-textクラスを適用し、太字で表示しています。
<p>要素にはそれぞれnormal-text、light-text、extra-bold-textクラスを適用し、異なる太さで段落を表示しています。
まとめ
この記事では文字の太さを指定するfont-weightプロパティについて解説しました。
font-weightプロパティは、キーワード、数値、グローバル値を使って、文字の太さを変更でき、可読性を上げるなどの効果をもたらします。
ただし、フォントファミリーやブラウザの互換性に注意し、実際に利用する環境での動作確認を忘れないようにしましょう。
コメント