このブログ第一回目で何を扱うかを悩んだのですが、簡単そうで奥の深いCSSで使用する単位を扱うことにしました。
heightやwidth、margin、padding、font-size、borderなど、CSSセレクタの要素に対して様々なサイズを指定する時には、例外となっている0の場合を除き、何らかの「単位」を必ず指定することになっています。CSSを書くにあたって必ず使うその「単位」についてまとめてみます。
単位の種類
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を用います。
|
1 2 3 4 |
img { max-width: 100%; height: auto; } |
実はこのheight: auto;が曲者でして、この時の画像の高さをwidthから取得することはCSSだけではできず、通常であればJSを併用する方法などが定番でした。ところが、vwを使用することで例えば次のようにCSSを書くことが可能となります。
|
1 2 3 4 |
img { max-width: 100%; height: 100vw; /*正方形の画像の例ですが、縦横比3:2の画像であれば66.7vwとなります*/ } |
つまり、高さの指定に幅の数値を使用することができるのです。これによりどんな機種のスマホであっても、横幅いっぱいに画像を自動リサイズした時の横幅から高さを取得することが可能となるのです。
あくまでこれは一例ではありますが、viewportを使用したスマホサイトの構築など色々な使い方が可能であることはお分かりいただけるかと思います。
パーセンテージ値
適用される要素の親要素の各種サイズに基づく倍率を百分率で表したものです。
例えば、
|
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 | – | – | – |
記載がないものについては、全ブラウザで対応しています。
| 単位 | 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 | – |
記載がないものについては、全ブラウザで対応しています。
まとめ
実を言いますと、自分自身が数値指定時にふと疑問に思ったことが、これをまとめるきっかけになりました。
CSSを書くにあたって必ず使用する単位。
こうしてまとめてみると、たかが単位、されど単位で、新しい発見があったのではないでしょうか。
