CSSで使用できる単位まとめ / hirok-k.com

このブログ第一回目で何を扱うかを悩んだのですが、簡単そうで奥の深いCSSで使用する単位を扱うことにしました。

heightやwidth、margin、padding、font-size、borderなど、CSSセレクタの要素に対して様々なサイズを指定する時には、例外となっている0の場合を除き、何らかの「単位」を必ず指定することになっています。CSSを書くにあたって必ず使うその「単位」についてまとめてみます。

目　次

1 単位の種類
2 絶対単位
3 相対単位
4 ブラウザ別対応状況
5 まとめ

単位の種類

CSSで使用される単位は大別して種類あります。
　・絶対単位
　・相対単位
の2種類です。

絶対単位は、定規で計測できる単位です。
（実際はユーザー環境に依存してしまうため不正確ではありますが・・・）
相対単位は、ユーザー環境によって可変的に指定する単位です。

この２つ以外にパーセンテージ値もよく用いられますが、これは相対単位と似ていて、個別に絶対単位または相対単位を指定せずとも使用できる特殊な値のため、相対単位の１つとみなすことにします。

絶対単位

#	単位	説明
1	px	1ピクセル（ドット）
2	mm	1ミリメートル
3	cm	1センチメートル＝10mm
4	in	1インチ＝約2.54cm＝96px
5	pt	1ポイント＝1/72in＝約1.33px
6	pc	1パイカ＝12pt＝16px

相対単位

フォント関連

#	単位	説明
1	em	適用される要素のfont-sizeを1とした倍率適用要素のfont-sizeが14pxなら、それが1となります
2	ex	適用される要素のfontで描画される文字xの高さ通常1ex＝約0.5emとなります
3	ch	適用される要素のfontで描画される数字0の幅

ビューポート関連

ビューポートviewportとは、ブラウザ内の表示可能範囲のことです。

#	単位	説明
1	vh	viewportの高さheightの1/100
2	vw	viewportの幅widthの1/100
3	vmin	viewportの高さheightもしくは幅widthの最小値の 1/100
4	vmax	viewportの高さheightもしくは幅widthの最大値の 1/100

vhやvwの使い方

このvhやvw、初めて見たという方も結構いらっしゃるのではないでしょうか。

このvhやvwという単位は、レスポンシブサイトを構築する際にmetaタグで指定するviewportの高さや幅を単位化したもので、こんな使い方が可能です。

スマートフォン向けサイトを構築する際、トップ画像などをどのスマホでも横幅いっぱいに表示する必要があったりしますよね。
そのためには、通常このCSSを用います。

img { 
max-width: 100%; 
height: auto;
}

img {

max-width: 100%;

height: auto;

}

実はこのheight: auto;が曲者でして、この時の画像の高さをwidthから取得することはCSSだけではできず、通常であればJSを併用する方法などが定番でした。ところが、vwを使用することで例えば次のようにCSSを書くことが可能となります。

img { 
max-width: 100%; 
height: 100vw; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/
}

img {

max-width: 100%;

height: 100vw; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/

}

つまり、高さの指定に幅の数値を使用することができるのです。これによりどんな機種のスマホであっても、横幅いっぱいに画像を自動リサイズした時の横幅から高さを取得することが可能となるのです。
あくまでこれは一例ではありますが、viewportを使用したスマホサイトの構築など色々な使い方が可能であることはお分かりいただけるかと思います。

パーセンテージ値

適用される要素の親要素の各種サイズに基づく倍率を百分率で表したものです。
例えば、

div { width: 80%; }

1	div { width: 80%; }

となっていた場合、このdivプロパティの幅はその親要素の幅の80%となります。

単位	Chrome (WebKit版)	Firefox	IE	Safari	Opera
ch	–	1.0	9.0	–	–
vh	20.0	3.6	9.0	4.1	11.6
vw	20.0	3.6	9.0	4.1	11.6
vmin	20.0	19.0	9.0	6.0	–
vmax	26	19.0	–	–	–

記載がないものについては、全ブラウザで対応しています。

参考 Mozilla Developer Network

単位	iOS Safari	Opera mobile	IE Phone	Firefox mobile	Android
ch	不明	不明	不明	有	–
vh	6.0 (iOS6以降)	–	不明	19.0	有
vw	6.0 (iOS6以降)	–	不明	19.0	有
vmin	6.0 (iOS6以降)	–	不明	19.0	有
vmax	–	–	不明	19.0	–