<length>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

構文

<length> データ型は一つの <number> とそれに続く以下に挙げる単位の一つから成ります。すべての CSS サイズと同様に、数値と単位リテラルの間に空白は置きません。数値が 0 の場合、長さの単位を指定することはオプションです。

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

長さの指定値 (specified length) は、その量と単位で表します。長さの計算値 (computed length) は、指定した長さを絶対長に分解したもので、単位は判別されません。

<length> の単位には相対的なものと絶対的なものがあります。相対的な長さは、他の距離から見た長さを表します。単位によって、この距離は特定の文字の大きさであったり、行の高さであったり、ビューポートの大きさであったりします。相対的な長さの単位を使用するスタイルシートは、ある出力環境から別の出力環境へ、より簡単に変倍することができます。

メモ: 子要素は親要素に指定した相対値を継承するのではなく、計算値を継承します。

相対的な長さの単位

CSS の相対的な長さの単位は、フォント、コンテナー、ビューポートサイズに基づきます。

フォントに基づく相対的な長さの単位

フォントの長さは、 <length> の値を、要素やその親で現在使われているフォントにおける、特定の文字やフォント属性サイズで定義します。

メモ: これらの単位、特に em と rem は、ユーザーがフォントサイズを変更してもページの縦方向のリズムを維持する、変倍可能なレイアウトを作るためによく使われます。

