概要

CSS単位でよく見かけるpx, em, rem, %, vh, vwを明確に理解し使い分けられるよう、それぞれの違いと使い分け方(筆者が目安にする基準・個人の意見)に関してまとめました。

同様な記事は既にネット上に多く存在しますが、自分の理解もかねて改めてまとめてみました。

CSS単位の分類

CSS単位は大きく下記の2つに分類する事が可能です。

ピクセル(pixel)の略で上記で記しました通り、他要素や画面サイズに影響を受けず常に固定値を持つ絶対値の単位(Absolute Unit)です。

親要素のfont-sizeを1とした倍率を指定します。

例としまして、下記ですと.parentのfont-sizeが10px、.childのfont-sizeが0.5emで指定されています。

この場合の.childのfont-sizeをpxで表すと、親要素の10pxを1としての表すので、10 * 0.5 = 5 px となります。

.parent {
  font-size: 10px;
}

.child {
  font-size: 0.5em; /* 10 * 0.5 = 5 px */
}

直属の親要素にfont-sizeが指定されていない場合、さらに上位へと遡っていきます。どの親要素にも明示的に指定されていない場合、最終的にbodyのデフォルトのfont-sizeである16pxを基準とします。

rootのfont-sizeを1とした倍率を指定します。

例としまして、下記ですと:rootのfont-sizeが10px、.textのfont-sizeが1.2remで指定されています。

この場合の.textのfont-sizeをpxで表すと、rootの10pxを1としての表すので、10 * 1.2 = 12 px となります。

:root {
  font-size: 10px;
}

.text {
  font-size: 1.2rem; /* 10 * 1.2 = 12 px */
}

emと似ていますが、%ではプロパティによって基準値が変わります。

例えば、height やmargin等で%が使用された場合は親要素のheightやmargin の値を基準値にとります。

font-sizeであれば親要素のfont-sizeを基準値にするのでemと同じとなります。

vhとvwはそれぞれ、ビューポートの高さとビューポートの横幅を表します。

ビューポートとはブラウザ等で現在表示されている領域を表します。(※ビューポートに関してより詳しくはこちら)

vh・vwではビューポートの高さ・横幅を100として表します。その為、1vhであればビューポートの高さの1%、1vwであればビューポートの横幅の1%となります。

下記はあくまでも筆者が目安にする基準であり、個人的な意見である事を前提とさせて頂きます。

CSS単位	用途
px	borderやboxshadowやoutline等の他要素に関わらず常にサイズが一定のもの
%	htmlタグでのフォントサイズの指定 heightやwidthなど
rem	margin/padding/font-sizeなど
em	メディアクリ remと同じ用途で親要素を基準にしたい場合(頻度は少ない)
vh・vw	全体的なレイアウトで%の代わりに使用する場合もある

絶対値の単位には他にもcm・mm・in・pt・pc等が存在します。

相対値の単位には他にもch・ex・vmin・vmax等が存在します。