こんにちは櫻井です。
僕はコーディングはほとんど独学で学んできたのですがその際ほとんどの文献で使用されていたフォントサイズの単位はpxでした。
そのため、今までweb制作の時に使用するフォントサイズの単位はpxを使用してきたのですが、前回ジャンプ率について調べた時使われている単位の内訳は
rem 9
px 8
vw 2
% 1
でした。もっとも多いのpxではremです。今回は、なぜpxではなくremを使われているのか調べてみました。
remとpxの違い
remとpxにはどのような違いがあるのか。まずはそこからみていきます。
まずはremから見ていきましょう。
remは相対単位で、ルート要素（html要素）のフォントサイズに対応したフォントサイズです。
例えば、
html {
font-size: 100%;
}
とした場合、もしユーザーがブラウザのフォンサイズを手動で変えていない場合、1remのフォントサイズは16remになります。
もし、
html {
font-size: 16px;
}
とした場合には、1remのフォントサイズは問答無用に16pxになります。
では、pxはどうでしょうか？ pxは1ピクセルに対応した単位です。 実はpxはcssの仕様では絶対単位に分類されますが、ディスプレイの解像度によって指定された値のサイズが変化する相対単位です。
remとpxの違いはcssの仕様上、相対単位か絶対単位かの違いがあることがわかりました。
なぜremなのか
では、なぜ相対単位であるremを使うのでしょうか？
それはアクセシビリティの観点からpxだと拡大することができないからだと考えられます。
例えば、目が悪くブラウザのフォントサイズを大きくしていた場合、pxを使っているとユーザー側で自由にフォントサイズを調整することができなくなってしまいます。 しかし、remを仕様して、
html {
font-size: 100%;
}
と記述しておけば、ブラウザのフォントサイズを大きくしていた場合でもフォントサイズが大きくなります。
しかし、現実問題としてブラウザのフォンサイズを手動で変えていない場合のフォントサイズを16pxとしてしまうといちいち計算するのがなかなか大変です。
そこで、 html {
font-size: 62.5%;
}
と指定します。
するとブラウザのフォンサイズを手動で変えていない場合、1remのフォントサイズが10pxになります。
これなら計算しやすいですね。 実際、remを使った9サイトのほとんどがこの書き方にremに対応していないブラウザを考慮した次のような指定をしていました。
html {
font-size: 10px;
font-size: 62.5%;
}
これでさらに、marginやpaddingもremで表記すればフォントサイズが大きくなった際に、同時に大きくなってくれます。 remを使う際に一番やってはいけない書き方は
html {
font-size: 10px;
}
でしょう。この書き方をするとユーザーがブラウザのフォントサイズを大きくした場合でもhtmlのフォントサイズ変わらず10pxのままなので1remのフォントサイズが変わりません。
これではpxを使うのと変わらないのです。
もしろこれならpxを使った方がソース量も抑えられるでしょう。
まとめ
今回remについて調べてみましたが、pxが実は相対単位というのは初めて知りました。
今まではpxを主に使っていました。これからはアクセシビリティの観点からも徐々にremをメインに使うようにしていこうと思います。
