スポンサーリンク

フォントサイズの指定方法 px em % はもう古い

フォントサイズ

これまではフォントサイズの指定といえば「px」「em」「%」の3種類が使われてきました。
また様々なブラウザに対応するために html に px 指定し、それ以降の要素に % 指定するという方法が一般的でした。

px 指定

最も古くから使われている指定方法で、近年でもデザイン重視のサイトなどでは使われていましたが、ユーザビリティにおいて問題がありました。
以前から IE8 までの場合文字の大きさ設定出来ない問題から、知っている方は使わないのが常識でしたが、近年ではこれに加えてスマートフォンからTVまで様々な表示サイズに対応しなければならないため、全く使えない方法となりました。

WEBサイトは誰かが訪問してくれて見てくれないと意味が無い、つまり訪問者が快適に回覧できることを最優先にしなければならない、という基本を思い出せば当然のことであります。
例外としては IE でも拡大表示で全てをズームした際は文字サイズも変更されるので、逆に文字だけ大きくされて表示が崩れるのを防ぐためにあえて px 指定を使う場合もあります。

em と % 指定

px 指定の欠点を補うために用いられてきたのが em と % です。
これらは表記が違うだけで効果は同じと考えてしまって構いません。
ブラウザは大抵デフォルトが 16px であることから、それに対してのパーセンテージで文字の大きさを変えていきます。

一般的には計算をわかり易くするために、html に元となるフォントサイズ 62.5%(デフォルトの16pxの62.5%=10px)を指定し、デフォルトの 16px をリセットしてから各要素のフォントサイズを指定していくのが一般的でした。
この手法で各要素に文字サイズ 14px と指定する場合、140% や 1.4em と入力します。

しかしながらユーザビリティに関しては優れた手法なのですが、サイトを作る側にとっては厄介な方法でした。
これらの手法の短所は、サイズ指定が複利計算されるということです。
例えば html>body>head と階層が深くなっていくにつれて、body は html のサイズに対して設定、head は html に影響を受けた body のサイズを基本に設定しなければならなく、階層が深くなるほど計算が難しいという欠点がありました。
また全ての要素にフォントサイズを指定する必要もあり css の記述も多くなることから、少しでもサイトを軽量化したいと思えば受け入れられないものでした。

これからの時代は rem

em と % の欠点を補うために生まれたのが rem(root em)です。
em や % は直接の親要素に対しての相対的なフォントサイズの単位でした。
rem はルート要素(一般的には html 要素)に対して相対的にフォントサイズを指定できます。
一般的な指定方法は html に62.5%(10px)を指定し、それぞれの要素にサイズを指定する際は 14px にしたければ 1.4rem と記述します。

IE8 までは rem をサポートしていないので、フォールバック記述を追加する必要があります。
IE 対応を含めた記述例は以下のようになります。

html {font-size:62.5%;}
body {font-size:14px;font-size:1.4rem;}
head {font-size:16px;font-size:1.6rem;}

XP サポート終了後は IE8 以下を意識する必要はなくなると思うので px 指定を削除しても問題無くなることでしょう。

スポンサーリンク
sns1 RSS Feedly はてな Line Tweet FaceBook sns2 Follow Follow none none none none
スポンサーリンク

コメント

_____________________________________________________________________________________________________