はじめに
CSSにはたくさん単位がありますよね。
よく理解せず、なんとなくで使っていると、後で大変な目にうこともしばしば..。
今回は、そんなCSSの単位についてまとめてみました。
単位の分類
- 絶対的単位
- 相対的単位
まず、全ての単位は、ざっくりと上記２つのジャンルに分類することができます。
では、それぞれ、確認していきましょう。
絶対的単位 とは
その場の状況に左右されない固有・固定の単位を指します。
| 単位 | 名称 | 詳細 |
|---|---|---|
| px | pixels （ピクセル） | 画面の1ピクセルに相当。 Retinaでは0.5px単位での指定が可能。 |
| cm | centi meters （センチメートル） | 1cm = 96px/2.54 100px = 2.64cm |
| mm | milli meters （ミリメートル） | 1mm = 1cmの1/10 100px = 26.4cm |
| Q | quarter-milli meters （クウォーターミリメートル） | 1Q = 1mmの1/4 100px = 105.6Q Safari未対応 |
| in | inches （インチ） | 1in = 2.54cm = 96px 100px = 1.04in |
| pc | picas （パイカ） | 1pc = 1インチの1/6 100px = 6.24pc |
| pt | points （ポイント） | 1pt = 1インチの1/72 100px = 74.8pt |
( こんなにあるんですね〜。使ったことが無いものもたくさん..。 )
相対的単位とは
あるものを基準とし、それに対しての割合によって数値を決める単位を指します。
相対的単位群は、基準とする対象が状況によって変わることから、いま何を基準値としているのかをしっかり把握して使用することが大切です。
| 単位 | 名称 | 詳細 |
|---|---|---|
| em | element (エレメント) | em = 1文字分のサイズ |
| ex | element x-height （エレメントx軸の高さ） | フォントの高さを基準にしたサイズ ほとんどのフォントでは1ex = 0.5em |
| ch | character unit （キャラクターユニット） | 半角数字の0（ゼロ）の横幅を単位とする width: 40chで半角数字の0が４０文字入る幅が設定される |
| rem | root element (ルートエレメント) | 1rem = ルート要素のフォントサイズ（親要素ではない） |
| vh | viewport height (ビューポートの高さ) | ビューポート(表示の高さ)の高さを基準にした単位 1vh = 表示高さ1/100 表示の高さいっぱいにしたいときは100vh、表示できる高さに対して半分の高さで表示するなら50vh |
| vw | viewport width （ビューポート幅） | ビューポート(表示幅)を基準にした単位 1vw = 表示幅の1/100 表示幅いっぱいに表示したいときは100vw、表示幅の半分は50vw |
| vmin | viewport’s minimum （ビューポートの最小値） | ビューポート（表示できる広さ）の幅と高さのうち、いずれか小さい方を基準にした高さ 例えば幅1,200px、高さ700pxの場合は高さ700pxを基準にする |
| vmax | viewport’s maximum （ビューポートの最大値） | ビューポート（表示できる広さ）の幅と高さのうち、いずれか大きい方を基準にした高さ 例えば幅1,200px、高さ700pxの場合は幅1200pxを基準にする |
| % | percent （パーセント） | 親要素に対する相対的なサイズ 例えば親要素の幅が1000pxであれば、子要素で「width: 50%;」を指定すると500pxになる |
( 絶対的単位に比べて、使ったことがあるもの多いかも..。 )
常用単位
ここからは、私が普段よく使用する単位を掘り下げていきます。
絶対的単位は、px( ピクセル ) くらいしか使ったことが無いですね。。
相対的単位は、その特性からか、比較的多くのものを使っている印象です。
px （ ピクセル ） - 絶対的単位
デバイスの１ドットを表す絶対的単位。
Retinaのような高画素ディスプレイでは、0.5px単位での指定が可能。
⚠注意点⚠
小数点以下のpxの扱いはブラウザによって挙動が異なるため、注意が必要です。
WebkitとOpera → 小数点以下は切り下げ
Firefox、IE9、IE8 → 自動でpixel値を計算し、調整する
IE7、IE6 → 0.5以上を繰り上げ
em ( エレメント ) - 相対的単位
指定した要素自身とその親要素をさかのぼって、font-sizeの値を継承し、それを基準値をとする相対的単位。
さかのぼってもfont-sizeの値がない場合に関しては、html要素デフォルトのfont-size（16px）が適応される。
さかのぼってもfont-sizeの値が指定されていない場合
.parent {
padding: 2em; // 16px × 2 = 32px ( html要素デフォルトの16pxが基準値となる )
}
.child {
padding: .5em; // 16px × 0.5 = 8px
}
font-sizeの値が指定されている場合
body {
font-size: 1.125em; // 16px × 1.125 = 18px
}
.parent {
font-size: 1.5em; // 18px × 1.5 = 27px ( bodyのfont-sizeが基準となる )
padding: 2em; // 27px × 2 = 54px ( .parentのfont-sizeが基準となる )
}
.child {
padding: .5em; // 27px × 0.5 = 13.5px ( .parentのfont-sizeが基準となる )
}
rem - 相対的単位
html要素のfont-size値を基準として相対的な値をとる
( 特に変更をしていなければ、デフォルトの16pxが基準となる )
body {
font-size: 1.125em; // 16px × 1.125 = 18px
}
.parent {
font-size: 1.5em; // 16px × 1.125 × 1.5 = 27px
padding: 2rem; // 16px × 2 = 32px
.child {
padding: .5rem; // 16px × 0.5 = 8px
}
% （ パーセント ） - 相対的単位
基本的には親要素に対しての比率にはなるが、プロパティにより何が基準となるかが変化する相対的単位。そのため、% 単位を使う場合は何を基準としているかをプロパティごとにしっかり確認して使用する。
- widthやmargin、paddingプロパティは親要素の横幅を基準とする。
- heightプロパティなら親要素の高さを基準とする。
- font-sizeプロパティなら親要素の文字サイズを基準とする。
- つまり、emと同じ。
vw （ ビューポート幅 ) - 相対的単位
ブラウザの横幅を基準とした相対的な単位。1vwはブラウザの横幅の1%に相当する。例えば、ブラウザ幅が1200pxのとき1vwは12px、ブラウザ幅が768pxのとき1vwは7.68pxとなる。
⚠注意点⚠
- vw単位はスクロールバーの幅も含む仕様のため、全体的なレイアウトなどにvw単位を使うと意図しない余白が生まれることがある為、注意する。( 全体的なレイアウトには、%単位を使う方が適している )
- font-sizeプロパティにvw単位を用いない
- ブラウザの文字サイズ設定が反映されなくなってしまうため。
- font-sizeプロパティにvw単位を使う場合は、calc()関数を使ってemやrem単位などの相対的な値と組み合わせて使うようにする。
まとめ
以上、CSSの単位についてでした。
絶対的単位、相対的単位、、どちらか一方を使えばいいということではなく、状況を考慮して、柔軟に単位を使い分けていくことが大切に思います。私自身もまだまだ使いこなせているわけではありませんし、今回深堀りしたもの以外にも便利な単位があるかと思います。
マルチデバイス化の進む現在では、レスポンシブ対応の際にも欠かせない知識となりますので、しっかり抑えていきたいですね。
共にファイティンしようぜ！！
参考文献
https://gray-code.com/html_css/about-unit-of-css/
https://parashuto.com/rriver/responsive-web/sub-pixel-rounding-browser-problem