---
title: dimension
slug: Web/CSS/dimension
tags:
  - CSS
  - CSS Data Type
  - CSS データ型
  - Reference
  - dimension
  - unit
  - value
  - 値
  - 単位
translation_of: Web/CSS/dimension
---
<div>{{CSSRef}}</div>

<p><strong><code>&lt;dimension&gt;</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{CSSxRef("&lt;number&gt;")}} とそれに添付された単位を表します (10px など)。</p>

<p>CSS は dimension を使用して、距離 ({{CSSxRef("&lt;length&gt;")}})、時間 ({{CSSxRef("&lt;time&gt;")}})、周期 ({{CSSxRef("&lt;frequency&gt;")}})、解像度 ({{CSSxRef("&lt;resolution&gt;")}})、その他の量を指定します。</p>

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

<p><code>&lt;dimension&gt;</code> の構文は、 {{CSSxRef("&lt;number&gt;")}} とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。</p>

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

<h3 id="Valid_dimensions" name="Valid_dimensions">妥当な dimension</h3>

<pre class="syntaxbox example-good">12px      12ピクセル
1rem      1rem
1.2pt     1.2ポイント
2200ms    2200ミリ秒
200hz     200ヘルツ
200Hz     200ヘルツ (値は大文字小文字の区別なし)
</pre>

<h3 id="Invalid_dimensions" name="Invalid_dimensions">妥当ではない dimension</h3>

<pre class="syntaxbox example-bad">12 px       単位は数値の直後に来る必要がある。
12"px"      単位は識別子であり、引用符で囲まない。
</pre>

<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", "#dimensions", "&lt;dimension&gt;")}}</td>
   <td>{{Spec2("CSS4 Values")}}</td>
   <td><code>cap</code>, <code>ic</code>, <code>lh</code>, <code>rlh</code>, <code>vi</code>, <code>vb</code> を追加</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Values", "#dimensions", "&lt;dimension&gt;")}}</td>
   <td>{{Spec2("CSS3 Values")}}</td>
   <td><code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code> を追加</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "syndata.html#numbers", "&lt;dimension&gt;")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>Numbers and Length において定義</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS1", "", "&lt;dimension&gt;")}}</td>
   <td>{{Spec2("CSS1")}}</td>
   <td>"length units" のもとに初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

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