path: root/files/ja/web/css/length/index.html

---
title: <length>
slug: Web/CSS/Length
tags:
  - CSS
  - CSS データ型
  - CSS 値と単位
  - Layout
  - Reference
  - Web
  - length
  - ウェブ
  - レイアウト
translation_of: Web/CSS/length
---
<div>{{CSSRef}}</div>

<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code>&lt;length&gt;</code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、長さの値を表します。長さは {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} など数多くの CSS プロパティで使用されています。</p>

<div class="note">
<p><strong>注:</strong> {{cssxref("&lt;percentage&gt;")}} 値も CSS の長さに使用され、 <code>&lt;length&gt;</code> 値を受け付ける同じプロパティの一部でも使用することができますが、 <code>&lt;length&gt;</code> 値と同じものではありません。 {{cssxref("&lt;length-percentage&gt;")}} を参照してください。</p>
</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<p><code>&lt;length&gt;</code> データ型は一つの {{cssxref("&lt;number&gt;")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。数値 <code>0</code> の後の単位は省略可能です。</p>

<div class="note">
<p><strong>注:</strong> 負の <code>&lt;length&gt;</code> を許容するプロパティとそうでないプロパティがあります。</p>
</div>

<h3 id="Units" name="Units">単位</h3>

<h4 id="Relative_length_units" name="Relative_length_units">相対的な長さの単位</h4>

<p>相対的な長さとは、他の長さに従って長さを指定することです。単位によって、これは特定の文字の寸法であったり、<a href="/ja/docs/Web/CSS/line-height">行の高さ</a>であったり、 {{glossary("viewport")}} の寸法であったりします。</p>

<h5 id="Font-relative_lengths" name="Font-relative_lengths">フォント関連の長さ</h5>

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

<div class="note">
<p><strong>注:</strong> これらの単位、特に <code>em</code> と <code>rem</code> は、ユーザーがフォントの大きさを変更しても <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">ページの vertical rhythm</a> を維持するような、拡縮可能なレイアウトを作成するためによく使われます。</p>
</div>

<dl>
 <dt><code id="cap">cap</code> {{experimental_inline}}</dt>
 <dd>その要素の {{Cssxref("font")}} における "cap height" （ふつうの大文字の高さ）を表します。</dd>
 <dt><code id="ch">ch</code></dt>
 <dd>その要素の {{Cssxref("font")}} における "0" (ゼロ、Unicode 文字 U+0030) の幅、より正確に言えば advance measure です。<br>
 <br>
 "0" の文字の大きさを判断することが不可能または無意味である場合、幅が 0.5em、高さが 1em と仮定します。</dd>
 <dt><code id="em">em</code></dt>
 <dd>その要素の {{Cssxref("font-size")}} の計算値を表します。{{Cssxref("font-size")}} プロパティ自身に使われた場合は、要素に<em>継承された</em>フォントの大きさを表します。</dd>
 <dt><code id="ex">ex</code></dt>
 <dd>その要素の {{Cssxref("font")}} における <a href="http://en.wikipedia.org/wiki/X-height">x-height</a> です。 'x' の文字を持つフォントでは一般的に、フォントにおける小文字の高さに相当します。多くのフォントでは <code>1ex ≈ 0.5em </code> です。</dd>
 <dt><code id="ic">ic</code> {{experimental_inline}}</dt>
 <dd>描画に使用されるフォントにおける「水」（U+6C34）の文字の advance measure と同じです。</dd>
 <dt><code id="lh">lh</code> {{experimental_inline}}</dt>
 <dd>使用されている要素の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。</dd>
 <dt><code id="rem">rem</code></dt>
 <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("font-size")}} を表します。ルート要素の {{Cssxref("font-size")}} で使うと初期値を表します（多くのブラウザーでは既定値は <code>16px</code> ですが、ユーザー設定によって変わる可能性があります）。</dd>
 <dt><code id="rlh">rlh</code> {{experimental_inline}}</dt>
 <dd>ルート要素（ふつうは {{HTMLElement("html")}}）の {{Cssxref("line-height")}} プロパティの計算値と同じで、絶対的な長さに変換されます。ルート要素の {{Cssxref("font-size")}} または {{Cssxref("line-height")}} プロパティに使われた場合は、プロパティの初期値になります。</dd>
</dl>

<h5 id="Viewport-percentage_lengths" name="Viewport-percentage_lengths">ビューポートのパーセント値による長さ</h5>

<p>ビューポートのパーセント値による長さは、{{glossary("viewport", "ビューポート")}}、つまり文書の見える範囲の寸法に対する相対的な <code>&lt;length&gt;</code> 値を定義します。ビューポートの長さは {{cssxref("@page")}} で宣言されたブロックでは無効です。</p>

