概要
CSS単位でよく見かけるpx, em, rem, %, vh, vwを明確に理解し使い分けられるよう、それぞれの違いと使い分け方(筆者が目安にする基準・個人の意見)に関してまとめました。
同様な記事は既にネット上に多く存在しますが、自分の理解もかねて改めてまとめてみました。
CSS単位の分類
CSS単位は大きく下記の2つに分類する事が可能です。
他要素や画面サイズに影響を受けず常に固定値を持つ絶対値の単位(Absolute Units)
他要素の単位・大きさや画面サイズに応じて可変的な値となる相対値の単位(Relative Units)
絶対値の単位(Absolute Units)
px
ピクセル(pixel)の略で上記で記しました通り、他要素や画面サイズに影響を受けず常に固定値を持つ絶対値の単位(Absolute Unit)です。
相対値の単位(Relative Units)
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
全体的なレイアウトで%の代わりに使用する場合もある
その他の単位
絶対値の単位には他にもcm・mm・in・pt・pc等が存在します。
相対値の単位には他にもch・ex・vmin・vmax等が存在します。
参考
Should I use px or rem value units in my CSS?
When to use which units in CSS
CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained
The difference between CSS units (px, pt, rem, em, vh, vw, ch, ex and the rest)
📝ちゃんと使い分けてる？CSSのpx, em, rem, %, vw単位の違い｜たかもそ／Web Creator.｜note
What's The Difference Between PX, EM, REM, %, VW, and VH? | Elementor
CSSの単位のpx・em・rem・vh・vwの違いと使い方
Guide: EM vs REM vs PX. Which should you use?
CSS Units Best Practices
↧
