【CSS】フォントサイズのrem, em指定のメリット

WEBページ作成の際に、フォントサイズをどう決めるかについては重要です。

 

作成したWEBページを見る人は、PCやスマートフォンなどの様々な大きさの画面でみることになります。

なので、画面の大きさに合わせてフォントサイズが相対的に変化する必要があります。

 

フォントサイズだけではありません。

文字間隔(letter-spacingなど)や文字の高さ(line-heightなど)もしっかりと考慮する必要があります。

 

それでは、「フォントサイズが画面サイズと相対的に変化させる」にはどうすればいいか、についてです。

それは、値の単位をpxなどの「決め打ち」ではなく「相対的」な単位を使用すればいいのです。

 

 

px(ピクセル)

まずpx(ピクセル)についてです。

 

PCでもスマートフォンでも、その画面は細かな部屋で仕切られています。

そしてそれぞれの部屋から1色の光が出ています。

あまりに細かいから肉眼では部屋の存在を確認しづらいだけです。

この部屋の1辺の長さを1pxと呼びます。

 

例えば、現在私が使っている13.3インチのMac Book Airは横1440、縦900に分割されています。

なので、横1440px、縦990pxの大きさの画面を使っているのです。

 

それでは1pxは何cm(センチメートル)でしょうか?

これは使用するデバイスの画面の解像度で決まるのでなんとも言えません…。

pxの大きさを物理的な単位で表現しても意味はないのです。

 

ここで本題です。

PCの画面でCSSを書いているときにフォントサイズの単位にpxを採用している場合、それはスマホではどう見えるのでしょうか?

例えば、スマホのときはPCの3分の2の大きさでフォントサイズを指定したいとします。

このときメディアクエリを使って各タグに書いたフォントサイズを3分の2の値に変えていかなければなりません。

しかもひとつひとつ計算しながら…。

 

これは、フォントサイズの大きさが「絶対的」な単位であるpxを使用しているから起こることです。

この問題を解消するために、デバイスよって基準が変化させることができる「相対的」な単位を使います。

 

 

相対的なem単位

emは「親要素のサイズの何倍か」を指定します。

例えば、親要素のフォントサイズが12pxなら、1em = 12pxとなります。

 

あらかじめPCの画面で設計時に「〇〇の何倍」と決めておけば、メディアクエリと併用して画面サイズに合わせて勝手に拡大縮小してくれます。

px指定だと画面のサイズに影響しないのだから、画面は小さいけど文字はでかい、なんてことになる可能性があります

 

ただ、emをフォントサイズの単位として採用するのは難しいです。

親要素のサイズによるのだから、もし入れ子構造にして階層が下がっていくと、一体どこを基準にした大きさなのかがわかりづらくなります。

そこでremの登場です。

 

 

相対的なrem単位

remとは「root em」の略です。

 

ほとんどのブラウザにおけるhtmlのデフォルトのフォントサイズは16pxです。

これを基準とするので、1rem = 16pxとなります。

これなら入れ子の階層構造になってもhtmlのデフォルトサイズを基準にするのだからemで起こるような心配は必要ありません。

 

 

htmlのfont-sizeを62.5%にする

しかし、なにも工夫せずにremを使うとなると少々不便です。

 

まず、大抵のブラウザでhtmlのフォントサイズのデフォルト値は16pxです。

もしremを使って12pxを実現したい場合、計算式は

となり、暗算は難しいです。

(ちなみに、最近の小学校の算数では掛け算の順番で不正解となる場合があるようですね…。)

 

上記の計算はpxをremに変換していますが、その逆も暗算は大変です。

 

なのであらかじめhtmlのフォントサイズを62.5%にしてしまうのです。

16pxの62.5%は10pxです。

つまり1rem = 10pxと換算されるので、例えば32pxを作りたければ3.2remにすればいいのです。

こっちの方がわかりやすいはずです。

 

例えば以下のようにそれぞれのデバイスでフォントサイズを変更するとします。

デバイス 折り返し点 フォントサイズ PCとの比
PC 1024px 16px 1
タブレット 768px 14px 0.875
スマホ 480px 12px 0.75

上記に従って、それぞれのデバイスにおけるhtmlのフォントサイズを以下のように設定します。

ルートのフォントサイズを基準にしているのだから、スマホのメディアクエリ内でpタブのフォントサイズを指定する必要はありません。

 

 

まとめ

とにかく、文字サイズはremで指定した方がなにかと便利です。

あとは各デバイスでhtmlのフォントサイズがPCの何倍かを指定すれば、全部のフォントサイズを書き換える必要がありません。

 

remやemはフォントサイズ以外にもあてはめることができます。

例えばborderやpaddingにそれらの単位を使うと便利な場合があります。

フォントサイズ以外にもletter-spacingやline-heightもpxを使わない方がいいと思いますが、それらについては次回の記事に書きます。