プログラミング勉強日記

2020年10月20日
px,%,emなどサイズを指定する単位はたくさんあって、それぞれの違い理解しておかないといけないと思ったのでまとめる。

ピクセル単位(px)

　ピクセルはサイズを固定する単位。1ピクセルは画面上ではドット1個で表示する。

　ピクセル単位は柔軟性に欠けるのでfont-sizeの設定には向いてない。

Em単位(em)

　1emの大きさはブラウザのfont-sizeのデフォルトの値で決まる。初期設定では1emは16pxである。em単位の値は要素が継承したfont-sizeによって決まる。

　フォントサイズ設定に使うとユーザ設定のオーバーライドに関する問題を回避しやすい。

Rem単位(rem)

　1remの値はルート要素のfont-size値と同じ。

　em単位では親要素のfont-sizeに従って子要素のfont-sizeが拡大縮小することがem単位の値を計算するプロセスを複雑にしてしまうことがあるので、よくないこともある。rem単位にはそういった点がない。
　具体的には、独立した親コンテナのfont-sizeでrem単位を指定すれば、モジュール内の全要素のfont-sizeを親要素に従って設定でき、他のモジュールから切り離して設定できる。

パーセント(%)

　パーセントはem単位と同様。

　ルート要素におけるブレークポイントでfont-sizeを設定するので、レスポンシブデザインでの計算が簡単になる。

Viewport単位(vw, vh, vmin, vmax)

　様々な要素のfont-sizeをビューポートのサイズを基準にして設定できる。

　ビューポートサイズが小さすぎたり大きすぎたりすると、font-sizeではテキストが読みにくくなってしまう可能性がある。

参考文献

HTMLでemでフォントサイズを指定する方法を現役エンジニアが解説【初心者向け】
CSS初心者が混乱しがちな7つの単位の意味と違いをしっかり理解しよう