概要
CSS プロパティ の中には <length> を値として持つものが多くあります。例えば、 width, margin, padding, font-size, border-width, text-shadow 等です。
<length> に対する CSS の構文規則は、数値の直後にその単位を記述するというものです。数値と単位の間の空白文字は許容されません。
負の length は、プロパティによって許可されるものと、構文エラーになるものがあります。一部の CSS プロパティは、 <length> 値と <percentage> 値の両方を受け入れることに注意してください。<percentage> 値も CSS の寸法を表すデータ型ではありますが、<length> 値ではありません。
補間
CSS の <length> データ型の値は、アニメーション用に補間可能です。値は実数（浮動小数点数、<number>）として補間されます。補間は値を計算したときに発生します。補間の速度は、アニメーションに結びつけられた timing function によって決められます。
単位
相対単位
フォントに関連した length
em- 当該要素の
font-sizeの計算値を表します。font-sizeプロパティ自身に使われると、要素の継承されたフォントサイズの値を表します。この単位は、ユーザーがフォントサイズを変えたときにも vertical rhythm of the page を維持するような、拡縮可能なレイアウトでよく使われます。CSS プロパティline-height、font-size、margin-bottom、margin-topはよく、em で表現されます。 ex- 当該要素で用いられる
fontの x-height です。一般的に、フォントにおける小文字の高さに相当します。多くのフォントで1ex ≈ 0.5emです。 ch- 現在のフォントの "0" (ゼロ) の幅です。
rem- ルート要素の
font-size(例えば、html要素のfont-size) です。ルート要素で使うと初期値を表します。この単位は完全に拡縮可能なレイアウトを作るのに役立ちます。対象ブラウザのサポートがない場合には em 単位を使って同様のレイアウトを実現可能ですが、やや複雑になります。
ビューポート-パーセンテージ length
vh- ビューポートの高さの 1/100
vw- ビューポートの幅の 1/100
vmin- ビューポートの高さまたは幅の、最小値の 1/100
vmax- ビューポートの高さまたは幅の、最大値の 1/100
絶対単位
絶対単位は出力メディアの物理的な特性がわかっている場合 (例えば、プリンター) に便利です。スクリーンディスプレイにおいては、 1 インチ当りのピクセル数は、システムがディスプレイの解像度から概算 (たいてい不正確ですが) して決定します。
低 dpi のデバイスでは、単位 px は physical reference pixel を表し、その他の単位はこれを基準に決められます。例えば 1in は 96px と定義され、これは 72pt と等しくなります。こうした定義の結果、低 dpi のデバイスでは inches (in)、centimeters (cm)、millimeters (mm) といった単位で表現される length が、同名の物理的な単位と同じ長さになる必要はありません。
高 dpi のデバイスでは、インチ (in)、センチメートル (cm)、ミリメートル (mm) は実際の長さの「コピー」として定義されます。単位 px は、この定義に相対的に決められます（1 インチの 1/96です）。
em や rem のような相対的な単位を選んでください。px- 表示しているデバイスによります。
スクリーンディスプレイでは、通常はディスプレイの 1 デバイスピクセル（ドット）です。
プリンタや非常に高解像度のスクリーンでは、CSS の 1 ピクセルは複数のデバイスピクセルを含むため、ピクセル / インチは約 96 です。 mm- 1 ミリメートル
cm- 1 センチメートル (10 ミリメートル)
in- 1 インチ (2.54 センチメートル)
pt- 1 ポイント (1 インチの 1/72)
pc- 1 パイカ (12 ポイント)
mozmm- 実験的実装の単位で、ディスプレイ解像度によらず、正確に 1 ミリメートルを描画しようとします。この単位が実際に使えるケースは稀ですが、特にモバイルデバイスで便利かもしれません。
CSS の単位と dots-per-inch
単位 in はスクリーン上の物理的なインチではなく、96px を表します。実際のスクリーンのピクセル密度が何であろうと、96dpi であると仮定されるということです。より細かなピクセル密度を持つデバイスでは、1in は物理的な 1 インチよりも短くなるでしょう。同様に mm、cm、pt は絶対的な length ではありません。
具体例です:
1inは常に96px3ptは常に4px25.4mmは常に96px
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Values and Units Module Level 3 <length> の定義 |
勧告候補 | 追加：ch, rem, vw, vh, vmin, vmax |
| CSS Level 2 (Revision 1) <length> の定義 |
勧告 | pt, pc, px を明示的に定義（CSS1 で暗黙的に定義されていたものです) |
| CSS Level 1 <length> の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Chrome (WebKit) | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 | 1.0 (1.7 or earlier) | 3.0 | 3.5 | 1.0 |
ch |
未サポート | 1.0 (1.7 or earlier) [1] | 9.0 | 未サポート | 未サポート |
rem |
4 (532.3) | 3.6 (1.9.2) | 9.0 | 11.6 | 4.1 |
vh, vw |
20.0 | 19 (19) | 9.0 | 未サポート | 6.0 |
vmin |
20.0 (with the non-standard name |
19 (19) | 9.0 (with the non-standard name vm) |
未サポート | 6.0 |
vmax |
26 | 19 (19) | 未サポート | 未サポート | 未サポート (bug 91440) |
mozmm |
未サポート | 4.0 (2.0) | 未サポート | 未サポート | 6.0 |
1in が常に 96dpi |
(有) | 4.0 (2.0) | (有) | (有) | (有) |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有) | (有) | (有) | (有) | (有) |
ch |
未サポート | (有) | ? | ? | ? |
rem |
2.1 | (有) | ? | 12.0 | 4 |
vh, vw, vmin |
(有) | 19.0 (19) | ? | 未サポート | 6.0 |
vmax |
未サポート (bug 91440) | 19.0 (19) | ? | 未サポート | 未サポート (bug 91440) |
[1] Gecko 1.0-1.9.0 (Firefox 1.0-3.0) では、ch は 'M' の幅で、CSS の border-width や outline-width プロパティでは機能しませんでした。