MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS<length> データ型は、距離の長さを表します。<length> の構文規則は、<number> の直後にその単位 (pxempcinmm など) を記述するというものです。ほかの CSS の寸法と同様に、数値と単位の間の空白文字は許容されません。<number> 0 の後ろの単位は省略可能です。

例えば widthmarginpaddingfont-sizeborder-widthtext-shadow など、多くの CSS プロパティが <length> を受け入れます。

負の length は、プロパティによって許可されるものと、構文エラーになるものがあります。一部の CSS プロパティは、<length> 値と <percentage> 値の両方を受け入れることに注意してください。<percentage> 値も CSS の寸法を表すデータ型ではありますが、<length> 値ではありません。

補間

CSS の <length> データ型の値は、アニメーション用に補間可能です。値は浮動小数点数値の実数として補間されます。補間は値を計算したときに発生します。補間の速度は、アニメーションに結びつけられた timing function によって決められます。

単位

相対単位

フォントに関連した length

em
当該要素の font-size の計算値を表します。font-size プロパティ自身に使われると、要素の継承されたフォントサイズの値を表します。
この単位は、ユーザーがフォントサイズを変えたときにも ページの vertical rhythm を維持するような、拡縮可能なレイアウトでよく使われます。CSS プロパティ line-heightfont-sizemargin-bottommargin-top はよく、em で表現されます。
ex
当該要素で用いられる fontx-height です。文字 'x' を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントで 1ex ≈ 0.5em です。
ch
要素の font のグリフ '0' (ゼロ、Unicode の文字 U+0030) の幅、より正確に言えば advance measure です。
rem
ルート要素の font-size (例えば、<html> 要素の font-size) です。ルート要素の font-size で使うと初期値を表します。
この単位は完全に拡縮可能なレイアウトを作るのに役立ちます。対象ブラウザーのサポートがない場合には em 単位を使って同様のレイアウトを実現可能ですが、やや複雑になります。

ビューポート-パーセンテージ length

ビューポートパーセンテージ length はビューポート、すなわちドキュメントの可視領域に相対的な length を定義します。Gecko ベースのブラウザのみ、ビューポートのサイズが変更されたとき (デスクトップコンピューターでウィンドウのサイズを変更したり、携帯電話やタブレットで端末の向きを変えたりする) に、ビューポートの値を動的に更新します。

overflow:auto と合わせると、最終的にスクロールバーが占める領域はビューポートから差し引かれませんが、overflow:scroll と合わせた場合は差し引かれます。

@page @-規則の宣言ブロック内では ビューポート length が無効であり、宣言は破棄されます。

vh
ビューポートの高さの 1/100
vw
ビューポートの幅の 1/100
vmin
ビューポートの高さまたは幅の、最小値の 1/100
vmax
ビューポートの高さまたは幅の、最大値の 1/100

絶対単位

絶対単位は出力メディアの物理的な特性がわかっている場合 (例えば、プリンター) に便利です。これはいずれかの単位を物理的な単位に対して固定してから、それを基準にしてほかの単位を定義します。固定する単位はスクリーンのような低解像度のデバイスか、あるいはプリンターのような高解像度のデバイスかによって異なります。

低 dpi のデバイスでは、単位 px は physical reference pixel を表し、その他の単位はこれを基準に決められます。例えば 1in96px と定義され、これは 72pt と等しくなります。こうした定義の結果、低 dpi のデバイスでは inches (in)、centimeters (cm)、millimeters (mm) といった単位で表現される length が、同名の物理的な単位と同じ長さになるとは限りません。

高 dpi のデバイスでは、インチ (in)、センチメートル (cm)、ミリメートル (mm) は実際の長さの「コピー」として定義されます。単位 px は、この定義に相対的に決められます (1 インチの 1/96 です)。

ユーザーはアクセスしやすいように、フォントサイズを大きくするかもしれません。フォントサイズに関わらず使えるレイアウトにするには、出力媒体 (例えばビットマップ画像) の物理的特性がわかる場合には、絶対的な単位だけを使ってください。フォントサイズに相対的に length を設定するときは、emrem のような相対的な単位を選んでください。
px
表示しているデバイスによります。
スクリーンディスプレイでは、通常はディスプレイの 1 デバイスピクセル (ドット) です。
プリンターや非常に高解像度のスクリーンでは、CSS の 1 ピクセルは複数のデバイスピクセルを含むため、ピクセル / インチは約 96 です。
mm
1 ミリメートル
q
1 ミリメートルの 4 分の 1 (1 センチメートル の 1/40)
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 インチよりも短くなるでしょう。同様に mmcmpt は絶対的な length ではありません。

具体例です:

  • 1in は常に 96px
  • 3pt は常に 4px
  • 25.4mm は常に 96px

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 3
<length> の定義
勧告候補 追加:ch, rem, vw, vh, vmin, vmax, q
CSS Level 2 (Revision 1)
<length> の定義
勧告 pt, pc, px を明示的に定義 (CSS1 で暗黙的に定義されていたものです)
CSS Level 1
<length> の定義
勧告 初期定義

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
ch 27 1.0 (1.7 or earlier)[1] 9.0 20.0 7.0
ex (有) (有) (有) (有) (有)
rem 4 (532.3) 3.6 (1.9.2) 9.0 11.6 4.1
vh, vw 20 19 (19) 9.0 20.0 6.0
vmin 20 19 (19) 9.0[2] 20.0 6.0
vmax 26 19 (19) 未サポート 20.0 (有)
@page で、ビューポートに対するパーセンテージの length が無効 ? 21 (21) ? ? ?
mozmm 未サポート 4.0 (2.0) 未サポート 未サポート 未サポート
1in が常に 96dpi (有) 4.0 (2.0) (有) (有) (有)
q 未サポート 49.0 (49.0) 未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有)
ch 未サポート (有) 7.8 ? 7.1.1
ex ? (有) ? ? ?
rem 2.1 (有) ? 12.0 4.0
vh, vw, vmin (有) 19.0 (19) ? 未サポート 6.0
vmax 1.5 19.0 (19) ? 未サポート 4.0
@page で、ビューポートに対するパーセンテージの length が無効 ? 21.0 (21.0) ? ? ?
q ? 49.0 (49.0) ? ? 未サポート

[1] Gecko 1.0-1.9.0 (Firefox 1.0-3.0) では、ch は 'M' の幅で、CSS の border-widthoutline-width プロパティでは機能しませんでした。

[2] Internet Explorer は、非標準の名称 vm で実装しています。

ドキュメントのタグと貢献者

 このページの貢献者: mushahiroyuki, yyss, Simplexible, fscholz, teoli, ethertank, sosleepy, Marsf, Taken, haccy
 最終更新者: mushahiroyuki,