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

この記事を書いた人

Creative事業部 コーダー<br>上間 英紀
Creative事業部 コーダー
上間 英紀
2023.01.24

普段、コーダーとしてWebサイトのコーディングを行っていますが、コーディングする上で必ず触るのがcssです。
今回はそのcssで使用する単位について「本当に理解して使用できているかな?」と思い、おさらいも兼ねてまとめてみました。

コーディング初心者の方はもちろん、玄人の方も備忘録として参考にしていただけると幸いです。

単位の種類

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

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

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

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

単位の種類①:px

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

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

▼pxのサンプル

単位の種類②:%

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

▼%のサンプル

サンプルでは親要素の「.hoge」がwidthを400px、heightを300pxで指定しています。

子要素の「.hoge__fuga」のwidthを100%にした場合、「400px」となります。

heightは50%で指定しているので、300pxの半分の「150px」となります。

「.hoge__fuga--text」のフォントサイズを「32px」としているので、

子要素「.hoge__fuga--text__small」のフォントサイズを50%で指定した場合、半分の「16px」となります。

単位の種類③:em

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

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

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

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

親要素「.hoge__fuga」のfont-sizeを10pxに指定しています。
その状態で子要素の「.hoge__fuga--text」のfont-sizeを2emにすると「20px」となります。

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

上記サンプルではどの親要素にもfont-sizeの指定がありませんので、
htmlタグのデフォルト値であるfont-size16pxを基準に2倍となります。

単位の種類④:rem

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

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

▼remのサンプル

htmlのfont-sizeを14pxで設定した場合、「.hoge__fuga--title」のfont-sizeは2rem=2倍の「28px」となり、「.hoge__fuga--sub-title」は1.5rem=1.5倍の「21px」、「.hoge__fuga--text」は1rem=等倍の「14px」となります。

単位の種類⑤:vw

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

▼vwのサンプル

単位の種類⑥:vh

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

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

※※注意※※
スマホの場合、ブラウザのメニューバーは考慮していないためheightを100vhで指定すると、すこしはみ出す場合があります。
「メニューバーも考慮してきっちり画面いっぱいにしたい!」という場合はJSでの対応が良さそうです。

▼vhサンプル

単位の種類⑦:vmin

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

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

▼vminのサンプル

単位の種類⑦:vmax

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

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

▼vmaxのサンプル

単位の種類を覚えるとバリエーションも増える

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

M&TTでは、「わくわく」を実現する仲間を募集しています!
皆様のご応募お待ちしております!