CSS の <length> データ型は、長さの値を表します。長さは width, height, margin, padding, border-width, font-size, text-shadow など数多くの CSS プロパティで使用されています。
メモ: <percentage> 値も CSS の長さに使用され、 <length> 値を受け付ける同じプロパティの一部でも使用することができますが、 <length> 値と同じものではありません。
構文
<length> データ型は一つの <number> とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 0 の後の単位は省略可能です。
メモ: 負の <length> を許容するプロパティとそうでないプロパティがあります。
単位
相対的な長さの単位
相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、行の高さであったり、 viewport の寸法であったりします。
フォント関連の長さ
フォント関連の長さは、 <length> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。
メモ: これらの単位、特に em と rem は、ユーザーがフォントの大きさを変更しても ページの vertical rhythm を維持するような、拡縮可能なレイアウトを作成するためによく使われます。
cap- その要素の
fontにおける "cap height" （ふつうの大文字の高さ）を表します。 ch- その要素の
fontにおける "0" （ゼロ、Unicode 文字 U+0030）の幅、より正確に言えば advance measure です。 em- その要素の
font-sizeの計算値を表します。font-sizeプロパティ自身に使われた場合は、要素に継承されたフォントの大きさを表します。 ex- その要素の
fontにおける x-height です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは1ex ≈ 0.5emです。 ic- 描画に使用されるフォントにおける「水」（U+6C34）の文字の advance measure と同じです。
lh- 使用されている要素の
line-heightプロパティの計算値と同じで、絶対的な長さに変換されます。 rem- ルート要素（ふつうは
<html>）のfont-sizeを表します。ルート要素のfont-sizeで使うと初期値を表します（多くのブラウザーでは既定値は16pxですが、ユーザー設定によって変わる可能性があります）。 rlh- ルート要素（ふつうは
<html>）のline-heightプロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素のfont-sizeまたはline-heightプロパティに使われた場合は、プロパティの初期値になります。
ビューポートのパーセント値による長さ
ビューポートのパーセント値による長さは、ビューポート、つまり文書の見える範囲の寸法に対する相対的な <length> 値を定義します。ビューポートの長さは @page で宣言されたブロックでは無効です。
vh- ビューポートの初期値の包含ブロックにおける高さの1%と同じです。
vw- ビューポートの初期値の包含ブロックにおける幅の1%と同じです。
vi- 初期値の包含ブロックにおける、ルート要素のインライン軸の寸法の1%と同じです。
vb- 初期値の包含ブロックにおける、ルート要素のブロック軸の寸法の1%と同じです。
vminvwとvhの小さい方です。vmaxvwとvhの大きい方です。
絶対的な長さの単位
絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合（印刷レイアウトなど）に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。
低解像度の端末では、px の単位が物理的な参照ピクセルを表し、その他の単位はこれを基準に定義されます。例えば 1in は 96px と定義され、これは 72pt と等しくなります。このような端末では結果的に、インチ (in)、センチメートル (cm)、ミリメートル (mm) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。
高解像度の端末では、インチ (in)、センチメートル (cm)、ミリメートル (mm) は対応する物理的な単位と同じになります。従って、 px の単位は、それ（1インチの1/96）を基準に定義されます。
メモ: たくさんのユーザーが、テキストが読みやすくなるようユーザーエージェントの既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 font-size を設定する場合には、 (em や rem のような) 相対的な単位が適しています。
px- 1ピクセルです。画面表示では、伝統的に端末の1ピクセル (ドット) を表します。しかし、プリンターや高解像度の画面では、 CSS の1ピクセルが端末の複数ピクセルになることがります。
1px=1inの1/96です。 cm- 1センチメートルです。
1cm=96px/2.54です。 mm- 1ミリメートルです。
1mm=1cmの1/10です。 Q- 1/4ミリメートルです。
1Q=1cmの1/40です。 in- 1インチです。
1in=2.54cm=96pxです。 pc- 1パイカです。
1pc=12pt=1inの1/6です。 pt- 1ポイントです。
1pt=1inの1/72です。 mozmm, Firefox 59 で削除- 実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル端末では有用かもしれません。
補間
アニメーションを行うとき、 <length> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられたタイミング関数によって定められます。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Values and Units Module Level 4 <length> の定義 |
編集者草案 | vi, vb, ic, lh, rlh の単位を追加。 |
| CSS Values and Units Module Level 3 <length> の定義 |
勧告候補 | ch, rem, vw, vh, vmin, vmax, Q の単位を追加。 |
| CSS Level 2 (Revision 1) <length> の定義 |
勧告 | em, pt, pc, px の単位の明示的な定義。 |
| CSS Level 1 <length> の定義 |
勧告 | 初回定義。 em, pt, pc, px の単位の暗黙的な定義。 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<length> | Chrome 完全対応 1 | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 3 | Opera 完全対応 3.5 | Safari 完全対応 1 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
cap unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
ch unit | Chrome 完全対応 27 | Edge 完全対応 12 | Firefox
完全対応
1
| IE 完全対応 9 | Opera 完全対応 20 | Safari 完全対応 7 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 7.1 | Samsung Internet Android 完全対応 あり |
ex unit | Chrome 完全対応 あり | Edge 完全対応 12 | Firefox 完全対応 1 | IE 完全対応 4 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 あり |
ic unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
lh unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
mozmm unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 4 — 59 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 4 — 59 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
Q unit | Chrome 完全対応 63 | Edge 未対応 なし | Firefox 完全対応 49 | IE 未対応 なし | Opera 完全対応 50 | Safari 未対応 なし | WebView Android 完全対応 63 | Chrome Android 完全対応 63 | Edge Mobile 未対応 なし | Firefox Android 完全対応 49 | Opera Android 完全対応 46 | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
rem unit | Chrome 完全対応 4 | Edge 完全対応 12 | Firefox 完全対応 3.6 | IE 完全対応 9 | Opera 完全対応 11.6 | Safari 完全対応 4.1 | WebView Android 完全対応 2 | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android 完全対応 4 | Opera Android 完全対応 12 | Safari iOS 完全対応 4 | Samsung Internet Android 完全対応 あり |
rlh unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
vb unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
vh unit | Chrome 完全対応 20 | Edge 完全対応 12 | Firefox
完全対応
19
| IE 完全対応 9 | Opera 完全対応 20 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android
完全対応
19
| Opera Android 完全対応 あり | Safari iOS 完全対応 6 | Samsung Internet Android 完全対応 あり |
vi unit | Chrome 未対応 なし | Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Edge Mobile 未対応 なし | Firefox Android 未対応 なし | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
vmax unit | Chrome 完全対応 26 | Edge 完全対応 16 | Firefox
完全対応
19
| IE 未対応 なし | Opera 完全対応 20 | Safari 完全対応 あり | WebView Android 完全対応 1.5 | Chrome Android 完全対応 あり | Edge Mobile 未対応 なし | Firefox Android
完全対応
19
| Opera Android 未対応 なし | Safari iOS 完全対応 4 | Samsung Internet Android 完全対応 あり |
vmin unit | Chrome 完全対応 20 | Edge
完全対応
12
| Firefox
完全対応
19
| IE
完全対応
10
| Opera 完全対応 20 | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile
完全対応
12
| Firefox Android
完全対応
19
| Opera Android 未対応 なし | Safari iOS 完全対応 6 | Samsung Internet Android 完全対応 あり |
vw unit | Chrome 完全対応 20 | Edge 完全対応 12 | Firefox
完全対応
19
| IE 完全対応 9 | Opera 完全対応 20 | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 12 | Firefox Android
完全対応
19
| Opera Android 完全対応 あり | Safari iOS 完全対応 6 | Samsung Internet Android 完全対応 あり |
1in is always equal to 96px | Chrome 完全対応 あり | Edge ? | Firefox 完全対応 4 | IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile ? | Firefox Android 完全対応 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- 非標準の名前を使用しています。
- 非標準の名前を使用しています。
ドキュメントのタグと貢献者
タグ:
このページの貢献者:
mdnwebdocs-bot,
mfuji09,
mushahiroyuki,
yyss,
Simplexible,
fscholz,
teoli,
ethertank,
sosleepy,
Marsf,
Taken,
haccy
最終更新者:
mdnwebdocs-bot,