<length>

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

注: <percentage> 値も CSS の長さに使用され、 <length> 値を受け付ける同じプロパティの一部でも使用することができますが、 <length> 値と同じものではありません。 <length-percentage> を参照してください。

構文

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

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

単位

相対的な長さの単位

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

フォント関連の長さ

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

注: これらの単位、特に em と rem は、ユーザーがフォントの大きさを変更しても ページの vertical rhythm を維持するような、拡縮可能なレイアウトを作成するためによく使われます。

cap
その要素の font における "cap height" （ふつうの大文字の高さ）を表します。
ch
その要素の font における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。

"0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。
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
vw と vh の小さい方です。
vmax
vw と 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> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられたタイミング関数によって定められます。

例

長さの単位の比較

以下のデモでは、入力欄に <length> の値 (例えば 300px, 50%, 30vw) を入力することができ、 Return を押したときにバーの長さが反映されます。

これにより、様々な長さの単位の効果を比較し対照させることができます。

HTML

<div class="outer">
  <div class="input-container">
    <label>長さを入力してください:</label>
    <input type="text" id="length">
  </div>
  <div class="inner">

  </div>
</div>
<div class="results">
</div>

CSS

html {
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
}

.outer {
  width: 100%;
  height: 50px;
  background-color: #eee;
  position: relative;
}

.inner {
  height: 50px;
  background-color: #999;
  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
              inset -3px -3px 5px rgba(0,0,0,0.5);
}

.result {
  height: 20px;
  background-color: #999;
  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
              inset -3px -3px 5px rgba(0,0,0,0.5);
  background-color: orange;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.result code {
  position: absolute;
  margin-left: 20px;
}

.results {
  margin-top: 10px;
}

.input-container {
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 50px;
}

label {
  margin: 0 10px 0 20px;
}

JavaScript

const inputDiv = document.querySelector('.inner');
const inputElem = document.querySelector('input');
const resultsDiv = document.querySelector('.results');

inputElem.addEventListener('change', () => {
  inputDiv.style.width = inputElem.value;

  const result = document.createElement('div');
  result.className = 'result';
  result.style.width = inputElem.value;
  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
  resultsDiv.appendChild(result);

  inputElem.value = '';
  inputElem.focus();
})

結果

仕様書

仕様書 状態 備考
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 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
<length>Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
Q unitChrome 完全対応 63Edge 完全対応 79Firefox 完全対応 49IE 未対応 なしOpera 完全対応 50Safari 未対応 なしWebView Android 完全対応 63Chrome Android 完全対応 63Firefox Android 完全対応 49Opera Android 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0
cap unitChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なし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 完全対応 ≤37Chrome Android 完全対応 27Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 7Samsung Internet Android 完全対応 1.5
ex unitChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
ic unitChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
lh unitChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
mozmm unit
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 未対応 4 — 59IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 4 — 59Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
rem unitChrome 完全対応 4Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 9Opera 完全対応 11.6Safari 完全対応 5WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 12Safari iOS 完全対応 4Samsung Internet Android 完全対応 1.0
rlh unitChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
vb unitChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
vh unitChrome 完全対応 20Edge 完全対応 12Firefox 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
IE 完全対応 9Opera 完全対応 20Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 1.5
vi unitChrome 未対応 なしEdge 未対応 なしFirefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
vmax unitChrome 完全対応 26Edge 完全対応 16Firefox 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
IE 未対応 なしOpera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 1.5Chrome Android 完全対応 26Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
vmin unitChrome 完全対応 26Edge 完全対応 12
完全対応 12
完全対応 12
代替名
代替名 非標準の名前 vm を使用しています。
Firefox 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
IE 完全対応 10
完全対応 10
完全対応 9
代替名
代替名 非標準の名前 vm を使用しています。
Opera 完全対応 15Safari 完全対応 6.1WebView Android 完全対応 ≤37Chrome Android 完全対応 26Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android 完全対応 14Safari iOS 完全対応 6.1Samsung Internet Android 完全対応 1.5
vw unitChrome 完全対応 20Edge 完全対応 12Firefox 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
IE 完全対応 9Opera 完全対応 20Safari 完全対応 6WebView Android 完全対応 ≤37Chrome Android 完全対応 25Firefox Android 完全対応 19
補足
完全対応 19
補足
補足 Starting with version 21, viewport-percentage lengths are invalid in @page.
Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 1.5

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報