CSSのfont-sizeで指定する px % em rem そして vw vh （レスポンシブルデザイン）

最近のWeb画面では対応が不可避のレスポンシブルデザイン。途中で引き継いだHTMLコードの修正を行う時に結構悩む場合があります。昔はpxか%で制御しておけば良かったものですが、スマホやタブレット画面にも対応するとなると、vw/vhです。そんな、font-sizeに関わる備忘録的な記事。

比較表

font-sizeのスタイルシートで設定できる、単位系をまとめるとこんな感じ。

名前	表記	詳細
ピクセル	px	要素で表示するフォントサイズを固定値で設定。
パーセント	%	要素で表示するフォントサイズを親要素からの割合で設定。
エム	em	基本％と同じ。設定値は1/100になる。（100%=1em）
ルートエム	rem	emの基準が親要素ではなくルート（HTML）要素に対して設定する。
ビューポート幅と高さ	vw / vh	ビューポート（ブラウザの幅と高さ）を基準にして割合で設定。

p{
  font-size:12px;
}

最も単純明快な設定方法。他の何にも影響されず文字サイズを設定できます。デメリットとして、レスポンシブルデザインには不向きです（笑）

p{
  font-size:100%;
}

親要素の設定の割合で表示する古典的な方法。親要素を常に意識する必要があるので、DOM構造が複雑になってくると訳が分からなくなる可能性がある。

p{
  font-size:1em;
}

考え方はパーセント（％）と同様。親要素に応じた割合で表示する。設定はパーセントの1/100で設定する。つまり、こんな感じ

1em = 100%

これも親要素を常に意識する必要があるので、複雑なレイアウトだと以外に設定が面倒になることが多い。

p{
  font-size:1rem;
}

言葉通り、emの応じる先をルート（html）にしたもの。最上位に対しての割合になるので親要素を意識しない分、こっちの方が楽。

p{
  font-size:1vw;
}

考え方は、remに近いけれどブラウザの幅と高さ（厳密にはビューポートの設定）に応じて、割合で指定する。意図した通りのサイズにするためには、小数点以下３桁くらいまでの設定が必要になる。

最近のレスポンシブルなデザインのCSSを眺めていると、VW/VHを採用してフォントサイズを設定しているサイトを多く見かける。

正直、vw / vh は狙ったサイズにするための算出演算が結構面倒くさい。remはルートからの相対値になるので、レイアウトを先に考えて文字を横幅をハメ込んで行く場合に、大体の形を予想して設定していけるのが利点。

それに対してビューポートの場合もより細かな設定が可能になるが、横幅〇〇pxの場合に、14pxを設定する場合は、〇vwのように値を計算する必要があるのが面倒くさい。

今後は、pxやptのようにフォントのサイズを固定化しているサイトはユーザビリティが下がってしまい淘汰されかねない。スマホやタブレットでの表示が更に増えるので、vw / vh が主流になっていくため、Web開発では必須になっていくと予想されます。

最後までご覧いただき、ありがとうございます。