CSSで太字設定！文字の太さを調整するfont-weightの使い方

こんにちは！ライターのナナミです。

みなさんWEBサイトに文字って入れますよね。

こんな風に太字にして目立たせたい…

ということも多々あると思います。

今回は文字を太くしたり細くしたりできるCSS、font-weightについてまとめました！

この記事は下記の流れで進めていきます。

文字の太さを調整できると、文章の見栄えを自由に整えられます。
早速見ていきましょう！

font-weightとは？

font-weightは、文字の太さを調節することができるプロパティです。

文字の太さを変えると、文章の印象がかなり変わりますね。

文章全体にかけてもいいし、一部にかけると強弱をつけることもできます。

強弱があると、文章が読みやすいですね！

font-weightの対応ブラウザ

font-weightはオールドブラウザも含めて、どのブラウザでも問題なく使用できます。

きちんと動作しなかったら、指定した太さにフォントが対応していない場合がほとんどです。
フォントが対応できる太さは、しっかりチェックしておきましょう。

【注意】一部のフォントはfont-weightが使えない

font-weightは便利なプロパティなのですが、たまに太くできなかったり、細かい指定ができなかったりします。

これは使っているフォント自体が、全ての状態のデータを持っているとは限らないからです。

そのため、フォントによっては太さの変更ができない場合があります。

font-weightが効かないと思ったら、そのフォントが太さ変更に対応しているのか確認してみましょう。

font-weightの使い方

font-weightは下記のように指定します。

CSS

セレクタ{
    font-weight:キーワードまたは数値で指定;
}

文字の太さは、キーワードか数値で指定することができます。
それぞれの違いを見ていきましょう。

太さをキーワードで指定する

normalやboldなど、単語で指定する方法です。
指定できる値は4つあります。

値	説明	見た目
normal	標準の太さを指定します。 数値で400を指定した場合と同じ太さです。
bold	太字を指定します。 数値で700を指定した場合と同じ太さです。
lighter	親要素と比較して、一段階細くします。 親要素が太さ400だった場合、300の太さになります。
bolder	親要素と比較して、一段階太くします。 親要素が太さ400だった場合、500の太さになります。

例えば、文字の一部を太くして強調したい場合は、下記のように指定します。

HTML

<div>
    こんにちは、私の名前はナナミです。<br>
    最近、少しずつ暑くなってきましたね。<br>
    <span class="font_test">ビールが美味しい季節です。</span><br>
    みなさんはどんなビールが好きですか？<br>
    私は<span class="font_test">香りのあるビール</span>がとても好きです。
</div>

CSS

.font_test {
    font-weight:  bold;
}

太さを数値で指定する

100や200など、100単位での数値で指定することもできます。

指定できるのは100〜900です。
101や245など、半端な数値は無効になります。

細かく指定できるのですが、フォントの種類によっては対応していない太さも多いです。

HTMLでも太字にできる

ここまでCSSで文字を太くする方法などを解説してきましたが、実は文字を太くするだけならHTMLでも実装することができます。

HTML

<b>
    こんにちは、私の名前はナナミです。<br>
    最近、少しずつ暑くなってきましたね。<br>
    ビールが美味しい季節です。<br>
    みなさんはどんなビールが好きですか？<br>
    私は香りのあるビールがとても好きです。
</b>

HTMLで文字を太くする方法については、下記の記事で詳しく解説しています。
ぜひご覧ください！

細かく太さを変えられるおすすめフォント

文字の太さは必ず変えられるわけじゃないのか…

とがっかりしてしまったあなたに朗報！

太さの調整もバッチリ対応、見た目も美しいフォントがあるのです。

その名もnoto sans Japanese。
Googleが提供している日本語フォントです。

https://googlefonts.github.io/japanese/#notosansjapanese

太さ調整もさることながら、実装も楽チンなのが高ポイント！
ぜひ騙されたと思って使ってみてください。

noto sans Japaneseの設定方法などは、こちらの記事がまとめてくれています。
https://11neko.com/font-2/

まとめ

いかがでしたか？
文字の太さを調整するだけで、印象ってものすごく変わりますね。

おまけ情報も活用しつつ、ぜひ読みやすいWEBサイトを目指してくださいね。
この記事が、その一助となれば幸いです！