2021/01/21

CSSの見慣れない単位【現役エンジニアが解説】

PROGRAM

今回は、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を指定しています。

• facebook
• Tweet
• Read Later