CSSの単位とは
CSSでは文字サイズや要素のサイズを指定する時に単位をつけて数値指定します。
単位には色々な種類はあり、大きく分けて「相対単位」と「絶対単位」の２種類があります。
⚪︎相対単位
相対単位はブラウザの表示領域や他の要素に指定したサイズを基準として相対的に算出される単位です。
基準サイズによって大きさが変化します。
相対単位は種類があるので、今回はよく使うものをまとめます。
・％
親要素を基準とした時の割合の単位です。
親要素の幅が６００pxの時、子要素に５０％を指定すると、子要素の幅は３００pxになります。
フォントサイズだと親要素が１６pxの時、１６px＝１００％になります。
・em
親要素のサイズを基準とした単位です。
フォントサイズに指定されることが多く、親要素のフォントサイズが１６pxの時、１６px＝１em
となります。
・rem
ルート要素タグのサイズを基準に計算される単位です。
html要素のフォントサイズが１６pxの時、１６px＝１rem
となります。
・vw
「viewport width」の略で、ビューポートの幅を基準とした割合の単位です。
ビューポートとはブラウザでWebサイトを閲覧している時の表示領域です。
ビューポートの幅が１２００pxの場合、５０vwは１２００pxの半分の６００pxになります。
表示領域の幅によって変動します。
・vh
「viewport height」の略で、ビューポートの高さを基準とした割合の単位です。
ビューポートの高さが８００pxの場合、５０vwは８００pxの半分の４００pxになります。
表示領域の高さによって変動します。
⚪︎絶対単位
・px
Web上で使われる最も一般的な絶対単位です。
他の要素から影響を受けないので、１００pxと指定したら必ずそのサイズで表示されます。
タブレットやスマホなどデバイスにも対応させたい時は使う場面を考えましょう。
デバイスが変わっても要素のサイズを変えたくない時に使うと良いです◎
最後に
私もまだまだ単位についてどのタイミングで使用したらいいのか分からない時もありますが、相対単位でのサイズ指定はさまざまなデバイスに対応させたい時に使うと便利なので、数値を変えてみながら試して見ると良いと思います。