cap: その要素の font における "cap height" （ふつうの大文字の高さ）を表します。
ch: その要素の font における 0 (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば送り幅です。 0 の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。
em: その要素の font-size の計算値を表します。font-size プロパティ自身に使われた場合は、要素に継承されたフォントの大きさを表します。
ex: その要素の font における x-height です。 x の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは 1ex ≈ 0.5em です。
ic: 描画に使用されるフォントにおける「水」 (CJK water ideograph, U+6C34) の文字の送り幅と同じです。
lh: 使用されている要素の line-height プロパティの計算値と同じで、絶対的な長さに変換されます。この単位により、理論上の理想的な空行のサイズをもとに長さ計算ができます。ただし、実際の行ボックスの大きさはコンテンツによって異なる場合があります。

ルート要素のフォントに基づく相対的な長さの単位

ルート要素のフォントの相対的な長さの単位は、 <length> 値をルート要素の特定の文字またはフォント属性のサイズで定義します。

rcap: ルート要素の font における "cap height" （ふつうの大文字の高さ）と等しいものです。
rch: ルート要素の font における 0 (ゼロ、Unicode 文字 U+0030) の幅、または送り幅と等しいものです。
rem: ルート要素 (ふつうは <html>) の font-size を表します。ルート要素の font-size で使うと初期値を表します。多くのブラウザーでは既定値は 16px ですが、ユーザー設定によって変わる可能性があります。
rex: ルート要素の font における x の高さを表します。
ric: ルート要素のフォントにおける ic 単位の値と等しいものです。
rlh: ルート要素のフォントにおける lh 単位の値と等しいものです。この単位により、理論上の理想的な空行のサイズをもとに長さ計算ができます。ただし、実際の行ボックスの大きさはコンテンツによって異なる場合があります。

ビューポートに基づく相対的な長さの単位

ビューポートパーセント値の長さの単位は、 4 つの異なるビューポートサイズ（小、大、動的、既定）に基づきます。さまざまなビューポートサイズの許容範囲は、ブラウザーインターフェイスが動的に拡大・縮小したり、下にあるコンテンツを隠したり表示させたりすることに応答します。

小ビューポートサイズ

ブラウザーインターフェイスが動的に展開されたときのために、可能な限り小さなビューポートが必要な場合は、小ビューポートサイズを使用します。小ビューポートサイズでは、ブラウザーインターフェイスが拡大されたときに、設計したコンテンツがビューポート全体を満たすことができます。このサイズを選ぶと、ブラウザーインターフェイスが折りたたまれたときに空白の空間ができる可能性があります。

例えば、ある要素が小ビューポートサイズに基づくビューポートパーセント値の単位を使用してサイズ設定されている場合、動的なブラウザーインターフェイスがすべて表示されている場合、その要素はそのコンテンツが隠れることなく画面を完全に満たします。しかしながら、それらのブラウザーインターフェイスが非表示になった場合、要素の周りに余分な空間ができるかもしれません。したがって、小ビューポートパーセント値は一般的に使用するのに「より安全」ですが、ユーザーがページを操作し始めた後には、最も魅力的なレイアウトにならなくなるかもしれません。

小ビューポートサイズは接頭辞 sv で表され、 sv* のビューポートパーセント値の長さの単位になります。小ビューポートパーセント単位のサイズは固定されているため、ビューポート自体のサイズが変更されない限り、安定しています。

大ビューポートサイズ

ブラウザーインターフェイスが動的に縮小することに対応して、可能な限り大きなビューポートが必要な場合は、大きなビューポートサイズを使用します。大ビューポートサイズを使用すると、ブラウザーインターフェイスが折りたたまれているときに、デザインしたコンテンツがビューポート全体を満たすことができるようになります。ブラウザーインターフェイスが展開されたときに、コンテンツが隠れてしまう可能性があることに注意する必要があります。

例えば、画面に占める面積がきわめて大きいモバイルブラウザーでは、ユーザーがページをスクロールし始めた後、タイトルバーやアドレスバーの一部またはすべてを非表示にすることがよくあります。要素が大ビューポートサイズに基づくビューポートパーセント値の単位を使用してサイズ設定されている場合、これらのインターフェイスが非表示になっていると、要素のコンテンツは見えるページ全体を満たします。しかし、これらの折りたたみ可能なブラウザーインターフェースが表示されると、大ビューポートパーセント単位を使用してサイズ設定または位置指定されたコンテンツを隠す可能性があります。

大ビューポート単位は接頭辞 lv で表し、ビューポートパーセント値の単位 lv* になります。大ビューポートパーセント値の単位のサイズは固定されているため、ビューポート自体のサイズが変更されない限り、安定しています。

動的ビューポートサイズ

ブラウザーインターフェイスが動的に展開されたり縮小されたりすることに応答して、ビューポートのサイズを自動的に調整したい場合は、動的ビューポートサイズを使用することができます。動的ビューポートサイズを使用すると、動的なブラウザーインターフェイスが存在するか否かに関係なく、デザインしたコンテンツがビューポート内に正確に収まります。

動的ビューポート単位は接頭辞 dv で表し、結果として dv* ビューポートパーセント値の単位になります。動的ビューポートパーセント値の単位のサイズは、ビューポート自体が変更されなくても安定しません。

メモ: 動的ビューポートサイズはより細かく制御でき、柔軟性がありますが、動的ビューポートサイズに基づいてビューポートパーセント値の単位を使用すると、ユーザーがページをスクロールしている間にコンテンツのサイズを変更させる可能性があります。これはユーザーインターフェイスの劣化につながり、パフォーマンスヒットを発生させる可能性があります。

既定ビューポートサイズ

既定ビューポートサイズはブラウザーによって定義されます。ビューポートパーセント値の単位の動作結果は、小ビューポートサイズ、大ビューポートサイズ、 2 つの間の中間サイズ、動的ビューポートサイズのいずれかに基づくビューポートパーセント値の単位と同等になる可能性があります。

メモ: 例えば、あるブラウザーは既定で高さのビューポートパーセント値の単位 (vh) を実装しているかもしれませんが、これは大ビューポートパーセント値の高さ単位 (lvh) と同じです。といった具合に、ブラウザーインターフェイスが展開されている間、全ページ表示のコンテンツが見えなくなる可能性があります。

ビューポートパーセント値の長さは、 <length> を初期包含ブロックのサイズに対するパーセント値で定義し、この値はビューポートまたはページ領域、つまり文書内の可視部分のサイズに基づいています。初期包含ブロックの高さや幅が変更されると、それに基づいてサイズ調整される要素はそれに応じて変倍されます。下記のように、ビューポートサイズのそれぞれに対応するビューポートパーセント値の長さの単位が変化します。

メモ: ビューポートの長さは @page 宣言ブロックでは無効になります。

vh

ビューポートの初期包含ブロックの高さのパーセント値を表します。 1vh はビューポートの高さの 1% です。例えば、ビューポートの高さが 300px の場合、プロパティで 70vh の値を指定すると 210px になります。

小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は svh、lvh、dvh です。 vh はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。

vw

ビューポートの初期包含ブロックの幅のパーセント値を表します。 1vw はビューポートの幅の 1% です。例えば、ビューポートの幅が 800px の場合、プロパティで 50vw の値を指定すると 400px になります。

小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は svw、lvw、dvw です。 vw はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。

vmax

vw と vh の大きい方を表します。

小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は svmax, lvmax, dvmax です。 vmax はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。

vmin

vw と vh の小さい方を表します。

小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は svmin, lvmin, dvmin です。 vmin はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。

vb

初期包含ブロックにおける、ルート要素のブロック軸方向のパーセント値を表します。

小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は svb, lvb, dvb です。 vb はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。

vi

初期包含ブロックにおける、ルート要素のインライン軸方向のパーセント値を表します。

小、大、動的ビューポートサイズのそれぞれのビューポートパーセント値の単位は svi, lvi, dvi です。 vi はブラウザー既定ビューポートサイズに基づくビューポートパーセント値の長さの単位を表します。

コンテナークエリーの長さの単位

コンテナークエリーを用いてコンテナーにスタイルを設定する場合、コンテナークエリーの長さの単位を使用することができます。この単位は、クエリーコンテナーの寸法関連の長さを指定します。コンテナーに対して相対的な長さの単位を使用する部品は、具体的な長さの値を再計算することなく、様々なコンテナーで柔軟に使用することができます。詳しい情報は、コンテナークエリーを参照してください。

cqw: クエリーコンテナーの幅のパーセント値を表します。 1cqw はコンテナーの幅の 1% です。例えば、クエリーコンテナーの幅が 800px の場合、プロパティに 50cqw の値を指定すると 400px となります。
cqh: クエリーコンテナーの高さのパーセント値を表します。 1cqh はコンテナーの高さの 1% です。例えば、クエリーコンテナーの高さが 300px の場合、プロパティに 10cqh の値を指定すると 30px となります。
cqi: クエリーコンテナーのインラインサイズのパーセント値を表します。 1cqi はクエリーコンテナーのインラインサイズの 1% です。例えば、クエリーコンテナーのインラインサイズが 800px の場合、プロパティに 50cqi の値を指定すると 400px となります。
cqb: コンテナーのブロックサイズのパーセント値を表します。 1cqb はクエリーコンテナーのブロックサイズの1%です。例えば、クエリーコンテナーのブロックサイズが 300px の場合、プロパティに 10cqb の値を指定すると 30px となります。
cqmin: クエリーコンテナーのインラインサイズまたはブロックサイズの小さい方の値のパーセント値を表します。 1cqmin は、クエリーコンテナーのインラインサイズまたはブロックサイズのいずれか小さい方の値の1%です。例えば、クエリーコンテナーのインラインサイズが 800px で、ブロックサイズが 300px の場合、プロパティで 50cqmin の値は 150px になります。
cqmax: クエリーコンテナーのインラインサイズまたはブロックサイズのいずれか大きい方の値のパーセント値を表します。 1cqmax は、クエリーコンテナーのインラインサイズまたはブロックサイズのいずれか大きい値の 1% です。例えば、クエリーコンテナーのインラインサイズが 800px で、ブロックサイズが 300px の場合、プロパティで 50cqmax の値を指定すると 400px になります。

絶対的な長さの単位

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

低解像度の端末では、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 / 96 です。
cm: 1 センチメートルです。 1cm = 96px / 2.54 です。
mm: 1 ミリメートルです。 1mm = 1cm / 10 です。
Q: 1/4 ミリメートルです。 1Q = 1cm / 40 です。
in: 1 インチです。 1in = 2.54cm = 96px です。
pc: 1 パイカです。 1pc = 12pt = 1in / 6 です。
pt: 1 ポイントです。 1pt = 1in / 72 です。

HTML

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

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 rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
}

.result {
  height: 20px;
  box-shadow:
    inset 3px 3px 5px rgb(255 255 255 / 50%),
    inset -3px -3px 5px rgb(0 0 0 / 50%);
  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();
});

結果

仕様書

Specification
CSS Values and Units Module Level 4 # lengths

ブラウザーの互換性

BCD tables only load in the browser