記事内に商品プロモーションが含まれる場合があります
CSSのfont-weightの使い方
CSSで文字の太さはfont-weightというプロパティを使うことで、簡単に変えることができます。指定方法にはいくつかのパターンがありますが、実際に覚えておくべきはその中の3つくらいです。覚えておくべき指定にはをつけておきます。参考にしてください。
1. 太字にする
{font-weight: bold;}
<p>これは例文です</p> <p>This is Example.</p>CSSコード
p {font-weight: bold}
これは例文です
This is Example.
指定したいタグやclass名、id名をセレクタに指定してfont-weight: bold;と書けば文字を太字にすることができます。この例ではpタグ内の文字の太さを変えています。「セレクタって何？」「class名って何？」という方は『初心者向けCSS入門：基本的な書き方』にざっと目を通してみると良いでしょう。
2. 細字にする
{font-weight: lighter;}
<p>これは例文です</p> <p>This is Example.</p>CSSコード
p {font-weight: lighter}
これは例文です
This is Example.
font-weight: lighter;とすることで文字を細字に設定することができます。
文字が細字にならない？
使用するフォント種類によっては細字の設定が用意されていません。そのため、font-weight: lighter;としても効かないわけですね。残念ながら日本語のフォントのほとんどが細字の設定ができません。そのため上の例でも日本語の文は通常の太さのままになっているかと思います。
3. 通常の太さにする
{font-weight: normal;}
<p>これは例文です</p> <p>This is Example.</p>CSSコード
p {font-weight: normal}
これは例文です
This is Example.
font-weight: normal;は文字を通常の太さにするものです。これは初期値なので、CSSで何も指定していなければ、通常の太さになっているはずです。もし文字が太くなっていたり、細くなっていたりして、通常の太さに戻したいときにfont-weight: normal;を指定しましょう。
4. 太さの詳細設定
ここからは文字の太さをより細かく指定する方法を解説します。とはいえ「ほとんどの日本語フォントでは、こまかな太さの設定はできない」ことに注意しましょう。「太字だけ設定できるフォント」もあれば「太字と細字が設定でき、さらに太字にも何パターンか種類があるフォント」もあるのですね。
文字を少しだけ太くする
{font-weight: bolder;}
さきほどのboldとnormalの中間くらいの太さです。対応しているフォントはあまり多くありません。
<p>This is Example.</p>CSSコード
p {font-weight: bolder}
This is Example.
太さを数値で指定する
↑細い{font-weight: 100;}{font-weight: 200;}{font-weight: 300;}{font-weight: 400;}{font-weight: 500;}{font-weight: 600;}{font-weight: 700;}{font-weight: 800;}{font-weight: 900;}↓太い
文字の太さは数値でも指定することができます。数値には100〜900まで100刻みで指定します。合計で9段階から指定できるわけですね。とはいえ、日本語で9段階に対応しているフォントはほんの一部しかなく（ヒラギノ角ゴなど）、使う機会は限られるかもしれません。
このように文字の太さ指定には様々な方法があります。とはいえ、Webサイトをつくるうえでは、bold、lighter、normalの3つだけ覚えておけば十分でしょう。
5. font-weightが効かないのは何で？
ここまで説明してきた通り、そもそも指定しているフォントに細字が用意されてなかったり、太さ具合が1段階しか用意されていなかったりするために「font-weightが効いてない？」と思ってしまうかもしれません。
対処法としてはフォントを変えるか、細かな太さ設定を諦めるかしかありません…。
