diff options
Diffstat (limited to 'files/ja/web/css/dimension')
| -rw-r--r-- | files/ja/web/css/dimension/index.md | 91 |
1 files changed, 35 insertions, 56 deletions
diff --git a/files/ja/web/css/dimension/index.md b/files/ja/web/css/dimension/index.md index 89792d3a7e..2ca81eeb18 100644 --- a/files/ja/web/css/dimension/index.md +++ b/files/ja/web/css/dimension/index.md @@ -1,80 +1,59 @@ --- -title: dimension +title: <dimension> slug: Web/CSS/dimension tags: - CSS - - CSS Data Type - CSS データ型 - - Reference + - データ型 + - リファレンス - dimension - - unit - - value - - 値 - 単位 + - 値 +browser-compat: css.types.dimension translation_of: Web/CSS/dimension --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code><dimension></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{CSSxRef("<number>")}} とそれに添付された単位を表します (10px など)。</p> +**`<dimension>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 {{CSSxRef("<number>")}} とそれに添付された単位を表します (`10px` など)。 -<p>CSS は dimension を使用して、距離 ({{CSSxRef("<length>")}})、時間 ({{CSSxRef("<time>")}})、周期 ({{CSSxRef("<frequency>")}})、解像度 ({{CSSxRef("<resolution>")}})、その他の量を指定します。</p> +CSS は `<dimension>` を使用して、長さ ({{CSSxRef("<length>")}})、時間 ({{CSSxRef("<time>")}})、周期 ({{CSSxRef("<frequency>")}})、解像度 ({{CSSxRef("<resolution>")}})、その他の量を指定します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code><dimension></code> の構文は、 {{CSSxRef("<number>")}} とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。</p> +`<dimension>` の構文は、 {{CSSxRef("<number>")}} とすぐ後に識別子である単位を続けます。単位の識別子は、大文字小文字の区別がありません。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Valid_dimensions" name="Valid_dimensions">妥当な dimension</h3> +### 有効な dimension -<pre class="syntaxbox example-good">12px 12ピクセル +```css example-good +12px 12 ピクセル 1rem 1rem -1.2pt 1.2ポイント -2200ms 2200ミリ秒 -200hz 200ヘルツ -200Hz 200ヘルツ (値は大文字小文字の区別なし) -</pre> +1.2pt 1.2 ポイント +2200ms 2200 ミリ秒 +5s 5 秒 +200hz 200 ヘルツ +200Hz 200 ヘルツ (値は大文字小文字の区別なし) +``` -<h3 id="Invalid_dimensions" name="Invalid_dimensions">妥当ではない dimension</h3> +### 無効な dimension -<pre class="syntaxbox example-bad">12 px 単位は数値の直後に来る必要がある。 +```css example-bad +12 px 単位は数値の直後に来る必要がある。 12"px" 単位は識別子であり、引用符で囲まない。 -</pre> +3sec 秒の単位は "s" であり "sec" ではない。 +``` + +## 仕様書 + +{{Specifications}} -<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", "<dimension>")}}</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", "<dimension>")}}</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", "<dimension>")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Numbers and Length において定義</td> - </tr> - <tr> - <td>{{SpecName("CSS1", "", "<dimension>")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>"length units" のもとに初回定義</td> - </tr> - </tbody> -</table> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## 関連情報 -<p>{{Compat("css.types.dimension")}}</p> +- [CSS データ型](/ja/docs/Web/CSS/CSS_Types) +- [CSS を使用した HTML のスタイル付けの学習](/ja/docs/Learn/CSS) +- CSS の長さ ({{CSSxRef("<length>")}}), 時間 ({{CSSxRef("<time>")}}), 周期 ({{CSSxRef("<frequency>")}}), 解像度 ({{CSSxRef("<resolution>")}}) |