cssで、よく文字などの大きさを指定する際に「px、em、rem、vw、vh」とたくさん種類がありどれを選べば良いか分からなかったので、使い方の違いをまとめた。
px、em、rem、vw、vhの違い
いきなりだが結論から書こう。
px、em、rem、vw、vhの違いはまとめると以下のようになる。
- px = ピクセル
- em = 親要素に対しての相対サイズ。font-sizeに使用する。
- rem = root要素に対しての 相対サイズ。font-sizeに使う。
- vw = viewportに対しての相対サイズ (幅）。
- vh = viewportに対しての相対サイズ (高さ）。
それぞれについて、図解を含めて順番に説明していく。
px
どんな時でも同じ大きさ。
500pxといったら500px。1pxが500個分。
みんな知ってると思うので割愛。
em
親要素に対しての相対サイズ。font-sizeに使用する。
子要素のフォントの大きさが、0.5em（50%）になっているのが分かるだろう。
そう、「%と同じ考え方」と覚えると良い、
100％を1とする相対指定で大きさを指定する。
- 100% = 1em
- 50% = 0.5em
- 10% = 0.1em
つまり、親要素のfont-sizeが100pxだとして、
小要素に「width: 10%;」と書くのと「width: 0.1em;」と書くのは、
結果として小要素のfont-sizeが10pxになる点で変わりない。
気をつけるべきは、親の要素との相対なので、親要素がそもそも相対値が指定されている要素だと、「相対値の相対値」みたくなって複雑になってしまうことだ。
rem
root要素に対しての 相対サイズ。font-sizeに使う。
root要素が何かというと、htmlを記述するときの一番大元のタグである“<html></html>”のことだ。
ちなみにhtmlタグのfont-sizeデフォルト値は16pxらしい。
つまり、「font-size: 10rem;」は、160px （16 × 10 = 160）。
vw, vh
vwとvhについては、二つまとめて紹介する
それぞれvとかwとかhとか、何を示しているか知っていると、理解が早いので、下記。
- vw = viewport width
- vh = viewport height
つまりviewportに対しての、幅と高さの相対サイズ。
今まではfont-sizeに関しての話だったが、こいつはfont-sizeに限らず使用することができる。
viewportとは何か。
説明すると長くなるのだが、簡単に言うとレスポンシブに欠かせないmeta要素だ。
よくheadタグの中に呪文のように書いてある、下記のような記述のことだ。
<meta name="viewport" content="width=device-width, initial-scale=1">
これは前提知識なので、以下参考リンク。ぜひ理解した上で記事を読み進めて欲しい。
『meta viewportとは～設定方法とスマートフォン（android・iphone）で効かない原因』
『もう逃げない。HTMLのviewportをちゃんと理解する』
本題
viewportを踏まえた上で、理解したいのが、
vw、vhともに、viewportに対しての相対サイズだよ、ということ。
書き方は%と同じだが、%をvw,vhに変えて書く。(50% => 50vw)
メリットは常にviewportとの相対サイズで表示されること。
親のサイズとかの影響を受けない。
なんだか考え方はremと似ている。
単純に%で指定して書くと、親要素に対しての%のサイズで表示されてしまう。
これは要素が多くなってくると、管理が難しくなってくる。
対してvw,vhは常にviewportに対する相対サイズで表示してくれるので、複雑にならなくてすむ。
以下実際に「viewport＝画面の幅」の設定で試した例を載せておく
◾️ html
◾️ css
◾️ 画面
はじめに単純に%の指定の例。
画像と、画像の親のdiv要素にそれぞれ幅50%を指定しているので、結果として画像は25%の幅で表示されてしまっているのがわかる。
◾️ css (vw版)
次に画像に対して%ではなく、vwを指定してみる。
50vwとすると、viewport（画面の幅）に対して50%ということになるので、
結果は画面の半分の大きさになるはずだ。親要素の50%の影響が受けない。
◾️ 画面(vw版)
半分になった。親の%指定の影響を受けてない。
つまり、Viewportとの相対値で50%になっていると言うことだ。
px、em、rem、vw、vhの違いまとめ
いかがだったろうか、どういう時にどれを使えば良い的なベストプラクティスは分からないが、違いを理解していることで、後々に役立つことがあるのではないだろうか。
- px = ピクセル
- em = 親要素に対しての相対サイズ。font-sizeに使用する。
- rem = root要素に対しての 相対サイズ。font-sizeに使う。
- vw = viewportに対しての相対サイズ (幅）。
- vh = viewportに対しての相対サイズ (高さ）。
