Zenn
🎨

CSS単位(px, em, rem, %, vh, vw...)を理解する

2021/04/24に公開
CSS
初心者
tech

概要

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

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

CSS単位の分類

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

  1. 他要素や画面サイズに影響を受けず常に固定値を持つ絶対値の単位(Absolute Units)
  2. 他要素の単位・大きさや画面サイズに応じて可変的な値となる相対値の単位(Relative Units)

絶対値の単位(Absolute Units)

px

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

相対値の単位(Relative Unit)

em

親要素の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を基準とします。

rem

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(Viewport Height)・vw(Viewport Width)

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

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

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

それぞれのCSS単位使い分け

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

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

https://gist.github.com/basham/2175a16ab7c60ce8e001

その他の単位

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

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

参考

Discussion