CSSで使用できる単位まとめ


所要時間: 6

CSSで使用できる単位まとめ

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

CSSセレクタと単位

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

単位の種類

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

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

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

絶対単位

# 単位 説明
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とは、ブラウザ内の表示可能範囲のことです。
ビューポート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を用います。

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

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

パーセンテージ値

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

となっていた場合、この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

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

参考 Mozilla Developer Network

まとめ

実を言いますと、自分自身が数値指定時にふと疑問に思ったことが、これをまとめるきっかけになりました。

CSSを書くにあたって必ず使用する単位。
こうしてまとめてみると、たかが単位、されど単位で、新しい発見があったのではないでしょうか。

コメントを書いてみませんか?