【CSS】文字の装飾!文字の太さを変更する方法

文字の太さを変更させるためにはCSSのfont-weight属性を使用します。

値にはキーワードまたは数値を指定します。


span {
    font-weight: bold;
}
    

<div>
    <span>こんにちは</span>は日本の挨拶です。
</div>
    
こんにちはは日本の挨拶です。

理解度チェック

  • 実際にコーディングして試してみましょう!

指定できる値

キーワードや数値で太さを指定することができます。

boldや数値の指定の仕方は特に覚えておくようにしましょう。

説明
normal 通常のフォントの太さで、数値の400と同じです。
bold 太字のフォントの太さで、数値の700と同じです。
bolder 親要素の太さに比べて大きい数値が設定されます。大きい数値が設定されるだけで、見た目に変化がない場合もあります。
lighter 親要素の太さに比べて低い数値が設定されます。低い数値が設定されるだけで、見た目に変化がない場合もあります。
数値 1以上1000以下の数値を指定できますが、多くの場面で100ごとの値(100, 200, 300...900, 950)が使用されます。

理解度チェック

  • 値を数値で指定してそれぞれの違いをブラウザで確認してみましょう!

bolderlighterは極力使わない

bolderlighterは親要素と相対的な値を指定するため、使用する場面は限られてきます。

例えば、子要素にbolderを使用すると、親要素のfont-weightの数値に0〜300の決められた数値を加算した値を子要素に指定する結果になります。
ある子要素にfont-weight: bolder;を指定していた場合、親要素のfont-weightが100だと、子要素の値は400となるため見た目上の変化は起きないことがあります。


div {
    font-weight: 100;
}

span {
    font-weight: bolder;
}
    

<div>
    <!-- bolderにしても太くなるまでの数値に至らないため見た目上の変化がありません -->
    <span>こんにちは</span>は日本の挨拶です。
</div>
    
こんにちはは日本の挨拶です。

数値の指定は100ごとに行う

数値には1以上1000以下の値を指定することができますが、2021年3月時点では非対応のブラウザもあるため、次の表の値を使用するようにしましょう。

太さ名
100 薄い(毛のように細い線)
200 かなり薄い(極端に薄い)
300 軽い
400 普通
500 中間
600 ちょっと太い
700 太い
800 かなり太い
900 重い
950 かなり重い

理解度チェック

  • font-weight: 500; はどの様な太さですか?
  • font-weight: 700; はどの様な太さですか?

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。