はじめに

CSSにはたくさんの単位があります。普段の授業ではpx(ピクセル)を使うことが多いですが、他にも単位はたくさんあるので、使い分けができるように調べてみました。

前提

今回は前提として、絶対値と相対値について知っておく必要があります。

絶対値 → 固定的な値となり、他要素の単位や大きさに影響を受けません。
相対値 → 可変的な値となり、他要素の単位や大きさに影響を受けます。

値が変化するのか、しないかの違いです。

単位：px

ピクセルの略です。画面サイズの変更や、他要素の単位や大きさに影響されず、サイズが固定される絶対値です。授業ではよく、font-size , margin , padding で使っています。

単位：％

指定する要素の親要素に対する相対値です。親要素にサイズ指定がなければ、HTMLの階層を遡ってブラウザ幅（画面幅）が基準になります。

親要素が100pxで、指定したい要素に50%と指定すると50pxになります。

単位：em

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

親要素のfont-sizeが20pxで、指定したい要素に0.5emを指定すると10px(20px*0.5em)になります。

単位：rem

ルート要素のfont-sizeが基準になります。rootのfont-sizeを変更すると、各要素に指定していたremの大きさも一括で変更されます。

rootに20pxと指定していた場合、1rem=20pxになります。何も指定しない場合のrootは16pxです。

単位：vh ・ vw

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

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

他にもvmin（幅と高さのうち、値が小さい方に対する割合）、vmax（幅と高さのうち、値が大きい方に対する割合）もあります。

※ビューポートとはブラウザ等で現在表示されている領域のこと。

使いこなしたい

単位の使い分けについて考えてみました。

さいごに

調べてみるとたくさんの単位があったので、使いこなせるようにしていきたいです。

今は授業でSass(SCSS)を勉強しているので、併せて勉強していきたいです。