CSSの単位(px,rem,em,%,vh,vw)について

CSSには様々な単位が存在します。

簡単にまずまとめると

pxとptは指定した値をそのままのサイズにしたい時に使うもの

それ以外の単位を使用した場合は、他要素を基準にしての、サイズ指定を行う時に使うもの
になります。

CSSの単位では「絶対値」と「相対値」といったように大きさの指定の仕方に種類があります。

絶対値とは、他の要素に左右されない値のことを言います。

相対値とは、他要素を参考に数値が決まる値のことを言います。例えば、%の単位使う時に子要素のfont-sizeを200%と指定した場合、元となる要素のサイズの200%。つまり親要素の2倍のサイズになるということになります。

px

ディスプレイの画素「ピクセル」を 1 とする単位。この単位ではサイズを絶対値指定します。

rem

remは 「root em」の略です。html 要素の font-size を基準とする単位です。html要素のフォントサイズの既定値は 16px なので、ルートの font-size を弄っていない場合は 1rem=16px となります。この単位ではサイズを相対値指定します。

em

この単位では、font-size 自身に使われる場合は親要素から継承されたフォントの大きさを表します。font-size 以外で使われる場合はその要素が持つ font-size を基準とします。この単位ではサイズを相対値指定します。表示のされ方としては、文字が少し太くなり、強調されるといった具合です。

%

親要素の幅 or 高さを基準とする単位です。font-size 自身に使われる場合は挙動は em と同じになります。この単位ではサイズを相対値指定します。例えば、親要素を10pxと指定していて、子要素を300pxと指定した場合、子要素は3倍で表示されます。

vh

画面の縦幅を基準とした単位です。1vh の場合は画面の縦幅の長さの 1%を表します。font-size ではあまり使われることのない単位です。この単位ではサイズを相対値指定します。

vw

vhが画面を縦幅を基準とした単位なのに対して、vwは画面の横幅を基準とした単位です。1vw は画面の横幅の長さの 1%を表します。この単位ではサイズを相対値指定します。