<dl>
 <dt><code id="vh">vh</code></dt>
 <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における高さの1%と同じです。</dd>
 <dt><code id="vw">vw</code></dt>
 <dd>ビューポートの初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における幅の1%と同じです。</dd>
 <dt><code id="vi">vi</code> {{experimental_inline}}</dt>
 <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#inline-dimension">インライン軸</a>の寸法の1%と同じです。</dd>
 <dt><code id="vb">vb</code> {{experimental_inline}}</dt>
 <dd>初期値の<a href="/ja/docs/Web/CSS/All_About_The_Containing_Block">包含ブロック</a>における、ルート要素の<a href="/ja/docs/Web/CSS/CSS_Logical_Properties#block-dimension">ブロック軸</a>の寸法の1%と同じです。</dd>
 <dt><code id="vmin">vmin</code></dt>
 <dd><code>vw</code> と <code>vh</code> の小さい方です。</dd>
 <dt><code id="vmax">vmax</code></dt>
 <dd><code>vw</code> と <code>vh</code> の大きい方です。</dd>
</dl>

<h4 id="Absolute_length_units" name="Absolute_length_units">絶対的な長さの単位</h4>

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

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

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

<div class="note">
<p><strong>注:</strong> たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 <code>font-size</code> を設定する場合には、 (<code>em</code> や <code>rem</code> のような) 相対的な単位が適しています。</p>
</div>

<dl>
 <dt><code id="px">px</code></dt>
 <dd>1ピクセルです。画面表示では、伝統的に端末の1ピクセル (ドット) を表します。しかし、<em>プリンター</em>や<em>高解像度の画面</em>では、 CSS の1ピクセルが端末の複数ピクセルになることがります。 <code>1px</code> = <code>1in</code> の1/96です。</dd>
 <dt><code id="cm">cm</code></dt>
 <dd>1センチメートルです。 <code>1cm</code> = <code>96px/2.54</code> です。</dd>
 <dt><code id="mm">mm</code></dt>
 <dd>1ミリメートルです。 <code>1mm</code> = <code>1cm</code> の1/10です。</dd>
 <dt><code id="q">Q</code> {{experimental_inline}}</dt>
 <dd>1/4ミリメートルです。 <code>1Q</code> = <code>1cm</code> の1/40です。</dd>
 <dt><code id="in">in</code></dt>
 <dd>1インチです。 <code>1in</code> = <code>2.54cm</code> = <code>96px</code> です。</dd>
 <dt><code id="pc">pc</code></dt>
 <dd>1パイカです。 <code>1pc</code> = <code>12pt</code> = <code>1in</code> の1/6です。</dd>
 <dt><code id="pt">pt</code></dt>
 <dd>1ポイントです。 <code>1pt</code> = <code>1in</code> の1/72です。</dd>
 <dt><code id="mozmm">mozmm</code> {{non-standard_inline}}, Firefox 59 で削除</dt>
 <dd>実験的な単位で、表示する大きさや解像度に依存せず、正確に1ミリメートルで描画します。必要とされるのはまれですが、特にモバイル端末では有用かもしれません。</dd>
</dl>

<h2 id="Interpolation" name="Interpolation">補間</h2>

<p>アニメーションの場合、 <code>&lt;length&gt;</code> データ型の値は浮動小数点の実数として補間されます。補間は計算値に対して行われます。補間の速度は、アニメーションに関連付けられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>によって定められます。</p>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Length_unit_comparison" name="Length_unit_comparison">長さの単位の比較</h3>

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

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="outer"&gt;
  &lt;div class="input-container"&gt;
    &lt;label&gt;長さを入力してください:&lt;/label&gt;
    &lt;input type="text" id="length"&gt;
  &lt;/div&gt;
  &lt;div class="inner"&gt;

  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="results"&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">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;
}</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js notranslate">const inputDiv = document.querySelector('.inner');
const inputElem = document.querySelector('input');
const resultsDiv = document.querySelector('.results');

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

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

  inputElem.value = '';
  inputElem.focus();
})</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS4 Values')}}</td>
   <td><code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code> の単位を追加。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS3 Values')}}</td>
   <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>Q</code> の単位を追加。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td><code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の明示的な定義。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初回定義。 <code>em</code>, <code>pt</code>, <code>pc</code>, <code>px</code> の単位の暗黙的な定義。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.types.length")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値と単位チュートリアル</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位リファレンス</a></li>
 <li><a href="/ja/docs/Web/CSS/CSS_Box_Model">ボックスモデル</a></li>
</ul>