CSS font-sizeの単位とレスポンシブに最適remの使い方と指定方法！

2019年9月20日

font-sizeの使い方はなんとなくわかるが、いくつかある単位の使い分けがいまいちよくわからない…。

font-sizeの単位は、いつも同じものを使っている人には、他の単位よくわからないだろう。

今回は各単位の特徴を解説した上で、レスポンシブコーディングに最適と言われる「rem」のオススメの指定方法を確認しながら、自由に使えるようになっておこう！

CSSのfont-sizeの基本的な使い方

font-sizeは文字サイズを指定するプロパティであり、まずはfont-sizeの基本的な記述の仕方を理解しよう！

p{
 font-size: 14px;
}

このようにセレクタに対して「font-size」のプロパティと「任意の数字」と「単位」を記述するだけの、簡単な記述となる。

font-size記述は簡単だが、少し難しいのが「単位」だろう。font-sizeで使える単位はいくつかあり、その違いを理解するのが重要！順番に解説するので、ゆっくり見ていこう！

font-sizeとは文字のどこの大きさのこと？

font-sizeは文字のどこのサイズのことを指すのかというと「文字の高さ」である。例えばfont-size: 14px;と記述した場合は、文字の高さが14pxなのだ。

font-sizeで使える単位の種類

まずは、WEBで一般的によく使う単位を紹介しよう！

単位	意味
px （ピクセル）	pxのサイズで指定する
% （パーセント）	親要素のサイズに対しての割合を百分率で指定
em （エム）	親要素のサイズに対しての割合を指定し、親要素の文字サイズを1emとして計算する %とほぼ同じで100%を1emと言い換える事ができる
rem （レム）	ルートのサイズ（htmlタグに指定したサイズ）に対しての割合を指定し、htmlのサイズと同じサイズであれば1rem、1.5倍であれば1.5remと指定する
vw （Viewport Width）	画面の表示幅に対しての割合で指定。 10vwで画面幅の10%を意味する
vh （Viewport Height）	画面表示の高さに対しての割合で指定 10vhで画面の高さの10%を意味する

これらの単位は文字サイズだけに使う単位ではなく、ボックスの幅や画像のサイズなど、WEBページの随所で使える単位なので、しっかりと覚えておこう！

font-sizeの単位の使わけ方とその特徴

font-sizeの単位の使い分けは決まったルールはないので自分が使いやすい単位を使えばいいのだが、単位によって向き不向きがあるので、その特徴をおぼえておこう！

px（ピクセル）の特徴と使い方

「px」は絶対的な指定なので、他のサイズに影響を受けない。たとえばp{font-size:14px; }と指定すれば、pはすべて14pxになる。

メリットとしては、思った通りのサイズを直感的にそのまま指定して表示できるので、単純に使いやすいという点だろう。

親要素やルートの要素のフォントサイズに影響を受けないので、誰がコードを見てもすぐに理解でき、メンテナンスしやすいというメリットもある。

デメリットとしては、レスポンシブサイト^※の場合、他の画面サイズ用にそれぞれfont-sizeを設定し直さないといけない点だろう。

レスポンシブサイトとは

同じページをパソコンで見ても、スマートフォンなど画面解像度やサイズの違う他の端末で見ても、CSSによってそれぞれのサイズに応じたデザインに最適化されたページのことを「レスポンシブサイト」と言う。通常はメディアクエリという画面サイズ毎のCSSファイルの読み込みの切り分けなどを使ってそれぞれの画面サイズに最適化する。

%（パーセント）の特徴と使い方

%指定は相対指定と言われ、親要素に対しての割合を百分率で指定する方法だ。

例えば親要素が16pxだった場合、100%指定だと16px、200%指定だと32pxとなる。

%指定がややこしくなるパターンとして、htmlの構造が入れ子構造になっていて、それぞれにフォントサイズの指定がしてある場合だ。

例えばbodyにfont-size:16px;の指定、その下のdiv要素にfont-size:80%;指定、さらにそのdivの中のPにfont-size:80%;の指定がしてあった場合、最下部に位置するPのフォントサイズは、16pxの80%の80％という計算になり「16pxの80%=12.8px、12.8pxの80%=10.24px」というややこしい計算をしなければならない。

em（エム）の特徴と使い方

emも%と同じで相対指定と言われ、基本的には%とほとんど同じだ。単純に100%を1emと置き換えただけと考えて良いだろう。

よく1emは「一文字分の大きさ」という理解をしている人がいるが、1文字分ではなく親要素の100%（1em）サイズという計算なので、前述したように、入れ子構造の場合は、親の親からの影響を受けるので注意しよう！

rem（レム）の特徴と使い方

CSS3から登場したサイズであり、%やemなど入れ子構造の計算のややこしさを一掃するのが、このrem (root em)という単位である。

%やemが「親要素」基準とした相対的な指定なのに対して、remは「ルート(html）」の文字サイズを基準とした相対的な指定となるので、ルートの文字サイズだけを確認すれば、remの指定サイズがわかるので、とても便利な単位なのだ！

例えばhtml{font-size: 16px;}という状態で、h2{font-size:2rem;}と指定すれば、h2のフォントサイズは32pxとなる。

レスポンシブにも使える、remを使ったオススメの設定は記事の後半に解説しよう。

vw（Viewport Width）vh（Viewport Height）の特徴と使い方

vwとはViewport widthの略で、ビューポートの幅に対しての相対指定となる。ビューポートとは、わかりやすく言うとブラウザの幅であり、スマホであれば画面の幅となる。ブラウザの幅を「100vw」として計算し、1000pxのブラウザ幅の場合、10vwは1/10の100pxとなる。

特長的な使い方として、たとえばp{font-size:1vw;}と指定した上で、ブラウザ幅を可変させると、pのフォントサイズが、ブラウザ幅に応じて拡大縮小されるような指定となる。文字サイズと画面幅のデザインバランスを変えたくない場合に、この設定が役に立つ。

vhとはViewport Heightの略で、vwの「高さ版」であり「ビューポート（ブラウザの）の高さ」に対しての相対指定となる。

vmaxとvmin

また主にスマートフォンの縦横を回転させた時に役立つ「vmax」と「vmin」という指定もある。

「vmax」は、viewportの縦と横で大きい方の値を100として文字サイズをし、「vmin」はviewportの縦と横で小さい方の値を100として文字サイズを計算する指定となる。スマートフォンやタブレットの回転に対応するのにとても便利な指定なのだ！

rem（レム）を使った、font-size おすすめの設定（レスポンシブサイトにも使える）

ここまで単位について学んできたが、実際フォントサイズをどのように指定するのがベストなのだろうか？

明確な答えはないが、「rem」を使った次のような設定が、沢山の人が使っている人気の設定であり、個人的にもオススメの設定なので、解説していこう！


/* ルートのフォントサイズを10pxに設定 */
html {
font-size: 62.5%;
}
/* bodyのフォントサイズを1.6em（16px）に設定 */
body {
font-size: 1.6em;
}
h1{
font-size: 5rem; /* 50px */
}
p{
font-size: 1.5rem; /* 15px */
}