今更聞けないCSS基礎知識～サイズ単位編～
- マークアップ
こんにちは。マークアップエンジニアの近藤です。
今回は、CSSでのサイズ単位についてです。
皆さんはCSSで、font-size、width、heightなどを指定する際、単位は何をご利用ですか？
使い慣れた単位のみ利用という方も多いかと思いますが、現在は選択肢が多くて迷いますよね。
そこでまずは、指定形式をおさらいしようと思います。
どんな指定がある？
普段良く見かけるのは、px、%、emあたりだと思います。
rem、vw、vhのような指定も、最近対応ブラウザが増えてきたため、良く見かけるようになりました。
例えば、font-sizeの場合、以下のような形となります。
-
【1】px
最も一般的な指定です。絶対値での指定なので、他の要素の影響を受けません。
16pxと書いたら16px以外の何物でもありません。 -
【2】%
相対値での指定です。親要素のfont-sizeに影響を受けます。
親要素のフォントサイズが16pxの場合、16px＝100%となります。 -
【3】em
相対値での指定です。親要素のfont-sizeに影響を受けます。
親要素のフォントサイズが16pxの場合、16px＝1emとなります。 -
【4】rem
最近良く見かける相対値での指定です。htmlのfont-sizeが基準となります。
html要素のfont-sizeが16pxの場合、16px＝1remとなります。 -
【5】vw
viewportの幅での指定です。viewportのwidthが基準となります。1vw＝1%となります。
viewportの幅が1000pxの場合、1vw＝10pxとなります。 -
【6】vh
viewportの高さでの指定です。viewportのheightが基準となります。1vw＝1%となります。
viewportの高さが1000pxの場合、1vw＝10pxとなります。
何がおすすめなの？
結論ですが、状況次第です。
rem指定はhtml要素のフォントサイズにしか影響を受けないため、%、emに比べて計算がしやすいです。
上記のうち、vw、vhは、Android4.4以上でないと対応しませんので、利用する際には注意が必要です。
またIEの場合、calcの計算で利用すると指定通りにいかないことがあるようです。
Can I use... Support tables for HTML5, CSS3, etc
まとめ
普段何気なく利用している単位ですが、ブラウザの進化と共に選択肢が増えましたね。
まだ案件で利用するには不安な要素もありますが、今後のブラウザの進化を見据えて、今まで利用したことのない単位も積極的に利用してみても良いと思います。