【css】単位についておさらいしてみた

cssで使用する単位の種類はいくつかあります。

「px」や「%」「em」「rem」は比較的よく使用する単位だと思います。

その他にも「vw」「vh」「vmin」「vmax」などなど、種類はさまざまです。

それぞれの単位について説明していきます。

単位の種類①：px

「px」はコーディング(css)を学習する際に1番最初に覚える単位じゃないでしょうか。
単位としては１px=1ドットの絶対値になります。

絶対値となるので、親要素やそのほかの要素に影響されることはなく、指定した値が要素に適用されます。

▼pxのサンプル

単位の種類②：%

「%」はpxとは異なり、親要素で指定している値によって変動する相対値となります。
レスポンシブデザインでのコンテンツ幅の指定などで使用されている単位です。
該当の要素のみではなく、他要素が影響する事などpxと比較すると使い慣れるのに多少時間はかかると思います。

▼%のサンプル

単位の種類③：em

「em」は親要素のfont-sizeを基準にした相対値となります。

直近の親要素にfont-sizeの指定がない場合は、さらに親要素を遡ってfont-sizeの値を基準とします。

どの親要素にもfont-sizeの指定がない場合、最終的にはhtmlタグのfont-sizeを基準にした相対値となります。

▼emのサンプル「親要素にfont-size指定あり」

▼emのサンプル「親要素にfont-size指定なし」

単位の種類④：rem

前述したemは親要素のfont-sizeを基準とした相対値に対して、
「rem」はルート要素を基準にした相対値となります。
ルート要素=htmlと覚えておいて良いと思います。

親要素に依存しないため、サイト全体での各要素のfont-size指定などで重宝します。

▼remのサンプル

単位の種類⑤：vw

「vw」はビューポート(ウィンドウ)の横幅を基準とした相対値となります。
1vwはウィンドウ横幅の1%となるので、ウィンドウ幅が1920pxの場合1vw=19.20pxとなります。
ウィンドウの横幅によって可変するのでレスポンシブ対応などで使用します。

▼vwのサンプル

単位の種類⑥：vh

「vh」もvw同様にウィンドウ幅を基準とした相対値となります。
vwは横幅を基準にした値となりますが、vhはウィンドウの縦幅を基準とした値となります。

ファーストビューで画面いっぱいに画像や動画、コンテンツを表示したい場合などに使用します。

▼vhサンプル

単位の種類⑦：vmin

「vmin」もvw・vh同様にウィンドウ幅を基準にした相対値となりますが、vminの場合、横幅と縦幅とで値の小さい方を基準にします。

横1920px縦1080pxで100vminを指定した場合、値の小さい「1080px」の100%で「1080px」となります。

▼vminのサンプル

単位の種類⑦：vmax

「vmax」はvminとは逆にウィンドウ幅の縦幅と横幅で、値の大きい方を基準とします。

横1920px縦1080pxで50vmaxを指定した場合、値の大きい「1920px」の50%で「960px」となります。

▼vmaxのサンプル

スマホサイトやレスポンシブなどの対応だとpxだけだと、端末によってレイアウト崩れを起こしたり、思った通りのレイアウトに調整しづらくなる場合もあります。
色々な単位の種類を知る・使いこなすことで、コーディングの幅も広がると思います。