(図解) px, em, rem, vw, vhの違いを調べてみた

px-em-rem-vw-vh

 

cssで、よく文字などの大きさを指定する際に「px、em、rem、vw、vh」とたくさん種類がありどれを選べば良いか分からなかったので、使い方の違いをまとめた。

 

px

どんな時でも同じ大きさ。
500pxといったら500px。1pxが500個分。

みんな知ってると思うので割愛。

 

em

親要素に対しての相対サイズ。font-sizeに使用する。

em-image

%と同じ考え方と覚えると良い、
だが指定の仕方が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>”のことだ。

rem-image

ちなみにhtmlタグのfont-sizeデフォルト値は16pxらしい。

つまり、「font-size: 10rem;」は、160px (16 × 10 = 160)。

 

vw, vh

vwとvhについては、二つまとめて紹介する
それぞれvとかwとかhとか、何を示しているか知っていると、理解が早いので、下記。

vw、vhの正式名称
  • vw = viewport width
  • vh = viewport height

 

つまりviewportに対しての、幅と高さの相対サイズ。
今まではfont-sizeに関しての話だったが、こいつはfont-sizeに限らず使用することができる

vw-vh-image

 

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-image-2

書き方は%と同じだが、%を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に対しての相対サイズ (高さ)。

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。