【CSS】font-sizeの指定方法を解説

本記事ではCSSのfont-sizeプロパティについて解説します。文字サイズを指定する際に使用する基礎的なプロパティなので、ぜひ理解しましょう。

font-sizeとは

font-size（フォントサイズ）とは文字の大きさを指定するプロパティです。

{ font-size: 値； }

値を記入することで、思い通りに文字サイズを変更することができます。

小さい文字サイズです。
普通の文字サイズです。
大きい文字サイズです。

このように文字サイズの変更を行うのがfont-sizeプロパティです。イメージは大体つかめたかと思うので、次は実際に値を指定してみましょう。

font-sizeで取ることができる値

ここではfont-sizeで指定できる値を紹介します。値の部分には数字と単位が入りますが、単位には複数の種類があります。

指定できる値の単位の中で、使用頻度が高いものが以下の３つです。

上の表で大まかなイメージがつかめたら、それぞれ値の単位を見ていきましょう。

px（ピクセル）

こちらが最もベーシックな指定方法です。文字サイズを絶対値で指定できる方法と解釈してよいでしょう。

{ font-size: 20px； }

なお、htmlには16pxが初期値として指定されています。

rem

remは「root em」の略で、htmlに指定されている文字サイズを基準に相対値を指定する方法です。文字で説明するとややこしくなるので、実際に見た方が分かりやすいと思います。

例えば、次のようにhtmlに16pxが指定され、そのほか見出しにremで指定されたとします。

html { font-size: 16px； }
h1 { font-size: 2.0rem； }
h2 { font-size: 1.5rem； }
h3 { font-size: 1.0rem； }

この場合、見出しにremで指定した数値は以下のように決定します。

2.0rem=32px
1.5rem=24px
1.0rem=16px

このように、htmlで指定したpx（例では16px）にremをかけたものが数値になります。とても簡単ですね！

em

emは親要素に指定されている文字サイズを基準に相対値を指定する方法です。remがhtmlを基準にするのに対し、emは親要素を基準にするという違いがあります。

こちらも実際に見ていきましょう。

<div>　<!-- 親要素 -->
    <p>　<!-- 子要素 -->
    	<span></span>　<!-- 孫要素 -->
    </p>
</div>

このように、div > p > span という入れ子構造になっているとします。
そのうえで、下記のようにCSSで指定します。

div {
font-size: 20px;
}
p {
font-size: 0.5em; 
}
span {
font-size: 0.5em;
}

この場合、各font-sizeは以下のように決定します。

div = 20px
p = 10px(20px × 0.5em)
span = 5px(10px × 0.5em)

このように、親要素に対しての相対値となるため、入れ子構造が多くなってくるとどんどん小さくなってきます。その点は注意ですね。

その他

px,rem,emの3つを知っておけば問題はないですが、その他の指定方法もいくつかあります。ここでは目を通す程度でよいでしょう。

これら以外にも指定できる単位は存在します。%,vw,vhは使用する方もいるため、知っておくとよいでしょう。その他が気になる方はぜひ調べてみてください。

font-sizeの具体的な使用例

ここからはfont-sizeプロパティの具体的な使用例を解説します。

すべてpxで指定

こちらは最もベーシックで、分かりやすい手法です。すべてのセレクタにpxで指定します。

html { font-size: 16px； }
h1{ font-size: 32px； }
h2{ font-size: 24px； }
h3{ font-size: 20px； }

このように、とてもシンプルで分かりやすいため、初学者の方はこの手法をとることが多いと思います。ただ、この手法にはひとつ問題点があります。ブラウザや端末によって見え方が異なる場合があるのです。

そのため、次に紹介する手法がおすすめです。

pxとremで指定

こちらは好んで使用する方が多い手法で、htmlにpxを指定し、その他はremで指定する方法です。

html { font-size: 16px； }
h1{ font-size: 2.0rem； }　（＝32px）
h2{ font-size: 1.5rem； }　（＝24px）
h3{ font-size: 1.25rem； } （＝20px）

このような形ですね。

ただ上記のh3のように、1.25remと計算が難しくなる場合もあります。そのような場合は、htmlに10pxを指定する手法もおすすめです。

html { font-size: 10px； }
p{font-size: 1.6rem； }   （＝16px）      
h1{ font-size: 3.2rem； }　（＝32px）
h2{ font-size: 2.4rem； }　（＝24px）
h3{ font-size: 2.0rem； } （＝20px）

非常に分かりやすくなるため、こちらの手法もおすすめです。また、remの代わりにemを使うケースもありますが、emを使用する場合は入れ子構造に注意しましょう。

まとめ

font-sizeプロパティについて解説しました。
最後にまとめです。

とりあえずは、この３つをおさえておけばOKです！