diff options
25 files changed, 1133 insertions, 1505 deletions
diff --git a/files/ja/web/css/angle-percentage/index.md b/files/ja/web/css/angle-percentage/index.md index e41fefa562..6f8e4afbae 100644 --- a/files/ja/web/css/angle-percentage/index.md +++ b/files/ja/web/css/angle-percentage/index.md @@ -3,58 +3,36 @@ title: <angle-percentage> slug: Web/CSS/angle-percentage tags: - CSS - - CSS Data Type - - Data Type - - Reference + - CSS データ型 + - データ型 + - リファレンス - angle-percentage - - units - - values + - 単位 + - 値 translation_of: Web/CSS/angle-percentage --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code><angle-percentage></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{Cssxref("angle")}} または {{Cssxref("percentage")}} が取りうる値を表します。</p> +**`<angle-percentage>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 {{Cssxref("<angle>")}} または {{Cssxref("<percentage>")}} が取りうる値を表します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p>この型に利用できる個々の構文の詳細は、 {{Cssxref("angle")}} および {{Cssxref("percentage")}} の文書を参照してください。</p> +この型に利用できる個々の構文の詳細は、 {{Cssxref("<angle>")}} および {{Cssxref("<percentage>")}} の文書を参照してください。 -<h2 id="Use_in_calc" name="Use_in_calc">calc() での使用</h2> +## calc() での使用 -<p>許可されている型として <code><angle-percentage></code> が指定されているところでは、これはパーセント値が角度として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。</p> +許可されている型として `<angle-percentage>` が指定されているところでは、これはパーセント値が角度として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。 -<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', '#mixed-percentages', '<angle-percentage>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code><angle-percentage></code> を定義。 <code>calc()</code> を追加</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.types.angle-percentage")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS データ型</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーションの使用</a></li> - <li>{{cssxref("conic-gradient", "conic-gradient()")}} および {{cssxref("repeating-conic-gradient", "repeating-conic-gradient()")}}</li> -</ul> +- [CSS データ型](/ja/docs/Web/CSS/CSS_Types) +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- [`conic-gradient()`](/ja/docs/Web/CSS/gradient/conic-gradient()) および [`repeating-conic-gradient()`](/ja/docs/Web/CSS/gradient/repeating-conic-gradient()) diff --git a/files/ja/web/css/angle/index.md b/files/ja/web/css/angle/index.md index 4986591cbc..4d3257c6cd 100644 --- a/files/ja/web/css/angle/index.md +++ b/files/ja/web/css/angle/index.md @@ -3,90 +3,97 @@ title: <angle> slug: Web/CSS/angle tags: - CSS - - CSS Data Type - CSS データ型 - - CSS 値と単位 - - Layout - - Reference - - Web - - ウェブ + - データ型 - レイアウト + - リファレンス + - ウェブ + - angle +browser-compat: css.types.angle translation_of: Web/CSS/angle --- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code><angle></code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、度、グラード、ラジアン、回転の値で表される角度の値を表します。例えば、 {{cssxref("<gradient>")}} 関数や一部の {{cssxref("transform")}} 関数などで使われています。</p> - -<div>{{EmbedInteractiveExample("pages/css/type-angle.html")}}</div> - -<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><angle></code> データ型は、一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。 数値 <code>0</code> の後は、角度の単位は任意です。</p> - -<p>任意で、先行して単一の符号 (<code>+</code> または <code>-</code>) を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 <code>90deg</code> は <code>-270deg</code> と等価で、 <code>1turn</code> は <code>4turn</code> と等価です。しかし、 {{cssxref("animation")}} や {{cssxref("transition")}} に適用されるような動的なプロパティでは、効果が異なります。</p> - -<h3 id="Units" name="Units">単位</h3> - -<dl> - <dt><code><a id="deg" name="deg">deg</a></code></dt> - <dd>角度を<a class="external" href="https://ja.wikipedia.org/wiki/%E5%BA%A6_(%E8%A7%92%E5%BA%A6)">度数法 (度)</a> で表します。円一周は <code>360deg</code> です。例: <code>0deg</code>, <code>90deg</code>, <code>14.23deg</code></dd> - <dt id="grad"><code><a id="grad" name="grad">grad</a></code></dt> - <dd>角度を<a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%BC%E3%83%89_(%E5%8D%98%E4%BD%8D)">グラード</a>で表します。円一周は <code>400grad</code> です。例: <code>0grad</code>, <code>100grad</code>, <code>38.8grad</code></dd> - <dt id="rad"><code><a id="rad" name="rad">rad</a></code></dt> - <dd>角度を<a class="external" href="https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%B8%E3%82%A2%E3%83%B3">弧度法 (ラジアン)</a> で表します。円一周は 2π ラジアンで、およそ <code>6.2832rad</code> です。 <code>1rad</code> は 180/π 度です。例: <code>0rad</code>, <code>1.0708rad</code>, <code>6.2832rad</code></dd> - <dt id="turn"><code><a id="turn" name="turn">turn</a></code></dt> - <dd>角度を回転数で表します。円一周は <code>1turn</code> です。例: <code>0turn</code>, <code>0.25turn</code>, <code>1.2turn</code></dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<table style="width: 100%;"> - <tbody> - <tr> - <td><img alt="Angle90.png" class="default internal" src="/@api/deki/files/5704/=Angle90.png"></td> - <td>直角: <code>90deg = 100grad = 0.25turn ≈ 1.5708rad</code></td> - </tr> - <tr> - <td><img alt="Angle180.png" class="default internal" src="/@api/deki/files/5706/=Angle180.png"></td> - <td>平角: <code>180deg = 200grad = 0.5turn ≈ 3.1416rad</code></td> - </tr> - <tr> - <td><img alt="AngleMinus90.png" class="default internal" src="/@api/deki/files/5707/=AngleMinus90.png"></td> - <td>直角 (反時計回り): <code>-90deg = -100grad = -0.25turn ≈ -1.5708rad</code></td> - </tr> - <tr> - <td><img alt="Angle0.png" class="default internal" src="/@api/deki/files/5708/=Angle0.png"></td> - <td>角度なし: <code>0 = 0deg = 0grad = 0turn = 0rad</code></td> - </tr> - </tbody> +{{ CSSRef() }} + +**`<angle>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、度、グラード、ラジアン、周の値で表される角度の値を表します。例えば、 {{cssxref("<gradient>")}} 関数や一部の {{cssxref("transform")}} 関数などで使われています。 + +{{EmbedInteractiveExample("pages/css/type-angle.html")}} + +## 構文 + +`<angle>` データ型は、1 つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の 1 つから成ります。単位と数値の間に空白は置きません。 数値 `0` の後では、角度の単位は任意です。 + +任意で、先行して単一の符号 (`+` または `-`) を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 `90deg` は `-270deg` と等価で、 `1turn` は `4turn` と等価です。しかし、 {{cssxref("animation")}} や {{cssxref("transition")}} に適用されるような動的なプロパティでは、効果が異なります。 + +### 単位 + +- `deg` + - : 角度を[度数法 (度)](https://ja.wikipedia.org/wiki/%E5%BA%A6_(%E8%A7%92%E5%BA%A6)) で表します。円一周は `360deg` です。例: `0deg`, `90deg`, `14.23deg` +- `grad` + - : 角度を[グラード](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%BC%E3%83%89_(%E5%8D%98%E4%BD%8D))で表します。円一周は `400grad` です。例: `0grad`, `100grad`, `38.8grad` +- `rad` + - : 角度を[弧度法 (ラジアン)](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%B8%E3%82%A2%E3%83%B3) で表します。円一周は 2π ラジアンで、およそ `6.2832rad` です。 `1rad` は 180/π 度です。例: `0rad`, `1.0708rad`, `6.2832rad` +- `turn` + - : 角度を回転数で表します。円一周は `1turn` です。例: `0turn`, `0.25turn`, `1.2turn` + +## 例 + +### 時計回りに直角を設定 + +<table class="standard-table"> + <tbody> + <tr> + - : <img class="default internal" src="angle90.png" /> + - : `90deg = 100grad = 0.25turn ≈ 1.5708rad` + </tr> + </tbody> </table> -<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', '#angles', '<angle>') }}</td> - <td>{{ Spec2('CSS4 Values') }}</td> - <td></td> - </tr> - <tr> - <td>{{ SpecName('CSS3 Values', '#angles', '<angle>') }}</td> - <td>{{ Spec2('CSS3 Values') }}</td> - <td>初回定義。</td> - </tr> - </tbody> + <tbody> + <tr> + - : <img class="default internal" src="angle180.png" /> + - : `180deg = 200grad = 0.5turn ≈ 3.1416rad` + </tr> + </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +### 反時計回りに直角を設定 + +<table class="standard-table"> + <tbody> + <tr> + - : <img class="default internal" src="angleminus90.png" /> + - : `-90deg = -100grad = -0.25turn ≈ -1.5708rad` + </tr> + </tbody> +</table> + +### 0 度を設定 + +<table class="standard-table"> + <tbody> + <tr> + - : <img class="default internal" src="angle0.png" /> + - : `0 = 0deg = 0grad = 0turn = 0rad` + </tr> + </tbody> +</table> + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -<p>{{Compat("css.types.angle")}}</p> +- [CSS データ型](/ja/docs/Web/CSS/CSS_Types) +- [`<gradient>`](/ja/docs/Web/CSS/gradient) 型 +- CSS 回転変換: [`rotate()`](</ja/docs/Web/CSS/transform-function/rotate()>), [`rotate3d()`](</ja/docs/Web/CSS/transform-function/rotate3d()>), [`rotateX()`](</ja/docs/Web/CSS/transform-function/rotateX()>), [`rotateY()`](</ja/docs/Web/CSS/transform-function/rotateY()>), [`rotateZ()`](</ja/docs/Web/CSS/transform-function/rotateZ()>) +- [CSS 変換](/ja/docs/Web/CSS/CSS_Transforms) +- [CSS 変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) diff --git a/files/ja/web/css/attr()/index.md b/files/ja/web/css/attr()/index.md index 28b71d18aa..e9f97a85f2 100644 --- a/files/ja/web/css/attr()/index.md +++ b/files/ja/web/css/attr()/index.md @@ -4,19 +4,22 @@ slug: Web/CSS/attr() tags: - CSS - CSS 関数 - - Reference - - Web - - attr + - 関数 - レイアウト + - リファレンス + - ウェブ + - attr +browser-compat: css.types.attr translation_of: Web/CSS/attr() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<div class="blockIndicator note"><strong>メモ:</strong> <code>attr()</code> 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。</div> +> **Note:** `attr()` 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。 -<p><strong><code>attr()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。<a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。</p> +**`attr()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。 -<pre class="brush: css no-line-numbers notranslate">/* Simple usage */ +```css +/* 単純な使用法 */ attr(data-count); attr(title); @@ -30,226 +33,188 @@ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); -</pre> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>attribute-name</code></dt> - <dd>CSS で参照する、 HTML 要素の属性名です。</dd> - <dt><code style="white-space: nowrap;"><type-or-unit></code> {{Experimental_Inline}}</dt> - <dd>属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を <code><type-or-unit></code> で与えると、 <code>attr()</code> 式も無効になります。省略すると既定値の <code>string</code> になります。有効な値は以下の通りです。 - <table class="standard-table"> - <thead> - <tr> - <th scope="col">キーワード</th> - <th scope="col">関係する型</th> - <th scope="col">コメント</th> - <th scope="col">既定値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>string</code></td> - <td style="white-space: nowrap;">{{CSSxRef("<string>")}}</td> - <td>属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。</td> - <td>空文字列</td> - </tr> - <tr> - <td><code>color</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<color>")}}</td> - <td>属性値はハッシュ (3値または6値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。<br> - 前後の空白は除去されます。</td> - <td><code>currentcolor</code></td> - </tr> - <tr> - <td><code>url</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<url>")}}</td> - <td>属性値は、 CSS の <code>url()</code> 関数の中で使用される文字列として解析されます。<br> - 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。<br> - 前後の空白は除去されます。</td> - <td>一般的なエラーの状況で存在しない文書を指す <code>about:invalid</code> の URL。</td> - </tr> - <tr> - <td><code>integer</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<integer>")}}</td> - <td>属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 前後の空白は除去されます。</td> - <td><code>0</code>、または <code>0</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>number</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<number>")}}</td> - <td>属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 前後の空白は除去されます。</td> - <td><code>0</code>、または <code>0</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>length</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<length>")}}</td> - <td>属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (<code>12.5em</code> など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 指定された値が相対的な長さの場合は、 <code>attr()</code> は絶対的な値に変換して計算します。<br> - 前後の空白は除去されます。</td> - <td><code>0</code>、または <code>0</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>em</code>, <code>ex</code>, <code>px</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, <code>mm</code>, <code>cm</code>, <code>in</code>, <code>pt</code>, or <code>pc</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<length>")}}</td> - <td>属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (<code>12.5</code> など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 指定された値が相対的な長さの場合は、 <code>attr()</code> は絶対的な値に変換して計算します。<br> - 前後の空白は除去されます。</td> - <td><code>0</code>、または <code>0</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>angle</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<angle>")}}</td> - <td>属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (<code>30.5deg</code> など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 前後の空白は除去されます。</td> - <td><code>0deg</code>、または <code>0deg</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>deg</code>, <code>grad</code>, <code>rad</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<angle>")}}</td> - <td>属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (<code>12.5</code> など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 前後の空白は除去されます。</td> - <td><code>0deg</code>、または <code>0deg</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>time</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<time>")}}</td> - <td>属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (<code>30.5ms</code> など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 前後の空白は除去されます。</td> - <td><code>0s</code>、または <code>0s</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>s</code>, <code>ms</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<time>")}}</td> - <td>属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (<code>12.5</code> など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 前後の空白は除去されます。</td> - <td><code>0s</code>、または <code>0s</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>frequency</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<frequency>")}}</td> - <td>属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (<code>30.5ms</code> など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。</td> - <td><code>0Hz</code>、または <code>0Hz</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>Hz</code>, <code>kHz</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<frequency>")}}</td> - <td>属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (<code>12.5</code> など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 前後の空白は除去されます。</td> - <td><code>0Hz</code>、または <code>0Hz</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - <tr> - <td><code>%</code> {{Experimental_Inline}}</td> - <td style="white-space: nowrap;">{{CSSxRef("<percentage>")}}</td> - <td>属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (<code>12.5</code> など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。<br> - 指定された値が長さの場合は、 <code>attr()</code> は絶対的な値に変換して計算します。<br> - 前後の空白は除去されます。</td> - <td><code>0%</code>、または <code>0%</code> が妥当な値ではないプロパティでは、プロパティの最小値。</td> - </tr> - </tbody> - </table> - </dd> - <dt><code><fallback></code> {{Experimental_Inline}}</dt> - <dd>関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 <code><type-or-unit></code> で定義された既定値を使います。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +## 構文 + +### 値 + +- `attribute-name` + - : CSS で参照する、 HTML 要素の属性名です。 +- `<type-or-unit>` {{Experimental_Inline}} + + - : 属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を `<type-or-unit>` で与えると、 `attr()` 式も無効になります。省略すると既定値の `string` になります。有効な値は以下の通りです。 + + - `string` + + - : 属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。 + + 既定値は空文字列です。 + + - `color` {{Experimental_Inline}} + + - : 属性値はハッシュ (3 値または 6 値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。前後の空白は除去されます。 + + 既定値は `currentcolor` です。 + + - `url` {{Experimental_Inline}} + + - : 属性値は、 CSS の `url()` 関数の中で使用される文字列として解析されます。 + 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。 + 前後の空白は除去されます。 + + 既定値は、一般的なエラーの状況で存在しない文書を指す `about:invalid` の URL です。 + + - `integer` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `number` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `length` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (`12.5em` など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。<br> + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。<br> + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `angle` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (`30.5deg` など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `deg`, `grad`, `rad` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `time` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `s`, `ms` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `frequency` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + + 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `Hz`, `kHz` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `%` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が長さの場合は、 `attr()` は絶対的な値に変換して計算します。 + 前後の空白は除去されます。 + + 既定値は `0%`、または `0%` が妥当な値ではないプロパティでは、プロパティの最小値です。 + +- `<fallback>` {{Experimental_Inline}} + - : 関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 `<type-or-unit>` で定義された既定値を使います。 + +### 形式文法 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="content_property" name="content_property">content プロパティ</h3> +<h3 id="content_property">content プロパティ</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><p data-foo="hello">world</p></pre> +```html +<p data-foo="hello">world</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css highlight[2] notranslate">[data-foo]::before { - content: attr(data-foo) " "; -}</pre> +```css +[data-foo]::before { + content: attr(data-foo) " "; +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("content_property", "100%", 50)}}</p> +{{EmbedLiveSample("content_property", "100%", 50)}} -<h3 id="<color>_value" name="<color>_value"><color> 値</h3> +<h3 id="color_value"><color> 値</h3> -<p>{{SeeCompatTable}}</p> +{{SeeCompatTable}} -<div id="color-value"> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div></pre> +```html +<div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<div class="hidden"> -<pre class="brush: css notranslate">.background { - height: 100vh; -}</pre> -</div> +```css hidden +.background { + height: 100vh; +} +``` -<pre class="brush: css highlight[6] notranslate">.background { - background-color: red; +```css +.background { + background-color: red; } .background[data-background] { - background-color: attr(data-background color, red); -}</pre> -</div> - -<p>{{EmbedLiveSample("color-value", "100%", 50)}}</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", "#attr-notation", "attr()")}}</td> - <td>{{Spec2("CSS4 Values")}}</td> - <td>{{CSSxRef("var()")}} のように動作するように変更。 <code>attr()</code> を含むプロパティ値は解析時に有効となり、属性値の検証は計算値になるまで延期されます。</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}</td> - <td>{{Spec2("CSS3 Values")}}</td> - <td> - <p>2 つのオプション引数を追加<br> - 全プロパティで使用可能<br> - {{CSSxRef("<string>")}} 以外の値が返せるようになった。</p> - これらの変更は実験的であり、ブラウザーの互換性が少なすぎると CR 段階で外される可能性がある</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>{{CSSxRef("content")}} プロパティに限定<br> - 常に {{CSSxRef("<string>")}} を返す</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.attr")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> - <li><a href="/ja/docs/Web/HTML/Global_attributes/data-*">HTML <code>data-*</code> 属性</a></li> - <li><a href="/ja/docs/Web/SVG/Attribute/data-*">SVG <code>data-*</code> 属性</a></li> -</ul> + background-color: attr(data-background color, red); +} +``` + +#### 結果 + +{{EmbedLiveSample("color_value", "100%", 50)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) +- [HTML `data-*` 属性](/ja/docs/Web/HTML/Global_attributes/data-*) +- [SVG `data-*` 属性](/ja/docs/Web/SVG/Attribute/data-*) diff --git a/files/ja/web/css/calc()/index.md b/files/ja/web/css/calc()/index.md index cfe96fb86c..3e8ca05a43 100644 --- a/files/ja/web/css/calc()/index.md +++ b/files/ja/web/css/calc()/index.md @@ -16,7 +16,7 @@ translation_of: Web/CSS/calc() --- {{CSSRef}} -<a href="/ja/docs/Web/CSS">CSS</a> の <strong>`calc()`</strong> 関数は、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}、{{cssxref("<frequency>")}}、{{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、{{cssxref("<integer>")}} が利用できる場所ならば使用できます。</p> +**`calc()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}、{{cssxref("<frequency>")}}、{{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、{{cssxref("<integer>")}} が利用できる場所ならば使用できます。</p> {{EmbedInteractiveExample("pages/css/function-calc.html")}} @@ -79,7 +79,7 @@ h1 { これによって最終的に `.modal` は `z-index` の値は 2 になります。 -**Note:** Chrome ブラウザーでは現在のところ、整数が求められる場面で **`calc()`** から返される一部の値を受け付けません。例えば割り算は、結果が整数になる場合でも受け付けません。すなわち、 `z-index: calc(4 / 2);` は受け付けられません。 +**Note:** Chrome ブラウザーでは現在のところ、整数が求められる場面で **`calc()`** から返される一部の値を受け付けません。例えば、結果が整数になる場合であっても割り算は受け付けません。すなわち、 `z-index: calc(4 / 2);` は受け付けられません。 ## 例 diff --git a/files/ja/web/css/clamp()/index.md b/files/ja/web/css/clamp()/index.md index 75fc0542b8..a230b40d6c 100644 --- a/files/ja/web/css/clamp()/index.md +++ b/files/ja/web/css/clamp()/index.md @@ -3,119 +3,109 @@ title: clamp() slug: Web/CSS/clamp() tags: - CSS - - CSS Function - CSS 関数 - - Calculate - - Compute - - Function - - Layout - - Reference - - Web - - clamp - - ウェブ - - レイアウト - 計算 + - 演算 - 関数 -translation_of: Web/CSS/clamp()ｓ + - レイアウト + - リファレンス + - ウェブ + - clamp +browser-compat: css.types.clamp +translation_of: Web/CSS/clamp() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>clamp()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、値を上限と下限の間に制限します。 <code>clamp()</code> によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 <code>clamp()</code> 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。</p> +**`clamp()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、値を上限と下限の間に制限します。 `clamp()` によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 `clamp()` 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。 -<p><code>clamp(MIN, VAL, MAX)</code> は <code>{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))</code> と同等です。</p> +`clamp(MIN, VAL, MAX)` は `{{CSSxRef("max()")}}(MIN, {{CSSxRef("min()")}}(VAL, MAX))` と同等です。 -<pre class="brush: css; no-line-numbers">/* property: clamp(expression{3}) */ -width: clamp(10px, 4em, 80px);</pre> +{{EmbedInteractiveExample("pages/css/function-clamp.html")}} -<p>上記の例では、幅が最大 80px、最小 10px ですが、 em が 2.5px から 20px の間であれば、 4em になります。</p> +これらの例のように、フォントの大きさに `clamp()` を使用すると、ビューポートの大きさに合わせてフォントの大きさを設定することができますが、最小フォントサイズを下回ったり、最大フォントサイズを上回ったりすることはありません。これは [Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/) のコードと同じ効果がありますが、1 行で済み、メディアクエリーも使用しません。 -<p>上記の場合で em が 16px の幅であると仮定しましょう。</p> +## 構文 -<pre class="brush: css; no-line-numbers">width: clamp(10px, 4em, 80px); -/* 1em = 16px, 4em = 16px * 4 = 64px */ -width: clamp(10px, 64px, 80px); -/* clamp(MIN, VAL, MAX) は max(MIN, min(VAL, MAX))) と同等 */ -width: max(10px, min(64px, 80px)) -width: max(10px, 64px); -width: 64px;</pre> +`clamp()` 関数は、3 つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。 -<h2 id="Syntax" name="Syntax">構文</h2> +最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。 -<p><code>clamp()</code> 関数は、3つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。</p> +推奨値は、結果が最小値と最大値の間である限り使用される値の式です。 -<p>最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。</p> +最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。 -<p>推奨値は、結果が最小値と最大値の間である限り使用される値の式です。</p> +式は計算関数 (詳しくは {{CSSxRef("calc()")}} を参照)、リテラル値、 {{CSSxRef("attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min()")}} および {{CSSxRef("max()")}} 関数などです。数式としては、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。 -<p>最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。</p> +式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。 -<p>式は計算関数 (詳しくは {{CSSxRef("calc")}} を参照)、リテラル値、 {{CSSxRef("attr", "attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min")}} および {{CSSxRef("max")}} 関数などです。数式としては、 <code>calc()</code> 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。</p> +### メモ -<p>式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。</p> +- 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 `auto` が指定されたものとして扱われる*ことが*あります。 +- 式の値として `max()` および `min()` 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。 +- 式は加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。 +- {{CSSxRef("min()")}} および {{CSSxRef("max()")}} を `clamp()` 関数の中で使用したくなるでしょう。 -<h3 id="Notes" name="Notes">メモ</h3> +### 形式文法 -<ul> - <li>自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 <code>auto</code> がして甥されたものとして扱われる<em>ことが</em>あります。</li> - <li>式の値として <code>max()</code> および <code>min()</code> 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 <code>calc()</code> 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。</li> - <li>式は加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。</li> - <li>{{CSSxRef("min")}} および {{CSSxRef("max")}} を <code>clamp()</code> 関数の中で使用したくなるでしょう。</li> -</ul> +{{CSSSyntax}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 例 -{{CSSSyntax}} +### min, max, clamp の比較 + +この例では、いくつかの大きさに対して {{CSSxRef("min()")}}、{{CSSxRef("max()")}}、{{CSSxRef("clamp()")}} を利用した単純なレスポンシブの例を紹介します。 + +[`<body>`](/ja/docs/Web/HTML/Element/body) 要素の [`width`](/ja/docs/Web/CSS/width) には、`min(1000px, calc(70% + 100px))` が設定されています。これは、`calc(70% + 100px)` の結果が `1000px` よりも小さい場合には、その値に設定されることを意味しています。`min()` では最大値を設定することができます。 + +[`<p>`](/ja/docs/Web/HTML/Element/p) 要素の [`font-size`](/ja/docs/Web/CSS/font-size) には、`max(1.2rem, 1.2vw)` が設定されています。すなわち、計算された `1.2vw` の値が `1.2rem` の値よりも大きい場合には、代わりにその値が設定されます。`max()` では、最小値を設定することができ、このような場合にはアクセシビリティの観点からも便利です。 + +[`<h1>`](/ja/docs/Web/HTML/Element/Heading_Elements) 要素の `font-size` は、`clamp(1.8rem, 2.5vw, 2.8rem)` と設定されています。これは、`2.5vw` の計算値が `1.8rem` の値よりも大きくなるまで、`font-size` が `1.8rem` に設定されることを意味します。この時点では、`2.5vw` の計算値が `2.8rem` の計算値よりも大きくなるまで、`font-size` は `2.5vw` に設定されます。この時点で、`font-size` は `2.8rem` に設定されます。`clamp()` では、最小値と最大値を設定することができます。 + +操作してみたい場合は、[GitHub で公開されている例](https://mdn.github.io/css-examples/min-max-clamp/)を参照してください。 -<h2 id="Examples" name="Examples">例</h2> +#### HTML -<h3 id="Setting_a_minimum_and_max_size_for_a_font" name="Setting_a_minimum_and_max_size_for_a_font">フォントへの最小値と最大値の設定</h3> +```html +<h1>Simple responsive test</h1> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.</p> -<p><code>clamp()</code> によって、ビューポートの大きさに合わせ、かつ最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができます。1行でメディアクエリを使用することなく、 <a href="https://css-tricks.com/snippets/css/fluid-typography/">Fluid Typography</a> の中のコードと同じ効果を持ちます。</p> +<p>Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem. </p> +``` -<pre class="brush: css">p { font-size: clamp(1rem, 2.5vw, 1.5rem); } -</pre> +#### CSS -<pre class="brush: html;"><p> -If 2.5vw is less than 1rem, the font-size will be 1rem. -If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem. -Otherwise, it will be 2.5vw. -</p> -</pre> +```css +html { + font-family: sans-serif; +} -<p>{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}</p> +body { + margin: 0 auto; + width: min(1000px, calc(70% + 100px)); +} -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +h1 { + letter-spacing: 2px; + font-size: clamp(1.8rem, 2.5vw, 2.8rem); +} -<p>TBD</p> +p { + line-height: 1.5; + font-size: max(1.2rem, 1.2vw); +} +``` -<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", "#calc-notation", "clamp()")}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.types.clamp")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{CSSxRef("calc")}}</li> - <li>{{CSSxRef("max")}}</li> - <li>{{CSSxRef("min")}}</li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS Values</a></li> -</ul> +- {{CSSxRef("calc()")}} +- {{CSSxRef("max()")}} +- {{CSSxRef("min()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/color_value/index.md b/files/ja/web/css/color_value/index.md index 1944312673..2c3a105997 100644 --- a/files/ja/web/css/color_value/index.md +++ b/files/ja/web/css/color_value/index.md @@ -41,7 +41,7 @@ translation_of: Web/CSS/color_value ## 構文 -`<color>` データ型は以下のいずれか1つの方法を使って指定されます。 +`<color>` データ型は以下のいずれか 1 つの方法を使って指定されます。 > **Note:** `<color>` の色は詳細に定義されていますが、出力機器によって (時には著しく) 違って見えるかもしれません。出力機器の大半は色補正がされておらず、ブラウザーによっては出力機器の[色プロファイル](https://ja.wikipedia.org/wiki/ICC%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB)に対応していないからです。 @@ -919,6 +919,8 @@ HSL 色は関数表記の `hsl()` および `hsla()` を通して表現されま - ActiveText - : アクティブなリンクのテキスト +- ButtonBorder + - : コントロールのベースの境界色 - ButtonFace - : プッシュボタンの背景 - ButtonText @@ -1082,7 +1084,7 @@ HSL が `hsl(60 100% 50%)` と `hsl(240 100% 50%)` の両方を同じ明るさ ### color() 色 CSS Color 4 でこの表記が導入されました。 -{{cssxref("color_value/color()","color()")}} 関数で指定された色は、定義済みの色空間のほか、[`@color-profile`](/en-US/docs/Web/CSS/@color-profile) ルールで定義されたカスタム色空間でも色を指定できます。 +{{cssxref("color_value/color()","color()")}} 関数で指定された色は、定義済みの色空間のほか、[`@color-profile`](/ja/docs/Web/CSS/@color-profile) ルールで定義されたカスタム色空間でも色を指定できます。 ## 補間 @@ -1226,7 +1228,7 @@ inputElem.addEventListener('change', () => { hsl(270 60% 50% / .15) hsl(270 60% 50% / 15%) -### 彩度100%の色 +### 彩度 100% の色 <table class="standard-table"> <thead> @@ -1406,7 +1408,7 @@ inputElem.addEventListener('change', () => { /* アルファのパーセント表記 */ hsla(240 100% 50% / 5%) /* 5% 半透明の青 */ -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 仕様書 <table class="standard-table"> <thead> @@ -1430,7 +1432,8 @@ inputElem.addEventListener('change', () => { </td> <td>{{Spec2('CSS3 Colors')}}</td> <td> - システム色を非推奨化。 SVG 色を追加。<code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code> 関数表記を追加。 + システム色を非推奨化。 SVG 色を追加。<code>rgba()</code>, + <code>hsl()</code>, <code>hsla()</code> 関数表記を追加。 </td> </tr> <tr style="vertical-align: top"> diff --git a/files/ja/web/css/custom-ident/index.md b/files/ja/web/css/custom-ident/index.md index 0770a40aac..46bbf511c9 100644 --- a/files/ja/web/css/custom-ident/index.md +++ b/files/ja/web/css/custom-ident/index.md @@ -3,132 +3,88 @@ title: <custom-ident> slug: Web/CSS/custom-ident tags: - CSS - - CSS Data Type - - Data Type - - Layout - - Reference - - Web + - CSS データ型 + - データ型 + - レイアウト + - リファレンス + - ウェブ translation_of: Web/CSS/custom-ident --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code><custom-ident></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。</p> +**`<custom-ident>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code><custom-ident></code> の構文は CSS の識別子 (プロパティ名など) に似ていますが、<a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96">大文字と小文字を区別</a>する点が違います。これは次の文字から成る文字の並びです:</p> +`<custom-ident>` の構文は CSS の識別子 (プロパティ名など) に似ていますが、[大文字と小文字を区別](https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96)する点が異なります。これは 1 文字以上の下記の文字のから成ります。 -<ul> - <li>任意のアルファベット (<code>A</code>-<code>Z</code>, <code>a</code>-<code>z</code>)</li> - <li>任意の数字 (<code>0</code>-<code>9</code>)</li> - <li>ハイフン (<code>-</code>)</li> - <li>アンダースコア (<code>_</code>)</li> - <li>エスケープ文字 (バックスラッシュ <code>\</code> に続く)</li> - <li><a href="http://ja.wikipedia.org/wiki/Unicode">Unicode</a> 文字 (バックスラッシュ <code>\</code> と、それに続く 1 - 6 個の16進値の形式をとる、Unicode コードポイント）</li> -</ul> +- 任意のアルファベット (`A`-`Z`, `a`-`z`) +- 任意の数字 (`0`-`9`) +- ハイフン (`-`) +- アンダースコア (`_`) +- エスケープ文字 (バックスラッシュ `\` に続く) +- [Unicode](http://ja.wikipedia.org/wiki/Unicode) 文字 (バックスラッシュ `\` と、それに続く 1 - 6 桁の 16 進数の形式で Unicode コードポイントを表す) -<p>このデータ値は<a class="external" href="https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96">大文字と小文字を区別</a>するため、<code>id1</code>、<code>Id1</code>、<code>iD1</code>、<code>ID1</code> はすべて異なった識別子です。逆に、別のエスケープ方式を使っていますが、 <code>toto\?</code> と <code>toto\3F</code> は同じ識別子です。</p> +なお、このデータ型では `id1`、`Id1`、`iD1`、`ID1` は[大文字と小文字を区別](https://ja.wikipedia.org/wiki/%E3%82%B1%E3%83%BC%E3%82%B9%E3%83%BB%E3%82%BB%E3%83%B3%E3%82%B7%E3%83%86%E3%82%A3%E3%83%96)するため、すべて異なった識別子として扱われます。逆に、`toto\?` と `toto\3F` は文字をエスケープする方法が異なりますが、同じ識別子として扱われます。 -<h3 id="Forbidden_values" name="Forbidden_values">禁止されている値</h3> +### 禁止されている値 -<p><code><custom-ident></code> を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("<string>")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (<code>-</code>) および、それら続くものであってはなりません。</p> +`<custom-ident>` を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("<string>")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (`-`) および、それらの続くものであってはなりません。 -<p>曖昧さを避けるため、 <code><custom-ident></code> を使用する各プロパティは、特定の値の使用を禁止しています:</p> +曖昧さを避けるため、 `<custom-ident>` を使用する各プロパティでは、特定の値の使用が禁止されています。 -<dl> - <dt>{{CSSxRef("animation-name")}}</dt> - <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) を禁止し、 <code>none</code> も禁止しています。</dd> - <dt>{{CSSxRef("counter-reset")}}</dt> - <dt>{{CSSxRef("counter-increment")}}</dt> - <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) を禁止し、 <code>none</code> も禁止しています。</dd> - <dt>{{CSSxRef("@counter-style")}}</dt> - <dt>{{CSSxRef("list-style-type")}}</dt> - <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) および <code>none</code>、 <code>inline</code> 、そして <code>outside</code> の値を禁止しています。また、かなりの数の定義済みの値が様々なブラウザーに実装されています: <code>disc</code>, <code>circle</code>, <code>square</code>, <code>decimal</code>, <code>cjk-decimal</code>, <code>decimal-leading-zero</code>, <code>lower-roman</code>, <code>upper-roman</code>, <code>lower-greek</code>, <code>lower-alpha</code>, <code>lower-latin</code>, <code>upper-alpha</code>, <code>upper-latin</code>, <code>arabic-indic</code>, <code>armenian</code>, <code>bengali</code>, <code>cambodian</code>, <code>cjk-earthly-branch</code>, <code>cjk-heavenly-stem</code>, <code>cjk-ideographic</code>, <code>devanagari</code>, <code>ethiopic-numeric</code>, <code>georgian</code>, <code>gujarati</code>, <code>gurmukhi</code>, <code>hebrew</code>, <code>hiragana</code>, <code>hiragana-iroha</code>, <code>japanese-formal</code>, <code>japanese-informal</code>, <code>kannada</code>, <code>katakana</code>, <code>katakana-iroha</code>, <code>khmer</code>, <code>korean-hangul-formal</code>, <code>korean-hanja-formal</code>, <code>korean-hanja-informal</code>, <code>lao</code>, <code>lower-armenian</code>, <code>malayalam</code>, <code>mongolian</code>, <code>myanmar</code>, <code>oriya</code>, <code>persian</code>, <code>simp-chinese-formal</code>, <code>simp-chinese-informal</code>, <code>tamil</code>, <code>telugu</code>, <code>thai</code>, <code>tibetan</code>, <code>trad-chinese-formal</code>, <code>trad-chinese-informal</code>, <code>upper-armenian</code>, <code>disclosure-open</code>, and <code>disclosure-close</code>.</dd> - <dt>{{CSSxRef("grid-row-start")}}<br> - {{CSSxRef("grid-row-end")}}<br> - {{CSSxRef("grid-column-start")}}<br> - {{CSSxRef("grid-column-end")}}</dt> - <dd><code>span</code> 値を禁止しています。</dd> - <dt>{{CSSxRef("will-change")}}</dt> - <dd>グローバル CSS 値 (<code>unset</code>、 <code>initial</code>、そして <code>inherit</code>) および <code>will-change</code>、 <code>auto</code>、 <code>scroll-position</code> そして <code>contents</code> の値を禁止しています。</dd> -</dl> +- {{CSSxRef("animation-name")}} + - : グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。 +- {{CSSxRef("counter-reset")}}, {{CSSxRef("counter-increment")}} + - : グローバル CSS 値 (`unset`, `initial`, `inherit`) を禁止し、 `none` も禁止しています。 +- {{CSSxRef("@counter-style")}}, {{CSSxRef("list-style-type")}} + - : グローバル CSS 値 (`unset`, `initial`, `inherit`) および `none`, `inline`, `outside` の値を禁止しています。また、`disc`, `circle`, `square`, `decimal`, `cjk-decimal`, `decimal-leading-zero`, `lower-roman`, `upper-roman`, `lower-greek`, `lower-alpha`, `lower-latin`, `upper-alpha`, `upper-latin`, `arabic-indic`, `armenian`, `bengali`, `cambodian`, `cjk-earthly-branch`, `cjk-heavenly-stem`, `cjk-ideographic`, `devanagari`, `ethiopic-numeric`, `georgian`, `gujarati`, `gurmukhi`, `hebrew`, `hiragana`, `hiragana-iroha`, `japanese-formal`, `japanese-informal`, `kannada`, `katakana`, `katakana-iroha`, `khmer`, `korean-hangul-formal`, `korean-hanja-formal`, `korean-hanja-informal`, `lao`, `lower-armenian`, `malayalam`, `mongolian`, `myanmar`, `oriya`, `persian`, `simp-chinese-formal`, `simp-chinese-informal`, `tamil`, `telugu`, `thai`, `tibetan`, `trad-chinese-formal`, `trad-chinese-informal`, `upper-armenian`, `disclosure-open`, and `disclosure-close` といった定義済みの値が、様々なブラウザーで実装されています。 +- {{CSSxRef("grid-row-start")}}, {{CSSxRef("grid-row-end")}}, {{CSSxRef("grid-column-start")}}, {{CSSxRef("grid-column-end")}} + - : `span` 値を禁止しています。 +- {{CSSxRef("will-change")}} + - : グローバル CSS 値 (`unset`, `initial`, `inherit`) および `will-change`, `auto`, `scroll-position`, `contents` の値を禁止しています。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Valid_identifiers" name="Valid_identifiers">有効な識別子</h3> +### 有効な識別子 -<pre class="notranslate">nono79 アルファベットと数字の組み合わせ + +```plain example-good +nono79 アルファベットと数字の組み合わせ ground-level アルファベットとダッシュの組み合わせ -test ダッシュとそれに続くアルファベット _internal アンダースコアとそれに続くアルファベット \22 toto Unicode 文字とそれに続くアルファベット -bili\.bob ピリオドは正しくエスケープされています -</pre> - -<h3 id="Invalid_identifiers" name="Invalid_identifiers">無効な識別子</h3> - -<pre class="notranslate">34rem 数字で始まってはいけません --12rad ダッシュで始まって数字が続いてはいけません -bili.bob アルファベットと数字以外でエスケープせずに使えるのは _ と - だけです ---toto 2 つのダッシュで始まってはいけません -'bilibob' <string> です -"bilibob" <string> です</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', '#custom-idents', '<code><custom-ident></code>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code><custom-ident></code> for <code>will-change</code>')}}</td> - <td>{{Spec2('CSS Will Change')}}</td> - <td>{{CSSxRef("will-change")}} で除外する値を定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code><custom-ident></code> for <code>list-style-type</code>')}}</td> - <td>{{Spec2('CSS3 Counter Styles')}}</td> - <td>キーワードの有限リストの代わりに <code><custom-ident></code> を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Lists', '#counter-properties', '<code><custom-ident></code> for <code>counter-*</code>')}}</td> - <td>{{Spec2('CSS3 Lists')}}</td> - <td><code><identifier></code> から <code><custom-ident></code> へ改名。使い方を新しい <code>counter-set</code> プロパティへ追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code><custom-ident></code> for <code>animation-name</code>')}}</td> - <td>{{Spec2('CSS3 Animations')}}</td> - <td>{{CSSxRef("animation-name")}} で除外する値を定義。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#custom-idents', '<code><custom-ident></code>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code><identifier></code> から <code><custom-ident></code> へ改名。擬似型とし、除外値の使用を禁止した。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code><identifier></code>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p><em>このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。</em></p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef("<ident>")}}</li> -</ul> +bili\.bob ピリオドが正しくエスケープされている +``` + +### 無効な識別子 + +```plain example-bad +34rem 数字で始まってはいけない +-12rad ダッシュで始まって数字が続いてはいけない +bili.bob アルファベットと数字以外でエスケープせずに使えるのは _ と - だけ +--toto 2 つのダッシュで始まってはいけない +'bilibob' <string> になります +"bilibob" <string> になります +``` + +## 仕様書 + +| 仕様書 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS4 Values', '#custom-idents', '<code><custom-ident></code>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<code><custom-ident></code> for <code>will-change</code>')}} | {{Spec2('CSS Will Change')}} | {{CSSxRef("will-change")}} で除外する値を定義。 | +| {{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<code><custom-ident></code> for <code>list-style-type</code>')}} | {{Spec2('CSS3 Counter Styles')}} | キーワードの有限リストの代わりに `<custom-ident>` を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。 | +| {{SpecName('CSS3 Lists', '#counter-properties', '<code><custom-ident></code> for <code>counter-*</code>')}} | {{Spec2('CSS3 Lists')}} | `<identifier>` から `<custom-ident>` へ改名。使い方を新しい `counter-set` プロパティへ追加。 | +| {{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<code><custom-ident></code> for <code>animation-name</code>')}} | {{Spec2('CSS3 Animations')}} | {{CSSxRef("animation-name")}} で除外する値を定義。 | +| {{SpecName('CSS3 Values', '#custom-idents', '<code><custom-ident></code>')}} | {{Spec2('CSS3 Values')}} | `<identifier>` から `<custom-ident>` へ改名。擬似型とし、除外値の使用を禁止した。 | +| {{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code><identifier></code>')}} | {{Spec2('CSS2.1')}} | 初回定義 | + +## ブラウザーの互換性 + +*このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。* + +## 関連情報 + +- {{CSSxRef("<ident>")}} 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>")}}) diff --git a/files/ja/web/css/frequency-percentage/index.md b/files/ja/web/css/frequency-percentage/index.md index 1280eedabf..1da2a9d136 100644 --- a/files/ja/web/css/frequency-percentage/index.md +++ b/files/ja/web/css/frequency-percentage/index.md @@ -3,91 +3,76 @@ title: <frequency-percentage> slug: Web/CSS/frequency-percentage tags: - CSS - - CSS Data Type - - Data Type - - Reference + - CSS データ型 + - データ型 + - リファレンス - frequency-percentage - - units - - values + - 単位 + - 値 +browser-compat: css.types.frequency-percentage translation_of: Web/CSS/frequency-percentage --- -<div>{{CSSRef}}{{seecompattable}}</div> +{{CSSRef}}{{SeeCompatTable}} -<p><strong><code><frequency-percentage></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{Cssxref("frequency")}} または {{Cssxref("percentage")}} が取りうる値を表します。周波数の値、例えば音声の高さは、現在どの CSS プロパティでも使用されていません。</p> +**`<frequency-percentage>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 {{Cssxref("frequency")}} または {{Cssxref("percentage")}} が取りうる値を表します。周波数の値、例えば音声の高さは、現在どの CSS プロパティでも使用されていません。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code><frequency-percentage></code> の値は {{Cssxref("frequency")}} または {{Cssxref("percentage")}} です。それぞれの構文についての詳細はそれぞれのリファレンスページを参照してください。</p> +`<frequency-percentage>` の値は {{Cssxref("frequency")}} または {{Cssxref("percentage")}} です。それぞれの構文についての詳細はそれぞれのリファレンスページを参照してください。 -<h2 id="Description" name="Description">解説</h2> +## 解説 -<h3 id="Use_in_calc" name="Use_in_calc">calc() での使用</h3> +### calc() での使用 -<p>許可されている型として <code><frequency-percentage></code> が指定されているところでは、これはパーセント値が周期として解決されるので、 <code><a href="/ja/docs/Web/CSS/calc">calc()</a></code> の式で利用することができます。</p> +許可されている型として `<frequency-percentage>` が指定されているところでは、これはパーセント値が周期として解決されるので、 [`calc()`](/ja/docs/Web/CSS/calc()) の式で利用することができます。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Valid_percentage_values" name="Valid_percentage_values">有効なパーセント値</h3> +### 有効なパーセント値 -<pre class="notranslate">90% 正のパーセント値 +``` plain example-good +90% 正のパーセント値 +90% 先頭に + が付いた正のパーセント値 --90% 負のパーセント値 — パーセント値を使用するすべてのプロパティで有効とは限らない</pre> +-90% 負のパーセント値 — パーセント値を使用するすべてのプロパティで有効とは限らない +``` -<h3 id="Invalid_percentage_values" name="Invalid_percentage_values">無効なパーセント値</h3> +### 無効なパーセント値 -<pre class="example-bad notranslate">90 % 数値と単位の間に空白を入れてはいけない。</pre> +```plain example-bad +90 % 数値と単位の間に空白を入れてはいけない。 +``` -<h3 id="Valid_frequency_values" name="Valid_frequency_values">有効な周波数値</h3> +### 有効な周波数値 -<pre class="notranslate">12Hz 正の整数 +``` plain example-good +12Hz 正の整数 4.3Hz 整数以外 14KhZ 単位は大文字小文字の区別がないが、 SI 以外の大文字小文字の使い分けは推奨しない。 +0Hz 先頭に + が付いた単位付きのゼロ --0kHz 先頭に - が付いた単位付きのゼロ</pre> +-0kHz 先頭に - が付いた単位付きのゼロ +``` -<h3 id="Invalid_frequency_values" name="Invalid_frequency_values">無効な周波数値</h3> +### 無効な周波数値 -<pre class="example-bad notranslate">12.0 これは単位がないため <number> であり <frequency> ではない。 +```plain example-bad +12.0 これは単位がないため <number> であり <frequency> ではない。 7 Hz 数値と単位の間に空白を入れてはいけない。 -0 単位のないゼロは <length> では許可されることがあるが、 <frequency> では無効。</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', '#mixed-percentages', '<frequency-percentage>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#mixed-percentages', '<frequency-percentage>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code><frequency-percentage></code> を定義。 <code>calc()</code> を追加</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.frequency-percentage")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS データ型</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a></li> - <li>関連する CSS データ型: - <ul> - <li>{{cssxref("frequency", "<frequency>")}}</li> - <li>{{cssxref("percentage", "<percentage>")}}</li> - </ul> - </li> -</ul> +0 単位のないゼロは <length> では許可されることがあるが、<frequency> では無効。 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS データ型](/ja/docs/Web/CSS/CSS_Types) +- [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units) +- 関連する CSS データ型: + + - {{cssxref("frequency", "<frequency>")}} + - {{cssxref("percentage", "<percentage>")}} diff --git a/files/ja/web/css/frequency/index.md b/files/ja/web/css/frequency/index.md index a286230b03..5aad2f1da8 100644 --- a/files/ja/web/css/frequency/index.md +++ b/files/ja/web/css/frequency/index.md @@ -4,71 +4,60 @@ slug: Web/CSS/frequency tags: - CSS - CSS データ型 - - CSS 値と単位 - - Layout - - Reference + - データ型 + - リファレンス + - ウェブ +browser-compat: css.types.frequency translation_of: Web/CSS/frequency --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS" title="CSS">CSS</a> の <strong><code><frequency></code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、話し声の高さなどの周波数の値を表します。今のところ、どの CSS プロパティでも使われていません。</p> +**`<frequency>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、話し声の高さなどの周波数の値を表します。今のところ、どの CSS プロパティでも使われていません。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code><frequency></code> データ型は、 {{cssxref("<number>")}} とその後に以下に挙げる単位のうちの一つから成ります。他の CSS の数値と同様、単位と数値の間には空白を置きません。</p> +`<frequency>` データ型は、 {{cssxref("<number>")}} とその後に以下に挙げる単位のうちの一つから成ります。他の CSS の数値と同様、単位と数値の間には空白を置きません。 -<h3 id="Units" name="Units">単位</h3> +### 単位 -<dl> - <dt><code><a id="Hz" name="Hz">Hz</a></code></dt> - <dd>ヘルツ単位の周波数を表します。例： <code>0Hz</code>、 <code>1500Hz</code>、 <code>10000Hz</code></dd> - <dt><code><a id="kHz" name="kHz">kHz</a></code></dt> - <dd>キロヘルツ単位の周波数を表します。例： <code>0kHz</code>、 <code>1.5kHz</code>、 <code>10kHz</code></dd> -</dl> +- `Hz` + - : 周波数をヘルツで表します。例： `0Hz`、 `1500Hz`、 `10000Hz` +- `kHz` + - : 周波数をキロヘルツで表します。例： `0kHz`、 `1.5kHz`、 `10kHz` -<div class="note"> -<p><strong>メモ:</strong> <code>0</code> の数値は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 <code>0</code> は無効で <code>0Hz</code> や <code>0kHz</code> を表すものではありません。単位の大文字と小文字は区別されませんが、<a href="http://ja.wikipedia.org/wiki/%E5%9B%BD%E9%9A%9B%E5%8D%98%E4%BD%8D%E7%B3%BB">国際単位系</a>の表記に従って、 <code>Hz</code> や <code>kHz</code> の H を大文字にするのが良い習慣です。</p> -</div> +> **Note:** `0` の数値は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 `0` は無効で `0Hz` や `0kHz` を表すものではありません。単位の大文字と小文字は区別されませんが、[国際単位系](http://ja.wikipedia.org/wiki/%E5%9B%BD%E9%9A%9B%E5%8D%98%E4%BD%8D%E7%B3%BB)の表記に従って、 `Hz` や `kHz` の H を大文字にするのが良い習慣です。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Valid_frequency_values" name="Valid_frequency_values">有効な周波数の値</h3> +### 有効な周波数の値 -<pre>12Hz 正の整数 +```plain example-good +12Hz 正の整数 4.3Hz 非整数 14KhZ 単位は大文字小文字を区別しません（ただ、国際単位系の表記が推奨されます） +0Hz 先行する + のあるゼロと単位 --0kHz 先行する - のあるゼロと単位</pre> - -<h3 id="Invalid_frequency_values" name="Invalid_frequency_values">無効な周波数の値</h3> - -<pre class="example-bad">12.0 これは {{cssxref("<number>")}} で、<frequency> ではありません。単位が必須です。 -7 Hz {{cssxref("<number>")}} と単位の間に空白を置いてはいけません -0 単位のないゼロは {{cssxref("<length>")}} では利用できますが、 <frequency> では無効です。</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('CSS3 Values', '#frequency', '<frequency>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>メモ:</strong> このデータ型は初め、 <a href="https://www.w3.org/TR/CSS2/">CSS Level 2</a> の現在は廃止された <a href="/ja/docs/Web/CSS/@media/aural" title="aural">aural</a> <a href="/ja/docs/Web/CSS/@media#Media_types">メディアタイプ</a>で、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で <code><frequency></code> データ型が再導入されました。</p> -</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.types.frequency")}}</p> +-0kHz 先行する - のあるゼロと単位 +``` + +### 無効な周波数の値 + +```plain example-bad +12.0 これは <number> であり、<frequency> ではありません。単位が必須です。 +7 Hz 数値と単位の間に空白を置いてはいけません +0 単位のないゼロは <length> では利用できますが、<frequency> では無効です。 +``` + +## 仕様書 + +{{Specifications}} + +> **Note:** このデータ型は初め、 [CSS Level 2](https://www.w3.org/TR/CSS2/) の現在は廃止された [aural](/ja/docs/Web/CSS/@media/aural) [メディアタイプ](/ja/docs/Web/CSS/@media#media_types)で、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で `<frequency>` データ型が再導入されました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<frequency-percentage>")}} +- [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units) diff --git a/files/ja/web/css/image/index.md b/files/ja/web/css/image/index.md index 28a716953c..4f97610601 100644 --- a/files/ja/web/css/image/index.md +++ b/files/ja/web/css/image/index.md @@ -3,12 +3,12 @@ title: <image> slug: Web/CSS/image tags: - CSS - - CSS Data Type + - CSS データ型 - CSS 画像 - - Data Type + - データ型 - グラフィック - - Layout - - Reference + - レイアウト + - リファレンス - ウェブ browser-compat: css.types.image translation_of: Web/CSS/image @@ -36,7 +36,6 @@ CSS はさまざま種類の画像を扱うことができます。 - 単一のファイルの中に複数のバージョンが存在する、*複数の自身の寸法*を持つ画像。 (この場合、自身の寸法は領域に収まる最も大きな画像であり、かつ縦横比が包含ボックスに最も近いものになります。) - SVG またはその他の[ベクター形式](https://ja.wikipedia.org/wiki/ベクター画像)の画像のように、自身の寸法を持たないが、幅と高さの間に自身の縦横比のある画像。 - CSS グラデーションなど、*自身の寸法がなく、固有の縦横比もない*画像。 -</ul> CSS はオブジェクトの*実際の*寸法を、 (1) *自身の寸法*、 (2) CSS の {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} などのプロパティで定義された*指定の寸法*、 (3) 画像が使用されるプロパティの種類によって指定された、以下のような*既定の寸法*によって特定します。 diff --git a/files/ja/web/css/integer/index.md b/files/ja/web/css/integer/index.md index 2d4976e00e..fecb76f41d 100644 --- a/files/ja/web/css/integer/index.md +++ b/files/ja/web/css/integer/index.md @@ -4,39 +4,39 @@ slug: Web/CSS/integer tags: - CSS - CSS データ型 - - Reference - - Web + - リファレンス + - ウェブ translation_of: Web/CSS/integer --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code><integer></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{cssxref("number")}} の特殊型であり、正と負の整数を表現します。 integer は {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} など、数多くの CSS プロパティで使用することができます。</p> +**`<integer>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 {{cssxref("number")}} の特殊型であり、正と負の整数を表現します。整数は {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} など、数多くの CSS プロパティで使用することができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code><integer></code> データ型は数桁の10進数、 0 から 9 までを含み、任意でその前に単一の <code>+</code> または <code>-</code> の符号が付きます。 integer に関連付けられた単位はありません。</p> +`<integer>` データ型は 1 桁から数桁の 10 進数、 0 から 9 までを含み、任意でその前に単一の `+` または `-` の符号が付きます。整数に関連付けられた単位はありません。 -<div class="note">公式には、有効な <code><integer></code> 値の範囲は決められていません。 Opera では 2<sup>15</sup>-1、 IE では2<sup>20</sup>-1 まで、その他のブラウザーではそれ以上の値に対応しています。 CSS3 Values の策定中には対応すべき最小範囲について多くの議論がありました。 <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">LC 段階の 2012 年 4 月の最新の決定</a>では、 [-2<sup>27</sup>-1; 2<sup>27</sup>-1] でしたが、# しかし 2<sup>24</sup>-1 や 2<sup>30</sup>-1 のような他の値も<a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">提案されていました</a>。しかし、最新の仕様書では範囲を定めなくなりました。</div> +> **Note:** 公式には、有効な `<integer>` 値の範囲は決められていません。 Opera では 2^15 - 1、 IE では2^20 - 1 まで、その他のブラウザーではそれ以上の値に対応しています。 CSS3 Values の策定中には対応すべき最小範囲について多くの議論がありました。 [LC 段階の 2012 年 4 月の最新の決定](https://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html)では、 [-2^27 - 1; 2^27 - 1] でしたが、しかし 2^24 - 1 や 2^30 - 1 のような他の値も[提案されていました](https://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html)。しかし、最新の仕様書では範囲を定めなくなりました。 -<h2 id="Interpolation" name="Interpolation">補間</h2> +## 補間 -<p>アニメーション時には、 <code><integer></code> データ型の値は離散的に整数を使用して補間されます。実数、すなわち浮動小数点で計算が行われた場合、離散値は <a href="http://ja.wikipedia.org/wiki/%E5%BA%8A%E9%96%A2%E6%95%B0%E3%81%A8%E5%A4%A9%E4%BA%95%E9%96%A2%E6%95%B0">floor 関数</a>を使って求められます。補間の速度は、アニメーションに結びつけられた <a href="/ja/docs/Web/CSS/timing-function">timing function</a> で決められます。</p> +アニメーション時には、 `<integer>` データ型の値は離散的に整数を使用して補間されます。実数、すなわち浮動小数点で計算が行われた場合、離散値は [floor 関数](https://ja.wikipedia.org/wiki/%E5%BA%8A%E9%96%A2%E6%95%B0%E3%81%A8%E5%A4%A9%E4%BA%95%E9%96%A2%E6%95%B0)を使って求められます。補間の速度は、アニメーションに結びつけられた[タイミング関数](/ja/docs/Web/CSS/easing-function)で決められます。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Valid_integers" name="Valid_integers">妥当な integer の値</h3> +### 有効な整数 -<pre>12 正の整数 (先頭の + なし) -+123 正の整数 (先頭の + あり) --456 負の整数 -0 ゼロ -+0 ゼロ、先頭の + つき --0 ゼロ、先頭の - なし -</pre> + 12 正の整数 (先頭の + なし) + +123 正の整数 (先頭の + あり) + -456 負の整数 + 0 ゼロ + +0 ゼロ、先頭の + つき + -0 ゼロ、先頭の - なし -<h3 id="Invalid_integers" name="Invalid_integers">不正な integer の値</h3> +### 無効な整数 -<pre>12.0 整数を表していますが、これは <number> であり、<integer> ではありません。 +```plain example-bad +12.0 整数を表していますが、これは <number> であり、<integer> ではありません。 12. 小数点を含んではいけません。 +---12 先頭に置ける +/- は 1 つだけです。 ten 文字は使えません。 @@ -44,50 +44,16 @@ _5 記号は使えません。 \35 エスケープを使った Unicode 文字は、それが整数を表す場合でも (これは 5 です) 使えません。 \4E94 アラビア数字以外の数字は使えません (これは日本語の「五」です)。 3e4 指数表記は使えません。 -</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', '#integers', '<integer>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td>重要な変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#integers', '<integer>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>重要な変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>明示的な定義</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '', '<integer>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>暗黙的な定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.types.integer")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("<number>")}}</li> -</ul> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<number>")}} diff --git a/files/ja/web/css/length-percentage/index.md b/files/ja/web/css/length-percentage/index.md index 1a6ef60dc7..1ee1b49f63 100644 --- a/files/ja/web/css/length-percentage/index.md +++ b/files/ja/web/css/length-percentage/index.md @@ -3,57 +3,82 @@ title: <length-percentage> slug: Web/CSS/length-percentage tags: - CSS - - CSS Data Type - CSS データ型 - - Reference + - データ型 + - リファレンス - length-percentage - - units - - values - - 値 - 単位 + - 値 +browser-compat: css.types.length-percentage translation_of: Web/CSS/length-percentage --- -<div>{{CSSRef}}</div> - -<p><strong><code><length-percentage></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{Cssxref("length")}} または {{Cssxref("percentage")}} が取りうる値を表します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>この型に利用できる個々の構文の詳細は、 {{Cssxref("length")}} および {{Cssxref("percentage")}} の文書を参照してください。</p> - -<h2 id="Use_in_calc()" name="Use_in_calc()">calc() での使用</h2> - -<p>許可されている型として <code><length-percentage></code> が指定されているところでは、これはパーセント値が長さとして解決されるので、 <code><a href="/ja/docs/Web/CSS/calc">calc()</a></code> の式で利用することができます。したがって、以下のすべての値が {{Cssxref("width")}} で利用できます。</p> - -<pre class="syntaxbox example-good">width: 200px -width: 20% -width: calc(100% - 200px) -</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', '#mixed-percentages', '<length-percentage>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#mixed-percentages', '<length-percentage>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code><length-percentage></code> を定義。 <code>calc()</code> を追加</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.types.length-percentage")}}</p> +{{CSSRef}} + +**`<length-percentage>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 {{Cssxref("length")}} または {{Cssxref("percentage")}} が取りうる値を表します。 + +## 構文 + +この型に利用できる個々の構文の詳細は、 {{Cssxref("length")}} および {{Cssxref("percentage")}} の文書を参照してください。 + +## 例 + +<h3 id="length-percentage_examples">length-percentage の例</h3> + +以下の簡単な例では、`<length-percentage>` の値を使用するいくつかのプロパティを示しています。 + +#### HTML + +```html +<p>パーセント値や長さは様々な場面で使うことができます。</p> +``` + +#### CSS + +```css +p { + /* length-percentage の例 */ + width: 75%; + height: 200px; + margin: 3rem; + padding: 1%; + border-radius: 10px 10%; + font-size: 250%; + line-height: 1.5em; + + /* length の例 */ + text-shadow: 1px 1px 1px red; + border: 5px solid red; + letter-spacing: 3px; + + /* percentage example */ + text-size-adjust: 20%; +} +``` + +#### 結果 + +{{EmbedLiveSample('length-percentage_examples', '100%', 320)}} + +### calc() での使用 + +許可されている型として `<length-percentage>` が指定されているところでは、これはパーセント値が長さとして解決されるので、 {{cssxref("calc()")}} の式で利用することができます。したがって、以下のすべての値が {{Cssxref("width")}} で利用できます。 + +```css example-good +width: 200px; +width: 20%; +width: calc(100% - 200px); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<percentage>")}} +- {{cssxref("<length>")}} +- [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units) diff --git a/files/ja/web/css/length/index.md b/files/ja/web/css/length/index.md index 2a08df09c4..c82644aa9d 100644 --- a/files/ja/web/css/length/index.md +++ b/files/ja/web/css/length/index.md @@ -3,11 +3,11 @@ title: <length> slug: Web/CSS/length tags: - CSS - - CSS Data Type - - Data Type - - Layout - - Reference - - Web + - CSS データ型 + - データ型 + - レイアウト + - リファレンス + - ウェブ - length browser-compat: css.types.length translation_of: Web/CSS/length @@ -73,7 +73,6 @@ translation_of: Web/CSS/length - : `vw` と `vh` の小さい方です。 - `vmax` - : `vw` と `vh` の大きい方です。 -</dl> #### 絶対的な長さの単位 @@ -81,7 +80,7 @@ translation_of: Web/CSS/length 低解像度の端末では、`px` の単位が物理的な*参照ピクセル*を表し、その他の単位はこれを基準に定義されます。例えば `1in` は `96px` と定義され、これは `72pt` と等しくなります。このような端末では結果的に、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) といった単位で表される長さは、同名の物理的な単位と同じ長さになるとは限りません。</p> -<p>高解像度の端末では、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) は対応する物理的な単位と同じになります。従って、 `px` の単位は、それ (1 インチの 1/96) を基準に定義されます。</p> +高解像度の端末では、インチ (`in`)、センチメートル (`cm`)、ミリメートル (`mm`) は対応する物理的な単位と同じになります。従って、 `px` の単位は、それ (1 インチの 1/96) を基準に定義されます。 > **Note:** たくさんのユーザーが、テキストが読みやすくなるよう{{glossary("user agent", "ユーザーエージェント")}}の既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 `font-size` を設定する場合には、 (`em` や `rem` のような) 相対的な単位が適しています。 diff --git a/files/ja/web/css/max()/index.md b/files/ja/web/css/max()/index.md index cca3cfc571..1d5a961416 100644 --- a/files/ja/web/css/max()/index.md +++ b/files/ja/web/css/max()/index.md @@ -3,115 +3,98 @@ title: max() slug: Web/CSS/max() tags: - CSS - - CSS Function + - CSS 関数 - Calculate - Compute - - Function - - Layout - - Reference - - Web + - 関数 + - レイアウト + - リファレンス + - ウェブ - max browser-compat: css.types.max translation_of: Web/CSS/max() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>max()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 <code>max()</code> 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。</p> +**`max()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 `max()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。 -<div>{{EmbedInteractiveExample("pages/css/function-max.html")}}</div> +{{EmbedInteractiveExample("pages/css/function-max.html")}} -<p>上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 <code>max()</code> の値はプロパティが取りうる<em>最小の</em>値を提供するものとして考えてください。</p> +上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 `max()` の値はプロパティが取りうる<em>最小の</em>値を提供するものとして考えてください。 -<h2 id="Syntax">構文</h2> +## 構文 -<p><code>max()</code> 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。</p> +`max()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。 -<p>式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や <code>max()</code> 関数を用いることができます。</p> +式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や `max()` 関数を用いることができます。 -<p>式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。</p> +式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 -<h3 id="Notes">メモ</h3> +## メモ -<ul> - <li>表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも <code>auto</code> が指定されていたかのように扱われる<em>可能性があります</em>。</li> - <li><code>min()</code> や他の <code>max()</code> 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 <code>calc()</code> 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。</li> - <li>式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <code><length></code> 構文値を使用できます。</li> - <li><code>min()</code> と <code>max()</code> の値を組み合わせたり、 <code>max()</code> を <code>clamp()</code> や <code>calc()</code> 関数の中で使用したりすることができます (そしてよく必要になります)。</li> -</ul> +- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。 +- `min()` や他の `max()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 +- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `<length>` 構文値を使用できます。 +- `min()` と `max()` の値を組み合わせたり、 `max()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 -<h3 id="Formal_syntax">形式文法</h3> +### 形式文法 {{CSSSyntax}} -<h2 id="Examples">例</h2> +## 例 <h3 id="Setting_a_minimum_size_for_a_font">フォントに最小値を設定する</h3> -<p>CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。</p> +CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。 -<p>多少の CSS を見てみましょう。</p> +多少の CSS を見てみましょう。 -<pre class="brush: css;">h1 { +```css +h1 { font-size: 2rem; } h1.responsive { font-size: max(4vw, 2em, 2rem); } -</pre> +``` -<p>フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。</p> +フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。 -<pre class="brush: html;"><h1>This text is always legible, but doesn't change size</h1> -<h1 class="responsive">This text is always legible, and is responsive, to a point</h1> -</pre> +```html +<h1>このテキストは常に読みやすいですが、サイズは変わりません。</h1> +<h1 class="responsive">このテキストは、常に読みやすく、ある意味でレスポンシブです。</h1> +``` -<p>{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}</p> +{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}} -<p><code>max()</code> 関数はプロパティに許される最小値を探るものと考えてください。</p> +`max()` 関数はプロパティに許される最小値を探るものと考えてください。 <h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> -<p><code>max()</code> を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を <code>max()</code> の中で入れ子にして使用し、その二番目の値として常に十分な大きさの<a href="/ja/docs/Web/CSS/Length#relative_length_units">相対的な長さの単位</a>を持つようにします。</p> +`max()` を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を `max()` の中で入れ子にして使用し、その二番目の値として常に十分な大きさの[相対的な長さの単位](/ja/docs/Web/CSS/length#相対的な長さの単位)を持つようにします。 -<pre class="brush: css;">small { +```css +small { font-size: max(min(0.5vw, 0.5em), 1rem); -}</pre> - -<p>これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは <em>1rem</em> になります。</p> - -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="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", "#funcdef-max", "max()")}}</td> - <td>{{Spec2("CSS4 Values")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef("calc()", "calc()")}}</li> - <li>{{CSSxRef("clamp()", "clamp()")}}</li> - <li>{{CSSxRef("min()", "min()")}}</li> - <li><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS 値</a></li> -</ul> +} +``` + +これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは _1rem_ になります。 + +- [MDN Understanding WCAG, Guideline 1.4 explanations](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("calc()", "calc()")}} +- {{CSSxRef("clamp()", "clamp()")}} +- {{CSSxRef("min()", "min()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/min()/index.md b/files/ja/web/css/min()/index.md index c696ddf104..94f0d57623 100644 --- a/files/ja/web/css/min()/index.md +++ b/files/ja/web/css/min()/index.md @@ -3,72 +3,61 @@ title: min() slug: Web/CSS/min() tags: - CSS - - CSS Function - CSS 関数 - Calculate - Compute - - Function - - Layout - - Reference + - 関数 + - レイアウト + - リファレンス - min +browser-compat: css.types.min translation_of: Web/CSS/min() --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>min()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 <code>min()</code> 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。</p> +**`min()`** は [CSS](/ja/docs/Web/CSS) 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 `min()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。 -<pre class="brush: css; no-line-numbers">/* プロパティ: min(式 [, 式]) */ -width: min(10vw, 4em, 80px); -</pre> +{{EmbedInteractiveExample("pages/css/function-min.html")}} -<p>上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 <code>min()</code> の値はプロパティが取りうる<em>最大の</em>値を提供するものとして考えてください。</p> +上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 `min()` の値はプロパティが取りうる*最大の*値を提供するものとして考えてください。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code>min()</code> 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。</p> +`min()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。 -<p>式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr", "attr()")}} などのその他の式にすることができます。</p> +式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr()")}} などのその他の式にすることができます。 -<p>必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。</p> +必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 -<h3 id="Notes" name="Notes">メモ</h3> +### メモ -<ul> - <li>表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも <code>auto</code> が指定されていたかのように扱われる<em>可能性があります</em>。</li> - <li><code>max()</code> や他の <code>min()</code> 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 <code>calc()</code> 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。</li> - <li>式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <code><length></code> 構文値を使用できます。</li> - <li><code>min()</code> と <code>max()</code> の値を組み合わせたり、 <code>min()</code> を <code>clamp()</code> や <code>calc()</code> 関数の中で使用したりすることができます (そしてよく必要になります)。</li> - <li>複数の制約を適用する場合は、3つ以上の引数を与えることができます。</li> -</ul> +- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる<em>可能性があります</em>。 +- `max()` や他の `min()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 +- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `<length>` 構文値を使用できます。 +- `min()` と `max()` の値を組み合わせたり、 `min()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 +- 複数の制約を適用する場合は、3 つ以上の引数を与えることができます。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +### 形式文法 {{CSSSyntax}} -<h2 id="Examples" name="Examples">例</h2> +## アクセシビリティの考慮 -<h3 id="Growing_images_to_a_maximum_size" name="Growing_images_to_a_maximum_size">最大サイズまで広がる画像</h3> +`min()` を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。 -<p><code>min()</code> を使用すると、画像の<strong>最大</strong>幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は小さい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。</p> +- [MDN WCAG を理解する、ガイドライン 1.4 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) -<pre class="brush: css;">.logo { - width: min(50vw, 300px); -} -</pre> - -<pre class="brush: html;"><img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"></pre> - -<p>{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "110")}}</p> - -<p>この例では、ロゴの幅はビューポートが 600px 未満まで狭くならない限り 300px になり、ここからビューポートの幅の 50% を保ちながら、ビューポートが縮小するに従って縮小します。</p> +## 例 -<h3 id="Setting_a_maximum_size_for_a_label_and_input" name="Setting_a_maximum_size_for_a_label_and_input">ラベルと入力欄のために最大値を設定する</h3> +<h3 id="Setting_a_maximum_size_for_a_label_and_input" >ラベルと入力欄のために最大値を設定する</h3> -<p>CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。</p> +CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。 -<p>いくらか CSS を見てください。</p> +いくらか CSS を見てください。 -<pre class="brush: css;">input, label { +```css +input, label { padding: 2px; box-sizing: border-box; display: inline-block; @@ -81,57 +70,30 @@ form { border: 1px solid black; padding: 4px; } -</pre> - -<p>ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。</p> - -<pre class="brush: html"><form> - <label>Type something:</label> - <input type="text"> -</form> -</pre> - -<p>{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> +``` -<p><code>min()</code> を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。</p> +ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。 -<pre class="brush: css;"></pre> +```html +<form> + <label>Type something:</label> + <input type="text"> +</form> +``` -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> -</ul> +{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}} -<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", "#calc-notation", "min()")}}</td> - <td>{{Spec2("CSS4 Values")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.types.min")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{CSSxRef("calc", "calc()")}}</li> - <li>{{CSSxRef("clamp", "clamp()")}}</li> - <li>{{CSSxRef("max", "max()")}}</li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値</a></li> -</ul> +- {{CSSxRef("calc()")}} +- {{CSSxRef("clamp()")}} +- {{CSSxRef("max()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/number/index.md b/files/ja/web/css/number/index.md index cef3982e3b..2e94d16912 100644 --- a/files/ja/web/css/number/index.md +++ b/files/ja/web/css/number/index.md @@ -4,87 +4,57 @@ slug: Web/CSS/number tags: - CSS - CSS データ型 - - Number - - Reference - - ウェブ + - データ型 - レイアウト - - 数値 + - リファレンス + - ウェブ +browser-compat: css.types.number translation_of: Web/CSS/number --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code><number></code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、整数または小数部分のある数値を表します。</p> +[CSS](/ja/docs/Web/CSS) の **`<number>`** [データ型](/ja/docs/Web/CSS/CSS_Types)は、整数または小数部分のある数値を表します。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code><number></code> の構文は {{CSSxRef("<integer>")}} 構文を拡張したものです。小数は <code>.</code> と続く1桁以上の10進数で表し、整数部に追加することができます。数値に関連付けられた単位はありません。</p> +`<number>` の構文は {{CSSxRef("<integer>")}} 構文を拡張したものです。小数は `.` と続く1桁以上の10進数で表し、整数部に追加することができます。数値に関連付けられた単位はありません。 -<h2 id="Interpolation" name="Interpolation">補間</h2> +## 補間 -<p><code><number></code> データ型の値はアニメーション用に補間可能です。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられた <a href="/ja/docs/Web/CSS/single-transition-timing-function">timing function</a> で決められます。</p> +`<number>` データ型の値はアニメーション用に補間可能です。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられた[タイミング関数](/ja/docs/Web/CSS/easing-function)で決められます。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="有効な数値">有効な数値</h3> +### 有効な数値 -<pre class="syntaxbox example-good">12 生の <integer> は <number> でもある +```css example-good +12 生の <integer> は <number> でもある 4.01 正の実数 -456.8 負の実数 0.0 ゼロ +0.0 + に続くゼロ -0.0 - に続くゼロ .60 前のゼロがない小数値 -10e3 Scientific notation --3.4e-2 Complicated scientific notation -</pre> +10e3 指数表記 +-3.4e-2 複雑な指数表記 +``` -<h3 id="Invalid_numbers" name="Invalid_numbers">無効な数値</h3> +### 無効な数値 -<pre class="syntaxbox example-bad">12. 小数点の後ろには数字が続かなくてはなりません +```css example-bad +12. 小数点の後ろには数字が続かなくてはなりません +-12.2 前に置ける +/- は 1 つだけです 12.1.1 小数点は1つしか置けません -</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", "#numbers", "<number>")}}</td> - <td>{{Spec2("CSS4 Values")}}</td> - <td>重要な変更なし</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Values", "#numbers", "<number>")}}</td> - <td>{{Spec2("CSS3 Values")}}</td> - <td>重要な変更なし</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "syndata.html#numbers", "<number>")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>明示的な定義</td> - </tr> - <tr> - <td>{{SpecName("CSS1", "", "<number>")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>暗黙的な定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.number")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{CSSxRef("<integer>")}}</li> -</ul> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("<integer>")}} diff --git a/files/ja/web/css/percentage/index.md b/files/ja/web/css/percentage/index.md index ca4ed73a96..584541b38d 100644 --- a/files/ja/web/css/percentage/index.md +++ b/files/ja/web/css/percentage/index.md @@ -3,92 +3,70 @@ title: <percentage> slug: Web/CSS/percentage tags: - CSS - - CSS Data Type - - Data Type - - Layout - - Reference - - Web + - CSS データ型 + - データ型 + - レイアウト + - リファレンス + - ウェブ +browser-compat: css.types.percentage translation_of: Web/CSS/percentage --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code><percentage></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 {{CSSxRef("width")}}、 {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}、 {{CSSxRef("font-size")}} など、たくさんのプロパティでパーセント値を使うことができます。</p> +**`<percentage>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 {{CSSxRef("width")}}、 {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}、 {{CSSxRef("font-size")}} など、たくさんのプロパティでパーセント値を使うことができます。 -<div class="note"><strong>注:</strong> 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 ({{CSSxRef("<length>")}} 値に向けたピクセル単位の幅など) にのみアクセスできます。</div> +> **Note:** 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 ({{CSSxRef("<length>")}} 値に向けたピクセル単位の幅など) にのみアクセスできます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code><percentage></code> データ型は、 {{CSSxRef("<number>")}} とそれに続くパーセント記号 (<code>%</code>) から成ります。任意で、先行して符号 (<code>+</code> または <code>-</code>) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。</p> +`<percentage>` データ型は、 {{CSSxRef("<number>")}} とそれに続くパーセント記号 (`%`) から成ります。任意で、先行して符号 (`+` または `-`) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。 -<h2 id="Interpolation" name="Interpolation">補間</h2> +## 補間 -<p>アニメーションをする時、 <code><percentage></code> データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられた<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>で定義します。</p> +アニメーションをする時、 `<percentage>` データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられた[タイミング関数](/ja/docs/Web/CSS/easing-function)で定義します。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Width_and_margin-left" name="Width_and_margin-left">幅と左マージン</h3> +<h3 id="Width_and_margin-left">幅と左マージン</h3> -<pre class="brush: html notranslate"><div style="background-color:navy;"> - <div style="width:50%; margin-left:20%; background-color:chartreuse;"> +```html +<div style="background-color:navy;"> + <div style="width:50%; margin-left:20%; background-color:chartreuse;"> Width: 50%, Left margin: 20% - </div> - <div style="width:30%; margin-left:60%; background-color:pink;"> + </div> + <div style="width:30%; margin-left:60%; background-color:pink;"> Width: 30%, Left margin: 60% - </div> -</div> -</pre> - -<p>以上の HTML は以下のような出力になります。</p> - -<p>{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}</p> - -<h3 id="Font-size" name="Font-size">font-size</h3> - -<pre class="brush: html notranslate"><div style="font-size:18px;"> - <p>Full-size text (18px)</p> - <p><span style="font-size:50%;">50% (9px)</span></p> - <p><span style="font-size:200%;">200% (36px)</span></p> -</div> -</pre> - -<p>以上の HTML は以下のような出力になります。</p> - -<p>{{EmbedLiveSample('Font-size', 'auto', 160)}}</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', '#percentages', '<percentage>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td>目立った変更はなし。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>CSS Level 2 (Revision 1) から目立った変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>CSS Level 1 から変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#percentage-units', '<percentage>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.percentage")}}</p> + </div> +</div> +``` + +以上の HTML は以下のような出力になります。 + +{{EmbedLiveSample('Width_and_margin-left', '600', 140)}} + +<h3 id="Font-size">font-size</h3> + +```html +<div style="font-size:18px;"> + <p>Full-size text (18px)</p> + <p><span style="font-size:50%;">50% (9px)</span></p> + <p><span style="font-size:200%;">200% (36px)</span></p> +</div> +``` + +以上の HTML は以下のような出力になります。 + +{{EmbedLiveSample('Font-size', 'auto', 160)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<length-percentage>")}} +- [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units) diff --git a/files/ja/web/css/position_value/index.md b/files/ja/web/css/position_value/index.md index 0969fd97b3..160e564f85 100644 --- a/files/ja/web/css/position_value/index.md +++ b/files/ja/web/css/position_value/index.md @@ -3,134 +3,99 @@ title: <position> slug: Web/CSS/position_value tags: - CSS - - CSS Data Type - CSS データ型 - - Data Type - - Layout - - Reference - - Web - データ型 + - レイアウト + - リファレンス + - ウェブ +browser-compat: css.types.position translation_of: Web/CSS/position_value --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code><position></code></strong> (または <strong><code><bg-position></code></strong>) は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。</p> +**`<position>`** (または **`<bg-position>`**) は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types)で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。 -<div class="note"> -<p><strong>注:</strong> <code><position></code> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。</p> -</div> +> **Note:** `<position>` 値で記述される最終的な位置は、要素ボックスの中である必要はありません。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;">The <code><position></code> データ型は1～2つのキーワードと、任意のオフセットで定義されます。</p> +`<position>` データ型は 1 ～ 2 つのキーワードと、任意のオフセットで定義されます。 -<p>キーワード値は <code>center</code>、 <code>top</code>、 <code>right</code>、 <code>bottom</code>、 <code>left</code> です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 <code>center</code> は左右の辺の中心か、上下の辺の中心を表します。</p> +キーワード値は `center`、 `top`、 `right`、 `bottom`、 `left` です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 `center` は左右の辺の中心か、上下の辺の中心を表します。 -<p>オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。</p> +オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。 -<p>単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の <code>center</code> に設定されます。</p> +単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の `center` に設定されます。 -<pre class="brush:css notranslate">/* 値1つの構文 */ -<var>keyword</var> /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */ -<var>value</var> /* X 座標の位置。 Y 座標は既定値の 50% になる */ +```css +/* 値 1 つの構文 */ +keyword /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */ +value /* X 座標の位置。 Y 座標は既定値の 50% になる */ -/* 値2つの構文 */ -<var>keyword</var> <var>keyword</var> /* それぞれの方向のキーワード（順不同） */ -<var>keyword</var> <var>value</var> /* キーワードで定義された辺からのオフセット */ -<var>value</var> <var>keyword</var> /* 水平位置を表す値、垂直位置を表すキーワード */ -<var>value</var> <var>value</var> /* それぞれの方向（水平、垂直）の距離の値 */ +/* 値 2 つの構文 */ +keyword keyword /* それぞれの方向のキーワード（順不同） */ +keyword value /* キーワードで定義された辺からのオフセット */ +value keyword /* 水平位置を表す値、垂直位置を表すキーワード */ +value value /* それぞれの方向（水平、垂直）の距離の値 */ -/* 値4つの構文 */ -<var>keyword</var> <var>value</var> <var>keyword</var> <var>value</var> /* それぞれの値はその前のキーワードからのオフセット */ -</pre> +/* 値 4 つの構文 */ +keyword value keyword value /* それぞれの値はその前のキーワードからのオフセット */ +``` -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +### 形式文法 -<pre class="syntaxbox notranslate">[ +```css +[ [ left | center | right ] || [ top | center | bottom ] | - [ left | center | right | <length> | <percentage> ] - [ top | center | bottom | <length> | <percentage> ]? + [ left | center | right | <length> | <percentage> ] + [ top | center | bottom | <length> | <percentage> ]? | - [ [ left | right ] [ <length> | <percentage> ] ] && - [ [ top | bottom ] [ <length> | <percentage> ] ] + [ [ left | right ] [ <length> | <percentage> ] ] && + [ [ top | bottom ] [ <length> | <percentage> ] ] ] -</pre> +``` -<div class="blockIndicator note"> -<p><strong>注</strong>: {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは <code><position></code> を使用する他のプロパティでは許可されません。</p> -</div> +> **Note:** {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは `<position>` を使用する他のプロパティでは許可されません。 -<h2 id="Interpolation" name="Interpolation">補間</h2> +## 補間 -<p>アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つの<a href="/ja/docs/Web/CSS/single-transition-timing-function">タイミング関数</a>が用いられるため、座標は直線に移動します。</p> +アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つの[タイミング関数](/ja/docs/Web/CSS/easing-function)が用いられるため、座標は直線に移動します。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Valid_positions" name="Valid_positions">有効な位置</h3> +### 有効な位置 -<pre class="notranslate">center -left -center top + center + left + center top -right 8.5% -bottom 12vmin right -6px + right 8.5% + bottom 12vmin right -6px -10% 20% -8rem 14px -</pre> + 10% 20% + 8rem 14px -<h3 id="Invalid_positions" name="Invalid_positions">無効な位置</h3> +### 無効な位置 -<pre class="example-bad notranslate">left right +```plain example-bad +left right bottom top 10px 15px 20px 15px -</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('CSS3 Values', '#position', '<position>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>両方の定義のリンクを再掲。 {{SpecName('CSS3 Backgrounds')}} に対応する場合、 <code><position></code> の定義も使用される。</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td><code><position></code> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>キーワードと {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値の組み合わせを許可。</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#background-position', '<position>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td><code><position></code> を {{cssxref("background-position")}} の値として無名で定義。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.position")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS 値と単位</a></li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 値と単位の紹介</a></li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("radial-gradient", "radial-gradient()")}}</li> - <li>{{cssxref("conic-gradient", "conic-gradient()")}}</li> -</ul> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units) +- [CSS 値と単位の紹介](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) +- {{cssxref("background-position")}} +- {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} +- {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} diff --git a/files/ja/web/css/position_value/position_type.png b/files/ja/web/css/position_value/position_type.png Binary files differnew file mode 100644 index 0000000000..3431698e93 --- /dev/null +++ b/files/ja/web/css/position_value/position_type.png diff --git a/files/ja/web/css/resolution/index.md b/files/ja/web/css/resolution/index.md index 4cdf4eadc3..435d8bd89e 100644 --- a/files/ja/web/css/resolution/index.md +++ b/files/ja/web/css/resolution/index.md @@ -4,96 +4,68 @@ slug: Web/CSS/resolution tags: - CSS - CSS データ型 - - Reference + - データ型 + - リファレンス - ウェブ - レイアウト +browser-compat: css.types.resolution translation_of: Web/CSS/resolution --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code><resolution></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a> で、<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>の <a href="/ja/docs/Web/CSS/@media/resolution">resolution</a> で使われ、出力端末のピクセル密度である、解像度を表します。</p> +**`<resolution>`** は [CSS](/ja/docs/Web/CSS) の [データ型](/ja/docs/Web/CSS/CSS_Types) で、[メディアクエリ](/ja/docs/Web/CSS/Media_Queries)の [resolution](/ja/docs/Web/CSS/@media/resolution) で使われ、出力端末のピクセル密度である、解像度を表します。 -<p>画面では、長さは物理的な値ではなく、 <em>CSS</em> のインチ、センチメートル、またはピクセルと関連づけられます。</p> +画面では、長さは物理的な値ではなく、 <em>CSS</em> のインチ、センチメートル、またはピクセルと関連づけられます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p><code><resolution></code> データ型は、厳密に正の {{cssxref("<number>")}} のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。</p> +`<resolution>` データ型は、厳密に正の {{cssxref("<number>")}} のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。 -<h3 id="Units" name="Units">単位</h3> +### 単位 -<dl> - <dt><a id="dpi" name="dpi"><code>dpi</code></a></dt> - <dd><a href="https://en.wikipedia.org/wiki/Dots_per_inch">1 インチあたりのドット数</a> を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、<code>1dpi ≈ 0.39dpcm</code> です。</dd> - <dt><a id="dpcm" name="dpcm"><code>dpcm</code></a></dt> - <dd><a href="https://en.wikipedia.org/wiki/Dots_per_inch">センチメートルあたりのドット数</a> を表します。1 インチは 2.54 cm なので、<code>1dpcm ≈ 2.54dpi</code> です。</dd> - <dt><a id="dppx" name="dppx"><code>dppx</code></a></dt> - <dd>ピクセル (<code><a href="/ja/docs/Web/CSS/length#px">px</a></code>) あたりのドット数を表します。CSS の <code>in</code> と CSS の <code>px</code> の比率は 1:96 で固定なので、<code>1dppx</code> は <code>96dpi</code> と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。</dd> - <dt><a id="x" name="x"><code>x</code></a></dt> - <dd><code>dppx</code> の別名です。</dd> -</dl> +- `dpi` + - : [1 インチあたりのドット数](https://en.wikipedia.org/wiki/Dots_per_inch) を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、`1dpi ≈ 0.39dpcm` です。 +- `dpcm` + - : [センチメートルあたりのドット数](https://en.wikipedia.org/wiki/Dots_per_inch) を表します。1 インチは 2.54 cm なので、`1dpcm ≈ 2.54dpi` です。 +- `dppx` + - : ピクセル (`[px](/ja/docs/Web/CSS/length#px)`) あたりのドット数を表します。CSS の `in` と CSS の `px` の比率は 1:96 で固定なので、`1dppx` は `96dpi` と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。 +- `x` + - : `dppx` の別名です。 -<div class="note"> -<p><strong>注記:</strong> 仮に値 <code>0</code> に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると <code>0</code> は無効で、<code>0dpi</code>、<code>0dpcm</code>、<code>0dppx</code> のどれも表しません。</p> -</div> +> **Note:** 仮に値 `0` に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると `0` は無効で、`0dpi`、`0dpcm`、`0dppx` のどれも表しません。 -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Use_in_a_media_query" name="Use_in_a_media_query">メディアクエリで使用する</h3> +### メディアクエリーで使用する -<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... }</pre> +```css +@media print and (min-resolution: 300dpi) { ... } +``` -<h3 id="Valid_resolutions" name="Valid_resolutions">有効な解像度</h3> +### 有効な解像度 -<pre>96dpi -50.82dpcm -3dppx -</pre> + 96dpi + 50.82dpcm + 3dppx -<h3 id="Invalid_resolutions" name="Invalid_resolutions">無効な解像度</h3> +### 無効な解像度 -<pre class="example-bad">72 dpi 数値と単位の間に空白は許可されていません。 +```plain example-bad +72 dpi 数値と単位の間に空白は許可されていません。 ten dpi 数値は10進数しか使えません。 0 単位は必須です。 -</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', '#resolution', '<resolution>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td><code>x</code> 単位を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code>dppx</code> 単位を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}</td> - <td>{{Spec2('CSS3 Media Queries')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.types.resolution")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/@media/resolution">resolution</a> メディア特性</li> - <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの使用</a></li> -</ul> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [resolution](/ja/docs/Web/CSS/@media/resolution) メディア特性 +- {{cssxref("image-resolution")}} プロパティ +- [メディアクエリーの使用](/ja/docs/Web/CSS/Media_Queries/Using_media_queries) diff --git a/files/ja/web/css/string/index.md b/files/ja/web/css/string/index.md index 80290bbea9..ba0bd8d1ee 100644 --- a/files/ja/web/css/string/index.md +++ b/files/ja/web/css/string/index.md @@ -4,94 +4,63 @@ slug: Web/CSS/string tags: - CSS - CSS データ型 - - CSS Data Type - - Data Type - - Layout - - Reference - - Web - - ウェブ + - データ型 - レイアウト + - リファレンス + - ウェブ translation_of: Web/CSS/string --- -<div>{{CSSRef}}</div> - -<p><strong><code><string></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、一連の文字列を表します。文字列は {{CSSxRef("content")}}, {{CSSxRef("font-family")}}, {{CSSxRef("quotes")}} など、数々の CSS プロパティで使用されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><string></code> データ型は任意の数の <a href="https://ja.wikipedia.org/wiki/Unicode">Unicode</a> 文字を、二重引用符 (<code>"</code>) または単一引用符 (<code>'</code>) で囲んで構成します。</p> - -<p>多くの文字は文字通りに表現されます。またすべての文字は、それぞれの 16 進数の <a href="https://ja.wikipedia.org/wiki/Unicode#Code_point_planes_and_blocks">Unicode コードポイント</a>で表現することもできます。例えば、 <code>\22</code> は二重引用符を表し、 <code>\27</code> は単一引用符 (<code>'</code>)、 <code>\A9</code> は著作権記号 (<code>©</code>) を表します。</p> - -<p>重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、およびバックスラッシュ自身です。例えば、 <code>\\</code> は単一のバックスラッシュを生成します。</p> - -<p>改行文字を出力するには、 <code>\A</code> 又は <code>\00000A</code> のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として <code>\</code> でエスケープすると、コード内で文字列を複数行に渡らせることができます。</p> - -<div class="note"> -<p><strong>注:</strong> <a href="/ja/docs/Glossary/Entity">HTML エンティティ</a> (<code>&nbsp;</code> や <code>&#8212;</code> など) は、 CSS の <code><string></code> の中で使用することはできません。</p> -</div> - -<h2 id="Examples">例</h2> - -<h3 id="Examples_of_valid_strings">有効な文字列の例</h3> - -<pre>/* 単純な文字列 */ -"This string is demarcated by double quotes." -'This string is demarcated by single quotes.' - -/* 文字のエスケープ */ -"This is a string with \" an escaped double quote." -"This string also has \22 an escaped double quote." -'This is a string with \' an escaped single quote.' -'This string also has \27 an escaped single quote.' -"This is a string with \\ an escaped backslash." - -/* 文字列内の改行 */ -"This string has a \Aline break in it." - -/* 2 行にわたる文字列 (これら 2 つの文字列は同じ出力になります) */ -"A really long \ -awesome string" -"A really long awesome string" -</pre> - -<h2 id="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('CSS3 Values', '#strings', '<string>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td>CSS Level 2 (Revision 1) から重要な変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>明示的定義; Unicode の 6 桁エスケープ文字を許容</td> - </tr> - <tr> - <td>{{SpecName('CSS1', '', '<string>')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>暗黙的定義; Unicode の 4 桁エスケープ文字を許容</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.string")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Values_and_Units">CSS の単位と値</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Types">CSS の基本データ型</a></li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS 入門: 単位と値</a></li> -</ul> +{{CSSRef}} + +**`<string>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、一連の文字列を表します。文字列は {{CSSxRef("content")}}, {{CSSxRef("font-family")}}, {{CSSxRef("quotes")}} など、数々の CSS プロパティで使用されます。 + +## 構文 + +`<string>` データ型は任意の数の [Unicode](https://ja.wikipedia.org/wiki/Unicode) 文字を、二重引用符 (`"`) または単一引用符 (`'`) で囲んで構成します。 + +多くの文字は文字通りに表現されます。またすべての文字は、それぞれの 16 進数の [Unicode コードポイント](https://ja.wikipedia.org/wiki/Unicode#Code_point_planes_and_blocks)で表現することもできます。例えば、 `\22` は二重引用符を表し、 `\27` は単一引用符 (`'`)、 `\A9` は著作権記号 (`©`) を表します。 + +重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、およびバックスラッシュ自身です。例えば、 `\\` は単一のバックスラッシュを生成します。 + +改行文字を出力するには、 `\A` または `\00000A` のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として `\` でエスケープすると、コード内で文字列を複数行に渡らせることができます。 + +ただし、改行を行うためには、{{cssxref("white-space")}} プロパティに適切な値を設定する必要があります。 + +> **Note:** [HTML エンティティ](/ja/docs/Glossary/Entity) (` ` や `—` など) は、 CSS の `<string>` の中で使用することはできません。 + +## 例 + +### 有効な文字列の例 + + /* 単純な文字列 */ + "This string is demarcated by double quotes." + 'This string is demarcated by single quotes.' + + /* 文字のエスケープ */ + "This is a string with \" an escaped double quote." + "This string also has \22 an escaped double quote." + 'This is a string with \' an escaped single quote.' + 'This string also has \27 an escaped single quote.' + "This is a string with \\ an escaped backslash." + + /* 文字列内の改行 */ + "This string has a \Aline break in it." + + /* 2 行にわたる文字列 (これら 2 つの文字列は同じ出力になります) */ + "A really long \ + awesome string" + "A really long awesome string" + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS の単位と値](/ja/docs/Web/CSS/CSS_Values_and_Units) +- [CSS の基本データ型](/ja/docs/Web/CSS/CSS_Types) +- [CSS 入門: 単位と値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/time-percentage/index.md b/files/ja/web/css/time-percentage/index.md index a59e248142..e6127e65cb 100644 --- a/files/ja/web/css/time-percentage/index.md +++ b/files/ja/web/css/time-percentage/index.md @@ -3,52 +3,67 @@ title: <time-percentage> slug: Web/CSS/time-percentage tags: - CSS - - CSS Data Type - CSS データ型 - - Reference + - データ型 + - リファレンス - time-percentage - - units - - values - - 値 - 単位 + - 値 translation_of: Web/CSS/time-percentage --- -<div>{{CSSRef}}</div> +{{CSSRef}} + +**`<time-percentage>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、 {{Cssxref("time")}} または {{Cssxref("percentage")}} が取りうる値を表します。 + +## 構文 + +この型に利用できる個々の構文の詳細は、 {{Cssxref("time")}} および {{Cssxref("percentage")}} の文書を参照してください。 + +## 例 + +### calc() での使用 + +許可されている型として `<time-percentage>` が指定されているところでは、これはパーセント値が時間として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。 + +### 有効なパーセント値 + + 50% + +50% + 記号は任意 + -50% 負号はパーセント値を受け入れるすべてのプロパティで有効とは限らない + +### 無効なパーセント値 + +```plain example-bad +50 % 数値とパーセント記号の間に空白は許可されない +``` + +### 有効な時間 -<p><strong><code><time-percentage></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、 {{Cssxref("time")}} または {{Cssxref("percentage")}} が取りうる値を表します。</p> + 12s 正の整数 + -456ms 負の整数 + 4.3ms 非整数 + 14mS 単位には大文字・小文字の区別がないが、大文字は推奨されない。 + +0s 先頭に + がついたゼロと単位 + -0ms 先頭に - がついたゼロと単位 -<h2 id="Syntax" name="Syntax">構文</h2> +### 無効な時間 -<p>この型に利用できる個々の構文の詳細は、 {{Cssxref("time")}} および {{Cssxref("percentage")}} の文書を参照してください。</p> +```plain example-bad +0 単位のない <length> は有効だが、 <time> では無効。 +12.0 これは単位がないので <number> であって <time> ではない。 +7 ms 数値と単位の間に空白は許可されない。 +``` -<h2 id="Use_in_calc()" name="Use_in_calc()">calc() での使用</h2> +## 仕様書 -<p>許可されている型として <code><time-percentage></code> が指定されているところでは、これはパーセント値が時間として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。</p> +{{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', '#mixed-percentages', '<time-percentage>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code><time-percentage></code> を定義。 <code>calc()</code> を追加</td> - </tr> - </tbody> -</table> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +## 関連情報 -<p>{{Compat("css.types.time-percentage")}}</p> +- {{cssxref("<percentage>")}} +- {{cssxref("<time>")}} +- [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units) diff --git a/files/ja/web/css/time/index.md b/files/ja/web/css/time/index.md index 2e7deda39e..76964574ff 100644 --- a/files/ja/web/css/time/index.md +++ b/files/ja/web/css/time/index.md @@ -3,88 +3,61 @@ title: <time> slug: Web/CSS/time tags: - CSS - - CSS Data Type - CSS データ型 - - Layout - - Reference - - Web - - ウェブ + - データ型 - レイアウト + - リファレンス + - ウェブ +browser-compat: css.types.time translation_of: Web/CSS/time --- -<div>{{CSSRef}}</div> - -<p><strong><code><time></code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>で、時間の値を秒単位またはミリ秒単位で表現します。これは {{cssxref("animation")}} や {{cssxref("transition")}} および関連するプロパティで使用されています。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p><code><time></code> データ型は、 {{cssxref("<number>")}} の直後に下記の単位を続けます。省略可能ですが、その前に単一の <code>+</code> または <code>-</code> を付けることもあります。どの単位の場合も、単位と数字との間には空白を置きません。</p> - -<div class="note"> -<p><strong>メモ:</strong> 数値の <code>0</code> は単にに関わらず常に同じですが、単位は省略できません。言い換えれば、 <code>0</code> は無効であり、 <code>0s</code> または <code>0ms</code> を表すものではありません。</p> -</div> - -<h3 id="Units" name="Units">単位</h3> - -<dl> - <dt><strong><code id="s">s</code></strong></dt> - <dd>秒単位の時間を表します。例: <code>0s</code>, <code>1.5s</code>, <code>-60s</code></dd> - <dt><strong><code id="ms">ms</code></strong></dt> - <dd>ミリ秒単位の時間を表します。例: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code></dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> <code>s</code> と <code>ms</code> の間の変換は、論理的に <code>1s</code> = <code>1000ms</code> となります。</p> -</div> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Valid_times" name="Valid_times">正しい時間</h3> - -<pre>12s 正の整数 --456ms 負の整数 -4.3ms 整数でない数値 -14mS 単位では大文字小文字が区別されませんが、大文字は推奨されません。 -+0s 先導する + と単位を伴うゼロです --0ms 先導する - と単位を伴うゼロです -</pre> - -<h3 id="Invalid_times" name="Invalid_times">正しくない時間</h3> - -<pre>0 単位なしのゼロは <length> では使えますが、他のすべての単位では無効です。 -12.0 これは <a title="CSS/number"><number></a> で <time> ではありません。単位が必須です。 -7 ms <a title="CSS/number"><number></a> と単位の間に空白を置いてはいけません。 -</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','#time','<time>')}}</td> - <td>{{Spec2('CSS4 Values')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Values','#time','<time>')}}</td> - <td>{{Spec2('CSS3 Values')}}</td> - <td><code>s</code> と <code>ms</code> の正規の定義</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1','aural.html#times','<time>')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td><code>s</code> と <code>ms</code> の非公式な定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.types.time")}}</p> +{{CSSRef}} + +**`<time>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、時間の値を秒単位またはミリ秒単位で表現します。これは {{cssxref("animation")}} や {{cssxref("transition")}} および関連するプロパティで使用されています。 + +## 構文 + +`<time>` データ型は、 {{cssxref("<number>")}} の直後に下記の単位を続けます。省略可能ですが、その前に単一の `+` または `-` を付けることもあります。どの単位の場合も、単位と数字との間には空白を置きません。 + +> **Note:** 数値の `0` は単にに関わらず常に同じですが、単位は省略できません。言い換えれば、 `0` は無効であり、 `0s` または `0ms` を表すものではありません。 + +### 単位 + +- **`s`** + - : 秒単位の時間を表します。例: `0s`, `1.5s`, `-60s` +- **`ms`** + - : ミリ秒単位の時間を表します。例: `0ms`, `150.25ms`, `-60000ms` + +> **Note:** `s` と `ms` の間の変換は、論理的に `1s` = `1000ms` となります。 + +## 例 + +### 有効な時間 + + 12s 正の整数 + -456ms 負の整数 + 4.3ms 整数でない数値 + 14mS 単位では大文字小文字が区別されませんが、大文字は推奨されません。 + +0s 先導する + と単位を伴うゼロです + -0ms 先導する - と単位を伴うゼロです + +### 無効な時間 + +```plain example-bad +0 単位なしのゼロは <length> では使えますが、他のすべての単位では無効です。 +12.0 これは <number> であり、 <time> ではありません。単位が必須です。 +7 ms 数値と単位との間に空白を置いてはいけません。 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<time-percentage>")}} +- [CSS 値と単位](/ja/docs/Web/CSS/CSS_Values_and_Units) diff --git a/files/ja/web/css/url()/index.md b/files/ja/web/css/url()/index.md index 03e2749ad5..18c2e4c095 100644 --- a/files/ja/web/css/url()/index.md +++ b/files/ja/web/css/url()/index.md @@ -5,8 +5,8 @@ tags: - CSS - CSS 関数 - 関数 - - Layout - - Reference + - レイアウト + - リファレンス - ウェブ - url() browser-compat: css.types.url |
