ウェブデザインをおこなう際、文字や要素などの大きさを指定するのに使える単位がいくつかあります。
それぞれの単位の違いと使いどころ、メリット・デメリットをまとめました。
px
pxの読み方は「ピクセル」です。
pxは、デジタル画像を構成する最小単位です。 デジタル画像は小さな四角い点が集まってできていて、その点の1つが1pxというサイズになります。 1pxより小さく分割することはできません。
pxは絶対値であり、指定した値は親要素や画面サイズに影響を受けません。
・デメリット
pxで単位指定すると、ブラウザの設定から文字サイズを変更しても反映されないことに注意が必要です。しかしピンチアウト機能でページを拡大することはできるので、ユーザーが必ずしも自分で読みやすい大きさに変えられないわけではありません。
※CSSで使える絶対値の単位として、ほかにもpt(ポイント)、in(インチ)、cm(センチメートル)、mm(ミリメートル)、Q(級)、pc(パイカ)があります。これらは印刷にも対応したウェブサイトを作成する際に使われることがあります。
em
emの読み方は「エム」です。
親要素に対する相対値を指定します。
たとえば、親要素のサイズを10pxと指定し、子要素に2emを指定した場合、子要素のサイズは10pxの2倍、つまり20pxとなります。
・特徴
親要素のサイズを変更した場合、emで指定された子要素のサイズも連動して変わります。
また、親要素にサイズが指定されていない場合は、さらにその上の要素を参照します。どこまで遡ってもサイズが指定されていない場合は、ブラウザのデフォルトサイズの初期値である16pxが1emになります。
emは、部分的に文字サイズを変えるときに使いやすい単位です。たとえばテキスト文の中で、一部の文字だけ強調させたい場合、その文字の単位をemで指定すると、親要素に合わせてサイズを直感的に微調整できます。
rem
remの読み方は「レム」です。意味は”root em”の略。
ルート要素（<html>）に対する相対値を指定します。
ブラウザのデフォルトサイズの初期値は16pxなので、それが基準になります。
つまり、デフォルトでは1rem = 16pxです。
・メリット
htmlタグのサイズを変更するだけでremで指定したそれ以下の階層の全ての要素を相対的に変更できるので、レスポンシブ対応に使いやすい単位です。
%
親要素に対する相対値を指定します。
親要素に対する相対値を指定する点ではemと一緒ですが、基準値に対する指定方法が違います。
emは親要素を基準として倍数で指定するのに対し、%は親要素を基準として百分率で指定します。
%は、ブラウザの画面の大きさに合わせて変化するので、レスポンシブデザインを行う際によく利用されます。
vwとvh
vwの読み方はブイダブリュ、vhの読み方はブイエイチです。
それぞれviewport width、viewport heightの略です。(viewportとは、ブラウザウインドウの表示領域のこと)
文字通り、vwはブラウザウインドウの横幅を、vhはブラウザウインドウの高さを基準にします。
vw・vhは、ブラウザサイズの横幅・高さをそれぞれ100として定義します。100vwであればブラウザ幅の100%、つまりブラウザウィンドウ幅いっぱいに表示します。
1vwであればブラウザ幅の1%に表示、という指定になります。
・vw・vhのデメリット
スマホを横向きにした時、ブラウザの横幅に合わせてフォントサイズも大きくなるため、スマホの画面に対して大きくなりすぎてしまいます。
また、スマホブラウザにはアドレスバーやメニューバーなどの動的なバーがあり、スクロールするとそれらが非表示になることがあります。バーが非表示になるとブラウザの高さが広がり、vhで高さを指定した要素が意図しない大きさになる場合があります。
さらにvw単位はスクロールバーの幅を含む仕様のため、スクロールバーがある場合、ブラウザの実際の幅ではなくスクロールバーを含めた幅が基準値になることを想定する必要があります。
今回ご紹介した以外にも
vmin, vmax,ex, cap, ch, rch, ic, ric, lh, rlh, dvw, dvh, dvi, dvb, dvmin, dvmax, lvw, lvh, lvi, lvb, lvmin, lvmax, svw, svh, svi, svb, svmin, svmax, vi, vb……と、CSSで使えるたくさんの単位が存在します。
また、clamp関数やmin関数などの関数を使って、流動的なサイズ指定を行うことも可能です。
