WebページをスタイリングするためにHTMLタグを装飾するCSS。テキストの色やサイズなどを装飾できるCSSですが、その指定にはいろいろな単位があり、どれを使えばいいのか悩んでしまうもの。
特に、margin、padding、font-sizeなどのプロパティを使用するときに迷ってしまうのが、サイズを指定する単位です。それぞれの単位について深く理解しないまま、「なんとなく」使っている人も多いのではないでしょうか?
今回は、CSSコーディング時にフォントサイズの指定に適用した例を主に用いて、押さえておきたいCSSの5つの単位について解説します!

画面解像度に依存する『px(ピクセル単位)』

div { font-size: 14px;}
p { font-size: 20px;}

「px」は、ピクセル単位で値を指定する場合に使用します。Retinaディスプレイなどの高精細ディスプレイを除けば、1pxはユーザーの画面ではドット1個で表示されます。画面の解像度に依存するため、親要素など他の要素との関係はなく、指定したピクセル数の値になります。

相対的な単位ではありますが、実際は絶対的な単位として使用されているため、ユーザーがブラウザのフォントサイズ設定を変更しても、テキストを拡大縮小することができません。ユーザーフレンドリーなコーディングを心がけるなら、あまり使用しないことをおすすめします。

親要素のサイズを基準にする『em(Em単位)』

div { font-size: 1.2em;}
p { font-size: 2em;}

「em」は、親要素のフォントサイズにもとづいて自身を1とする単位。一般的なブラウザのフォントサイズは16pxのため、1em=16pxになります。たとえば10pxが指定された要素の子要素に対し、2emを指定すると20px相当のフォントサイズになります。

ルート要素のサイズを基準にする『rem(Rem単位)』

html { font-size: 15px;}
p { font-size: 1.2rem;} strong { font-size: 1.4rem;}

「rem」は、「html」などルート要素のフォントサイズを基準とした単位。「em」が親要素のサイズに依存するのに対し、「rem」は親要素のフォントサイズが変わったとしても、ルート要素のフォントサイズが変わらない限り変化しません。
上記のコーディング例では、p要素には18px、strong要素には21px相当のフォントサイズになります。
strong要素がp要素の子要素だった場合、p要素のフォントサイズが変化してもstrong要素のフォントサイズは変化しないため、要素の継承による問題を避けられるメリットがあります。

親要素のサイズを基準にする『%(パーセント)』

html { font-size: 62.5%;}
div { font-size: 2rem;} p { font-size: 1.2em;}

「%」は、親要素のフォントサイズに対する割合を表す単位で「em」と同様です。
一般的なブラウザのデフォルトのフォントサイズが16pxのため、上記のコーディング例のようにhtml要素のフォントサイズを62.5%に指定すると、10px相当のフォントサイズになります。そうすることで、その他の要素のフォントサイズが容易に計算できます。

複数のブレークポイントで重宝できる『vw、vh(Viewport単位)』

div { width: 100vw;}
div { height: 100vh;}

レスポンシブデザインでは、ある画面サイズを境目として、適用させるスタイルを切り替えます。この境目のことを「ブレイクポイント」と呼びます。
「vw」は、指定したviewportの幅に対する割合の単位。「vh」は、指定したviewportの高さに対する割合の単位です。たとえば画面幅が320pxであれば、100vwは320px、10vwは32pxになります。画面サイズを基準とする単位のため、フルスクリーンの背景画像を使ったデザインなどによく用いられます。
「%」指定と変わらない気もしますが、「%」では親要素のプロパティに依存するため、必ずしもviewportの幅が基準になるとは限りません。「vw」「vh」なら、viewportの幅や高さを元にしたサイズを指定できるメリットがあります。

複数のデバイスサイズを意識したレスポンシブデザインによるコーディングが主流になってからというもの、相対的なサイズ指定の理解が必要になりました。これまでのCSSのサイズ指定をそのまま使っていると、予期せぬミスが発生したりと困ってしまうもの。単位の理解を深めておくことで、要素がズレてしまうなどのトラブルも減ることでしょう!