single.php

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 ビューポート(ブラウザの幅と高さ)を基準にして割合で設定。

ピクセル(px)

p{
  font-size:12px;
}

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

パーセント(%)

p{
  font-size:100%;
}

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

エム(em)

p{
  font-size:1em;
}

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

1em = 100%

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

ルートエム(rem)

p{
  font-size:1rem;
}

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

 ビューポート幅と高さ(vw / vh)

p{
  font-size:1vw;
}

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

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

まとめ

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

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

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

スポンサーリンク

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です