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

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

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

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

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

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

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

【基礎】font-weightとは何か
【基礎】font-weightの使い方
【発展】HTMLで太字にする方法
【おまけ】おすすめフォント

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

font-weightとは?

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

font-weight1

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

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

font-weight2

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

font-weightの対応ブラウザ

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

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

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

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

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

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

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

font-weightの使い方

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

CSS

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

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

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

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

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

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

font-weight7

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など、半端な数値は無効になります

font-weight8

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

HTMLでも太字にできる

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

font-weight9

HTML

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

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

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

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

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

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

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

font-weight10
https://googlefonts.github.io/japanese/#notosansjapanese

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

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

まとめ

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

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

Writer

ナナミ

株式会社SAMURAI

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら