CSS<length> データ型は、長さの値を表します。長さは width, height, margin, padding, border-width, font-size, text-shadow など数多くの CSS プロパティで使用されています。

メモ: <percentage> 値も CSS の長さに使用され、 <length> 値を受け付ける同じプロパティの一部でも使用することができますが、 <length> 値と同じものではありません。

構文

<length> データ型は一つの <number> とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 0 の後の単位は省略可能です。

メモ: 負の <length> を許容するプロパティとそうでないプロパティがあります。

単位

相対的な長さの単位

相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、行の高さであったり、 viewport の寸法であったりします。

フォント関連の長さ

フォント関連の長さは、 <length> 値を特定の文字の寸法や、現在要素またはその親に影響しているフォントを表す用語で定義されます。

メモ: これらの単位、特に emrem は、ユーザーがフォントの大きさを変更しても ページの 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%と同じです。
vmin
vwvh の小さい方です。
vmax
vwvh の大きい方です。

絶対的な長さの単位

絶対的な長さの単位は、出力メディアの物理的な特性が分かっている場合(印刷レイアウトなど)に物理的な長さを表します。これはある単位を物理的な単位に固定してから、これを基準に他の単位を定義します。固定する単位は画面のような低解像度の端末か、あるいはプリンターのような高解像度の端末かによって異なります。

低解像度の端末では、px の単位が物理的な参照ピクセルを表し、その他の単位はこれを基準に定義されます。例えば 1in96px と定義され、これは 72pt と等しくなります。このような端末では結果的に、インチ (in)、センチメートル (cm)、ミリメートル (mm) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。

高解像度の端末では、インチ (in)、センチメートル (cm)、ミリメートル (mm) は対応する物理的な単位と同じになります。従って、 px の単位は、それ(1インチの1/96)を基準に定義されます。

メモ: たくさんのユーザーが、テキストが読みやすくなるようユーザーエージェントの既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 font-size を設定する場合には、 (emrem のような) 相対的な単位が適しています。

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 の単位の暗黙的な定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera 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 unitChrome 完全対応 27Edge 完全対応 12Firefox 完全対応 1
補足
完全対応 1
補足
補足 From Firefox 1 to Firefox 3, ch was the width of the M character.
補足 From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.
IE 完全対応 9Opera 完全対応 20Safari 完全対応 7WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 7.1Samsung Internet Android 完全対応 あり
ex unitChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 あり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 — 59IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
Q unit
実験的
Chrome 完全対応 63Edge 未対応 なしFirefox 完全対応 49IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 63Chrome Android 完全対応 63Edge Mobile 未対応 なしFirefox Android 完全対応 49Opera Android 完全対応 50Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
rem unitChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 4.1WebView Android 完全対応 2Chrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 4Samsung 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 unitChrome 完全対応 20Edge 完全対応 12Firefox 完全対応 19IE 完全対応 9Opera 完全対応 20Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 19Opera Android 完全対応 ありSafari iOS 完全対応 6Samsung 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 unitChrome 完全対応 26Edge ? Firefox 完全対応 19IE 未対応 なしOpera 完全対応 20Safari 完全対応 ありWebView Android 完全対応 1.5Chrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 19Opera Android 未対応 なしSafari iOS 完全対応 4Samsung Internet Android 完全対応 あり
vmin unitChrome 完全対応 20Edge ? Firefox 完全対応 19IE 完全対応 10
完全対応 10
完全対応 9
代替名
代替名 非標準の名前 vm を使用しています。
Opera 完全対応 20Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 19Opera Android 未対応 なしSafari iOS 完全対応 6Samsung Internet Android 完全対応 あり
vw unitChrome 完全対応 20Edge 完全対応 12Firefox 完全対応 19IE 完全対応 9Opera 完全対応 20Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 19Opera Android 完全対応 ありSafari iOS 完全対応 6Samsung Internet Android 完全対応 あり
Viewport-percentage lengths invalid in @pageChrome ? Edge ? Firefox 完全対応 21IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 21Opera Android ? Safari iOS ? Samsung Internet Android ?
1in is always equal to 96pxChrome 完全対応 ありEdge ? Firefox 完全対応 4IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

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

最終更新者: mfuji09,