CSSの見慣れない単位【現役エンジニアが解説】
今回は、CSSの見慣れない単位について、3種類に分け、簡単に解説していきます。
em単位
emの単位は、継承先の要素のfont-sizeを基準にします。
継承先の要素のfont-sizeを指定していない場合、ブラウザのデフォルト値です。
.hoge{ font-size:1.2em; /* 1.2emは継承先の要素のfont-sizeの1.2倍 */ }
上記のコードでは、hogeのクラスの要素のfont-sizeを継承先の要素の1.2倍のサイズにしています。
rem単位
remという単位は、ルート要素のfont-sizeを基準とします。
ルート要素とは、html要素のことで、その間の階層のfont-sizeの影響を受けません。
.hoge{ font-size:1.2rem; /* 1.2remはルート要素のfont-sizeの1.2倍 */ }
上記のコードでは、hogeというクラスの要素のfont-sizeをルート要素の1.2倍のサイズにしています。
Viewport(vw, vh, vmin, vmax)単位
CSSには、Viewportを基準とした、vwとvh、vmin、vmaxという4つの単位があります。
vw(vh)はViewportの幅(高さ)の1%、vmin(vmax)は幅と高さの小さい(大きい)方の1%となります。
.hoge1{ font-size:1vw; /* Viewportの幅の1% */ } .hoge2{ font-size:1vh; /* Viewportの高さの1% */ } .hoge3{ font-size:1vmin; /* Viewportの幅と高さのうち小さい方の1% */ } .hoge4{ font-size:1vmax; /* Viewportの幅と高さのうち大きい方の1% */ }
上記のコードでは、hoge1~4までのクラスの要素で、vwとvh、vmin、vmaxを使って、Viewportを基準にfont-sizeを指定しています。