From e160f04ecb5945c3dcf028e9d836be665dbf0ddc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 20 Nov 2021 23:56:35 +0900 Subject: CSS Values and Units のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/angle-percentage/index.html | 60 ------ files/ja/web/css/angle-percentage/index.md | 60 ++++++ files/ja/web/css/angle/index.html | 92 -------- files/ja/web/css/angle/index.md | 92 ++++++++ files/ja/web/css/attr()/index.html | 255 ----------------------- files/ja/web/css/attr()/index.md | 255 +++++++++++++++++++++++ files/ja/web/css/clamp()/index.html | 121 ----------- files/ja/web/css/clamp()/index.md | 121 +++++++++++ files/ja/web/css/custom-ident/index.html | 134 ------------ files/ja/web/css/custom-ident/index.md | 134 ++++++++++++ files/ja/web/css/dimension/index.html | 80 ------- files/ja/web/css/dimension/index.md | 80 +++++++ files/ja/web/css/frequency-percentage/index.html | 93 --------- files/ja/web/css/frequency-percentage/index.md | 93 +++++++++ files/ja/web/css/frequency/index.html | 74 ------- files/ja/web/css/frequency/index.md | 74 +++++++ files/ja/web/css/integer/index.html | 93 --------- files/ja/web/css/integer/index.md | 93 +++++++++ files/ja/web/css/length-percentage/index.html | 59 ------ files/ja/web/css/length-percentage/index.md | 59 ++++++ files/ja/web/css/max()/index.html | 117 ----------- files/ja/web/css/max()/index.md | 117 +++++++++++ files/ja/web/css/min()/index.html | 137 ------------ files/ja/web/css/min()/index.md | 137 ++++++++++++ files/ja/web/css/number/index.html | 90 -------- files/ja/web/css/number/index.md | 90 ++++++++ files/ja/web/css/percentage/index.html | 94 --------- files/ja/web/css/percentage/index.md | 94 +++++++++ files/ja/web/css/position_value/index.html | 136 ------------ files/ja/web/css/position_value/index.md | 136 ++++++++++++ files/ja/web/css/resolution/index.html | 99 --------- files/ja/web/css/resolution/index.md | 99 +++++++++ files/ja/web/css/string/index.html | 97 --------- files/ja/web/css/string/index.md | 97 +++++++++ files/ja/web/css/time-percentage/index.html | 54 ----- files/ja/web/css/time-percentage/index.md | 54 +++++ files/ja/web/css/time/index.html | 90 -------- files/ja/web/css/time/index.md | 90 ++++++++ 38 files changed, 1975 insertions(+), 1975 deletions(-) delete mode 100644 files/ja/web/css/angle-percentage/index.html create mode 100644 files/ja/web/css/angle-percentage/index.md delete mode 100644 files/ja/web/css/angle/index.html create mode 100644 files/ja/web/css/angle/index.md delete mode 100644 files/ja/web/css/attr()/index.html create mode 100644 files/ja/web/css/attr()/index.md delete mode 100644 files/ja/web/css/clamp()/index.html create mode 100644 files/ja/web/css/clamp()/index.md delete mode 100644 files/ja/web/css/custom-ident/index.html create mode 100644 files/ja/web/css/custom-ident/index.md delete mode 100644 files/ja/web/css/dimension/index.html create mode 100644 files/ja/web/css/dimension/index.md delete mode 100644 files/ja/web/css/frequency-percentage/index.html create mode 100644 files/ja/web/css/frequency-percentage/index.md delete mode 100644 files/ja/web/css/frequency/index.html create mode 100644 files/ja/web/css/frequency/index.md delete mode 100644 files/ja/web/css/integer/index.html create mode 100644 files/ja/web/css/integer/index.md delete mode 100644 files/ja/web/css/length-percentage/index.html create mode 100644 files/ja/web/css/length-percentage/index.md delete mode 100644 files/ja/web/css/max()/index.html create mode 100644 files/ja/web/css/max()/index.md delete mode 100644 files/ja/web/css/min()/index.html create mode 100644 files/ja/web/css/min()/index.md delete mode 100644 files/ja/web/css/number/index.html create mode 100644 files/ja/web/css/number/index.md delete mode 100644 files/ja/web/css/percentage/index.html create mode 100644 files/ja/web/css/percentage/index.md delete mode 100644 files/ja/web/css/position_value/index.html create mode 100644 files/ja/web/css/position_value/index.md delete mode 100644 files/ja/web/css/resolution/index.html create mode 100644 files/ja/web/css/resolution/index.md delete mode 100644 files/ja/web/css/string/index.html create mode 100644 files/ja/web/css/string/index.md delete mode 100644 files/ja/web/css/time-percentage/index.html create mode 100644 files/ja/web/css/time-percentage/index.md delete mode 100644 files/ja/web/css/time/index.html create mode 100644 files/ja/web/css/time/index.md (limited to 'files') diff --git a/files/ja/web/css/angle-percentage/index.html b/files/ja/web/css/angle-percentage/index.html deleted file mode 100644 index e41fefa562..0000000000 --- a/files/ja/web/css/angle-percentage/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: -slug: Web/CSS/angle-percentage -tags: - - CSS - - CSS Data Type - - Data Type - - Reference - - angle-percentage - - units - - values -translation_of: Web/CSS/angle-percentage ---- -
{{CSSRef}}
- -

<angle-percentage> は CSS のデータ型で、 {{Cssxref("angle")}} または {{Cssxref("percentage")}} が取りうる値を表します。

- -

構文

- -

この型に利用できる個々の構文の詳細は、 {{Cssxref("angle")}} および {{Cssxref("percentage")}} の文書を参照してください。

- -

calc() での使用

- -

許可されている型として <angle-percentage> が指定されているところでは、これはパーセント値が角度として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}<angle-percentage> を定義。 calc() を追加
- -

ブラウザーの互換性

- -

{{Compat("css.types.angle-percentage")}}

- -

関連情報

- - diff --git a/files/ja/web/css/angle-percentage/index.md b/files/ja/web/css/angle-percentage/index.md new file mode 100644 index 0000000000..e41fefa562 --- /dev/null +++ b/files/ja/web/css/angle-percentage/index.md @@ -0,0 +1,60 @@ +--- +title: +slug: Web/CSS/angle-percentage +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - angle-percentage + - units + - values +translation_of: Web/CSS/angle-percentage +--- +
{{CSSRef}}
+ +

<angle-percentage> は CSS のデータ型で、 {{Cssxref("angle")}} または {{Cssxref("percentage")}} が取りうる値を表します。

+ +

構文

+ +

この型に利用できる個々の構文の詳細は、 {{Cssxref("angle")}} および {{Cssxref("percentage")}} の文書を参照してください。

+ +

calc() での使用

+ +

許可されている型として <angle-percentage> が指定されているところでは、これはパーセント値が角度として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}<angle-percentage> を定義。 calc() を追加
+ +

ブラウザーの互換性

+ +

{{Compat("css.types.angle-percentage")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/angle/index.html b/files/ja/web/css/angle/index.html deleted file mode 100644 index 4986591cbc..0000000000 --- a/files/ja/web/css/angle/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: -slug: Web/CSS/angle -tags: - - CSS - - CSS Data Type - - CSS データ型 - - CSS 値と単位 - - Layout - - Reference - - Web - - ウェブ - - レイアウト -translation_of: Web/CSS/angle ---- -
{{CSSRef}}
- -

CSS の <angle> データ型は、度、グラード、ラジアン、回転の値で表される角度の値を表します。例えば、 {{cssxref("<gradient>")}} 関数や一部の {{cssxref("transform")}} 関数などで使われています。

- -
{{EmbedInteractiveExample("pages/css/type-angle.html")}}
- - - -

構文

- -

<angle> データ型は、一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。 数値 0 の後は、角度の単位は任意です。

- -

任意で、先行して単一の符号 (+ または -) を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 90deg は -270deg と等価で、 1turn は 4turn と等価です。しかし、 {{cssxref("animation")}} や {{cssxref("transition")}} に適用されるような動的なプロパティでは、効果が異なります。

- -

単位

- -
-
deg
-
角度を度数法 (度) で表します。円一周は 360deg です。例: 0deg, 90deg, 14.23deg
-
grad
-
角度をグラードで表します。円一周は 400grad です。例: 0grad, 100grad, 38.8grad
-
rad
-
角度を弧度法 (ラジアン) で表します。円一周は 2π ラジアンで、およそ 6.2832rad です。 1rad は 180/π 度です。例: 0rad, 1.0708rad, 6.2832rad
-
turn
-
角度を回転数で表します。円一周は 1turn です。例: 0turn, 0.25turn, 1.2turn
-
- -

例

- - - - - - - - - - - - - - - - - - - - -
Angle90.png直角: 90deg = 100grad = 0.25turn ≈ 1.5708rad
Angle180.png平角: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.png直角 (反時計回り): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png角度なし: 0 = 0deg = 0grad = 0turn = 0rad
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS4 Values', '#angles', '<angle>') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}初回定義。
- -

ブラウザーの対応

- -

{{Compat("css.types.angle")}}

diff --git a/files/ja/web/css/angle/index.md b/files/ja/web/css/angle/index.md new file mode 100644 index 0000000000..4986591cbc --- /dev/null +++ b/files/ja/web/css/angle/index.md @@ -0,0 +1,92 @@ +--- +title: +slug: Web/CSS/angle +tags: + - CSS + - CSS Data Type + - CSS データ型 + - CSS 値と単位 + - Layout + - Reference + - Web + - ウェブ + - レイアウト +translation_of: Web/CSS/angle +--- +
{{CSSRef}}
+ +

CSS の <angle> データ型は、度、グラード、ラジアン、回転の値で表される角度の値を表します。例えば、 {{cssxref("<gradient>")}} 関数や一部の {{cssxref("transform")}} 関数などで使われています。

+ +
{{EmbedInteractiveExample("pages/css/type-angle.html")}}
+ + + +

構文

+ +

<angle> データ型は、一つの {{cssxref("<number>")}} とそれに続く以下に挙げる単位の一つから成ります。単位と数値の間に空白は置きません。 数値 0 の後は、角度の単位は任意です。

+ +

任意で、先行して単一の符号 (+ または -) を付けることができます。 正の数は時計回りの角度を表し、負の数は反時計回りの角度を表します。静的なプロパティにおいては、ある単位のある角度は、様々な等価の値で表すことができます。例えば、 90deg は -270deg と等価で、 1turn は 4turn と等価です。しかし、 {{cssxref("animation")}} や {{cssxref("transition")}} に適用されるような動的なプロパティでは、効果が異なります。

+ +

単位

+ +
+
deg
+
角度を度数法 (度) で表します。円一周は 360deg です。例: 0deg, 90deg, 14.23deg
+
grad
+
角度をグラードで表します。円一周は 400grad です。例: 0grad, 100grad, 38.8grad
+
rad
+
角度を弧度法 (ラジアン) で表します。円一周は 2π ラジアンで、およそ 6.2832rad です。 1rad は 180/π 度です。例: 0rad, 1.0708rad, 6.2832rad
+
turn
+
角度を回転数で表します。円一周は 1turn です。例: 0turn, 0.25turn, 1.2turn
+
+ +

例

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png直角: 90deg = 100grad = 0.25turn ≈ 1.5708rad
Angle180.png平角: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.png直角 (反時計回り): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png角度なし: 0 = 0deg = 0grad = 0turn = 0rad
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Values', '#angles', '<angle>') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}初回定義。
+ +

ブラウザーの対応

+ +

{{Compat("css.types.angle")}}

diff --git a/files/ja/web/css/attr()/index.html b/files/ja/web/css/attr()/index.html deleted file mode 100644 index 28b71d18aa..0000000000 --- a/files/ja/web/css/attr()/index.html +++ /dev/null @@ -1,255 +0,0 @@ ---- -title: attr() -slug: Web/CSS/attr() -tags: - - CSS - - CSS 関数 - - Reference - - Web - - attr - - レイアウト -translation_of: Web/CSS/attr() ---- -
{{CSSRef}}
- -
メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。
- -

attr() は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。

- -
/* Simple usage */
-attr(data-count);
-attr(title);
-
-/* 型付き */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
-
-/* 代替値付き */
-attr(data-count number, 0);
-attr(src url, "");
-attr(data-width px, inherit);
-attr(data-something, "default");
-
- -

構文

- -

値

- -
-
attribute-name
-
CSS で参照する、 HTML 要素の属性名です。
-
<type-or-unit> {{Experimental_Inline}}
-
属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を <type-or-unit> で与えると、 attr() 式も無効になります。省略すると既定値の string になります。有効な値は以下の通りです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
キーワード関係する型コメント既定値
string{{CSSxRef("<string>")}}属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。空文字列
color {{Experimental_Inline}}{{CSSxRef("<color>")}}属性値はハッシュ (3値または6値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。
- 前後の空白は除去されます。		currentcolor
url {{Experimental_Inline}}{{CSSxRef("<url>")}}属性値は、 CSS の url() 関数の中で使用される文字列として解析されます。
- 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。
- 前後の空白は除去されます。		一般的なエラーの状況で存在しない文書を指す about:invalid の URL。
integer {{Experimental_Inline}}{{CSSxRef("<integer>")}}属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
number {{Experimental_Inline}}{{CSSxRef("<number>")}}属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
length {{Experimental_Inline}}{{CSSxRef("<length>")}}属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (12.5em など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。
- 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{Experimental_Inline}}{{CSSxRef("<length>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。
- 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
angle {{Experimental_Inline}}{{CSSxRef("<angle>")}}属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (30.5deg など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 前後の空白は除去されます。		0deg、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。
deg, grad, rad {{Experimental_Inline}}{{CSSxRef("<angle>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 前後の空白は除去されます。		0deg、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。
time {{Experimental_Inline}}{{CSSxRef("<time>")}}属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 前後の空白は除去されます。		0s、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。
s, ms {{Experimental_Inline}}{{CSSxRef("<time>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 前後の空白は除去されます。		0s、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。
frequency {{Experimental_Inline}}{{CSSxRef("<frequency>")}}属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。0Hz、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。
Hz, kHz {{Experimental_Inline}}{{CSSxRef("<frequency>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 前後の空白は除去されます。		0Hz、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。
% {{Experimental_Inline}}{{CSSxRef("<percentage>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
- 指定された値が長さの場合は、 attr() は絶対的な値に変換して計算します。
- 前後の空白は除去されます。		0%、または 0% が妥当な値ではないプロパティでは、プロパティの最小値。
-
-
<fallback> {{Experimental_Inline}}
-
関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 <type-or-unit> で定義された既定値を使います。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

content プロパティ

- -

HTML

- -
<p data-foo="hello">world</p>
- -

CSS

- -
[data-foo]::before {
-  content: attr(data-foo) " ";
-}
- -

結果

- -

{{EmbedLiveSample("content_property", "100%", 50)}}

- -

<color> 値

- -

{{SeeCompatTable}}

- -
-

HTML

- -
<div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div>
- -

CSS

- - - -
.background {
-  background-color: red;
-}
-
-.background[data-background] {
-  background-color: attr(data-background color, red);
-}
-
- -

{{EmbedLiveSample("color-value", "100%", 50)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}{{CSSxRef("var()")}} のように動作するように変更。 attr() を含むプロパティ値は解析時に有効となり、属性値の検証は計算値になるまで延期されます。
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} -

2 つのオプション引数を追加
- 全プロパティで使用可能
- {{CSSxRef("<string>")}} 以外の値が返せるようになった。

- これらの変更は実験的であり、ブラウザーの互換性が少なすぎると CR 段階で外される可能性がある
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}{{CSSxRef("content")}} プロパティに限定
- 常に {{CSSxRef("<string>")}} を返す
- -

ブラウザーの互換性

- -

{{Compat("css.types.attr")}}

- -

関連情報

- - diff --git a/files/ja/web/css/attr()/index.md b/files/ja/web/css/attr()/index.md new file mode 100644 index 0000000000..28b71d18aa --- /dev/null +++ b/files/ja/web/css/attr()/index.md @@ -0,0 +1,255 @@ +--- +title: attr() +slug: Web/CSS/attr() +tags: + - CSS + - CSS 関数 + - Reference + - Web + - attr + - レイアウト +translation_of: Web/CSS/attr() +--- +
{{CSSRef}}
+ +
メモ: attr() 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。
+ +

attr() は CSS の関数で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。擬似要素で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。

+ +
/* Simple usage */
+attr(data-count);
+attr(title);
+
+/* 型付き */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* 代替値付き */
+attr(data-count number, 0);
+attr(src url, "");
+attr(data-width px, inherit);
+attr(data-something, "default");
+
+ +

構文

+ +

値

+ +
+
attribute-name
+
CSS で参照する、 HTML 要素の属性名です。
+
<type-or-unit> {{Experimental_Inline}}
+
属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を <type-or-unit> で与えると、 attr() 式も無効になります。省略すると既定値の string になります。有効な値は以下の通りです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード関係する型コメント既定値
string{{CSSxRef("<string>")}}属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。空文字列
color {{Experimental_Inline}}{{CSSxRef("<color>")}}属性値はハッシュ (3値または6値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。
+ 前後の空白は除去されます。		currentcolor
url {{Experimental_Inline}}{{CSSxRef("<url>")}}属性値は、 CSS の url() 関数の中で使用される文字列として解析されます。
+ 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。
+ 前後の空白は除去されます。		一般的なエラーの状況で存在しない文書を指す about:invalid の URL。
integer {{Experimental_Inline}}{{CSSxRef("<integer>")}}属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
number {{Experimental_Inline}}{{CSSxRef("<number>")}}属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
length {{Experimental_Inline}}{{CSSxRef("<length>")}}属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (12.5em など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{Experimental_Inline}}{{CSSxRef("<length>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 指定された値が相対的な長さの場合は、 attr() は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。		0、または 0 が妥当な値ではないプロパティでは、プロパティの最小値。
angle {{Experimental_Inline}}{{CSSxRef("<angle>")}}属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (30.5deg など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0deg、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。
deg, grad, rad {{Experimental_Inline}}{{CSSxRef("<angle>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0deg、または 0deg が妥当な値ではないプロパティでは、プロパティの最小値。
time {{Experimental_Inline}}{{CSSxRef("<time>")}}属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0s、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。
s, ms {{Experimental_Inline}}{{CSSxRef("<time>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0s、または 0s が妥当な値ではないプロパティでは、プロパティの最小値。
frequency {{Experimental_Inline}}{{CSSxRef("<frequency>")}}属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (30.5ms など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。0Hz、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。
Hz, kHz {{Experimental_Inline}}{{CSSxRef("<frequency>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 前後の空白は除去されます。		0Hz、または 0Hz が妥当な値ではないプロパティでは、プロパティの最小値。
% {{Experimental_Inline}}{{CSSxRef("<percentage>")}}属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (12.5 など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。
+ 指定された値が長さの場合は、 attr() は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。		0%、または 0% が妥当な値ではないプロパティでは、プロパティの最小値。
+
+
<fallback> {{Experimental_Inline}}
+
関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 <type-or-unit> で定義された既定値を使います。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

content プロパティ

+ +

HTML

+ +
<p data-foo="hello">world</p>
+ +

CSS

+ +
[data-foo]::before {
+  content: attr(data-foo) " ";
+}
+ +

結果

+ +

{{EmbedLiveSample("content_property", "100%", 50)}}

+ +

<color> 値

+ +

{{SeeCompatTable}}

+ +
+

HTML

+ +
<div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div>
+ +

CSS

+ + + +
.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}
+
+ +

{{EmbedLiveSample("color-value", "100%", 50)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}{{CSSxRef("var()")}} のように動作するように変更。 attr() を含むプロパティ値は解析時に有効となり、属性値の検証は計算値になるまで延期されます。
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} +

2 つのオプション引数を追加
+ 全プロパティで使用可能
+ {{CSSxRef("<string>")}} 以外の値が返せるようになった。

+ これらの変更は実験的であり、ブラウザーの互換性が少なすぎると CR 段階で外される可能性がある
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}{{CSSxRef("content")}} プロパティに限定
+ 常に {{CSSxRef("<string>")}} を返す
+ +

ブラウザーの互換性

+ +

{{Compat("css.types.attr")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/clamp()/index.html b/files/ja/web/css/clamp()/index.html deleted file mode 100644 index feef5d027d..0000000000 --- a/files/ja/web/css/clamp()/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -tags: - - CSS - - CSS Function - - CSS 関数 - - Calculate - - Compute - - Function - - Layout - - Reference - - Web - - clamp - - ウェブ - - レイアウト - - 計算 - - 関数 -translation_of: Web/CSS/clamp() ---- -
{{CSSRef}}
- -

clamp() は CSS の関数で、値を上限と下限の間に制限します。 clamp() によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 clamp() 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。

- -

clamp(MIN, VAL, MAX) は {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX)) と同等です。

- -
/* property: clamp(expression{3}) */
-width: clamp(10px, 4em, 80px);
- -

上記の例では、幅が最大 80px、最小 10px ですが、 em が 2.5px から 20px の間であれば、 4em になります。

- -

上記の場合で em が 16px の幅であると仮定しましょう。

- -
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;
- -

構文

- -

clamp() 関数は、3つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。

- -

最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。

- -

推奨値は、結果が最小値と最大値の間である限り使用される値の式です。

- -

最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。

- -

式は計算関数 (詳しくは {{CSSxRef("calc")}} を参照)、リテラル値、 {{CSSxRef("attr", "attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min")}} および {{CSSxRef("max")}} 関数などです。数式としては、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。

- -

式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。

- -

メモ

- -
    -
  • 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 auto がして甥されたものとして扱われることがあります。
    • -
  • 式の値として max() および min() 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。
    • -
  • 式は加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。
    • -
  • {{CSSxRef("min")}} および {{CSSxRef("max")}} を clamp() 関数の中で使用したくなるでしょう。
    • -
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

フォントへの最小値と最大値の設定

- -

clamp() によって、ビューポートの大きさに合わせ、かつ最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができます。1行でメディアクエリを使用することなく、 Fluid Typography の中のコードと同じ効果を持ちます。

- -
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
-
- -
<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>
-
- -

{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}

- -

アクセシビリティの考慮事項

- -

TBD

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.types.clamp")}}

- -

関連情報

- -
    -
  • {{CSSxRef("calc")}}
    • -
  • {{CSSxRef("max")}}
    • -
  • {{CSSxRef("min")}}
    • -
  • CSS Values
    • -
diff --git a/files/ja/web/css/clamp()/index.md b/files/ja/web/css/clamp()/index.md new file mode 100644 index 0000000000..75fc0542b8 --- /dev/null +++ b/files/ja/web/css/clamp()/index.md @@ -0,0 +1,121 @@ +--- +title: clamp() +slug: Web/CSS/clamp() +tags: + - CSS + - CSS Function + - CSS 関数 + - Calculate + - Compute + - Function + - Layout + - Reference + - Web + - clamp + - ウェブ + - レイアウト + - 計算 + - 関数 +translation_of: Web/CSS/clamp()ｓ +--- +
{{CSSRef}}
+ +

clamp() は CSS の関数で、値を上限と下限の間に制限します。 clamp() によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 clamp() 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。

+ +

clamp(MIN, VAL, MAX) は {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX)) と同等です。

+ +
/* property: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);
+ +

上記の例では、幅が最大 80px、最小 10px ですが、 em が 2.5px から 20px の間であれば、 4em になります。

+ +

上記の場合で em が 16px の幅であると仮定しましょう。

+ +
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;
+ +

構文

+ +

clamp() 関数は、3つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。

+ +

最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。

+ +

推奨値は、結果が最小値と最大値の間である限り使用される値の式です。

+ +

最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。

+ +

式は計算関数 (詳しくは {{CSSxRef("calc")}} を参照)、リテラル値、 {{CSSxRef("attr", "attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min")}} および {{CSSxRef("max")}} 関数などです。数式としては、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。

+ +

式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。

+ +

メモ

+ +
    +
  • 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 auto がして甥されたものとして扱われることがあります。
    • +
  • 式の値として max() および min() 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 calc() 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。
    • +
  • 式は加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。
    • +
  • {{CSSxRef("min")}} および {{CSSxRef("max")}} を clamp() 関数の中で使用したくなるでしょう。
    • +
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

フォントへの最小値と最大値の設定

+ +

clamp() によって、ビューポートの大きさに合わせ、かつ最小フォントサイズを下回ったり最大フォントサイズを上回ったりすることなく、フォントの大きさを設定することができます。1行でメディアクエリを使用することなく、 Fluid Typography の中のコードと同じ効果を持ちます。

+ +
p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+
+ +
<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>
+
+ +

{{EmbedLiveSample("Setting_a_minimum_and_max_size_for_a_font", "100%", "300")}}

+ +

アクセシビリティの考慮事項

+ +

TBD

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.types.clamp")}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("calc")}}
    • +
  • {{CSSxRef("max")}}
    • +
  • {{CSSxRef("min")}}
    • +
  • CSS Values
    • +
diff --git a/files/ja/web/css/custom-ident/index.html b/files/ja/web/css/custom-ident/index.html deleted file mode 100644 index 0770a40aac..0000000000 --- a/files/ja/web/css/custom-ident/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: -slug: Web/CSS/custom-ident -tags: - - CSS - - CSS Data Type - - Data Type - - Layout - - Reference - - Web -translation_of: Web/CSS/custom-ident ---- -
{{CSSRef}}
- -

<custom-ident> は CSS のデータ型で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。

- -

構文

- -

<custom-ident> の構文は CSS の識別子 (プロパティ名など) に似ていますが、大文字と小文字を区別する点が違います。これは次の文字から成る文字の並びです:

- -
    -
  • 任意のアルファベット (A-Z, a-z)
    • -
  • 任意の数字 (0-9)
    • -
  • ハイフン (-)
    • -
  • アンダースコア (_)
    • -
  • エスケープ文字 (バックスラッシュ \ に続く)
    • -
  • Unicode 文字 (バックスラッシュ \ と、それに続く 1 - 6 個の16進値の形式をとる、Unicode コードポイント）
    • -
- -

このデータ値は大文字と小文字を区別するため、id1、Id1、iD1、ID1 はすべて異なった識別子です。逆に、別のエスケープ方式を使っていますが、 toto\? と toto\3F は同じ識別子です。

- -

禁止されている値

- -

<custom-ident> を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("<string>")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (-) および、それら続くものであってはなりません。

- -

曖昧さを避けるため、 <custom-ident> を使用する各プロパティは、特定の値の使用を禁止しています:

- -
-
{{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 の値を禁止しています。
-
- -

例

- -

有効な識別子

- -
nono79            アルファベットと数字の組み合わせ
-ground-level      アルファベットとダッシュの組み合わせ
--test             ダッシュとそれに続くアルファベット
-_internal         アンダースコアとそれに続くアルファベット
-\22 toto          Unicode 文字とそれに続くアルファベット
-bili\.bob         ピリオドは正しくエスケープされています
-
- -

無効な識別子

- -
34rem             数字で始まってはいけません
--12rad            ダッシュで始まって数字が続いてはいけません
-bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけです
---toto            2 つのダッシュで始まってはいけません
-'bilibob'         <string> です
-"bilibob"         <string> です
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> for will-change')}}{{Spec2('CSS Will Change')}}{{CSSxRef("will-change")}} で除外する値を定義。
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> for list-style-type')}}{{Spec2('CSS3 Counter Styles')}}キーワードの有限リストの代わりに <custom-ident> を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> for counter-*')}}{{Spec2('CSS3 Lists')}}<identifier> から <custom-ident> へ改名。使い方を新しい counter-set プロパティへ追加。
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> for animation-name')}}{{Spec2('CSS3 Animations')}}{{CSSxRef("animation-name")}} で除外する値を定義。
{{SpecName('CSS3 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS3 Values')}}<identifier> から <custom-ident> へ改名。擬似型とし、除外値の使用を禁止した。
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。

- -

関連情報

- -
    -
  • {{CSSxRef("<ident>")}}
    • -
diff --git a/files/ja/web/css/custom-ident/index.md b/files/ja/web/css/custom-ident/index.md new file mode 100644 index 0000000000..0770a40aac --- /dev/null +++ b/files/ja/web/css/custom-ident/index.md @@ -0,0 +1,134 @@ +--- +title: +slug: Web/CSS/custom-ident +tags: + - CSS + - CSS Data Type + - Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/custom-ident +--- +
{{CSSRef}}
+ +

<custom-ident> は CSS のデータ型で、{{glossary("identifier", "識別子")}}として使われるユーザー定義の任意の文字列を意味します。これは大文字と小文字を区別し、曖昧さを避けるため、いくつかの値は様々なコンテキストで禁止されています。

+ +

構文

+ +

<custom-ident> の構文は CSS の識別子 (プロパティ名など) に似ていますが、大文字と小文字を区別する点が違います。これは次の文字から成る文字の並びです:

+ +
    +
  • 任意のアルファベット (A-Z, a-z)
    • +
  • 任意の数字 (0-9)
    • +
  • ハイフン (-)
    • +
  • アンダースコア (_)
    • +
  • エスケープ文字 (バックスラッシュ \ に続く)
    • +
  • Unicode 文字 (バックスラッシュ \ と、それに続く 1 - 6 個の16進値の形式をとる、Unicode コードポイント）
    • +
+ +

このデータ値は大文字と小文字を区別するため、id1、Id1、iD1、ID1 はすべて異なった識別子です。逆に、別のエスケープ方式を使っていますが、 toto\? と toto\3F は同じ識別子です。

+ +

禁止されている値

+ +

<custom-ident> を引用符または二重引用符の間に置いてはいけません。こうすると、 {{CSSxRef("<string>")}} として識別されてしまいます。さらに、先頭の文字は、数字やハイフン (-) および、それら続くものであってはなりません。

+ +

曖昧さを避けるため、 <custom-ident> を使用する各プロパティは、特定の値の使用を禁止しています:

+ +
+
{{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 の値を禁止しています。
+
+ +

例

+ +

有効な識別子

+ +
nono79            アルファベットと数字の組み合わせ
+ground-level      アルファベットとダッシュの組み合わせ
+-test             ダッシュとそれに続くアルファベット
+_internal         アンダースコアとそれに続くアルファベット
+\22 toto          Unicode 文字とそれに続くアルファベット
+bili\.bob         ピリオドは正しくエスケープされています
+
+ +

無効な識別子

+ +
34rem             数字で始まってはいけません
+-12rad            ダッシュで始まって数字が続いてはいけません
+bili.bob          アルファベットと数字以外でエスケープせずに使えるのは _ と - だけです
+--toto            2 つのダッシュで始まってはいけません
+'bilibob'         <string> です
+"bilibob"         <string> です
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> for will-change')}}{{Spec2('CSS Will Change')}}{{CSSxRef("will-change")}} で除外する値を定義。
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> for list-style-type')}}{{Spec2('CSS3 Counter Styles')}}キーワードの有限リストの代わりに <custom-ident> を使用。 {{CSSxRef("list-style-type")}} と {{CSSxRef("@counter-style")}} で除外する値を定義。
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> for counter-*')}}{{Spec2('CSS3 Lists')}}<identifier> から <custom-ident> へ改名。使い方を新しい counter-set プロパティへ追加。
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> for animation-name')}}{{Spec2('CSS3 Animations')}}{{CSSxRef("animation-name")}} で除外する値を定義。
{{SpecName('CSS3 Values', '#custom-idents', '<custom-ident>')}}{{Spec2('CSS3 Values')}}<identifier> から <custom-ident> へ改名。擬似型とし、除外値の使用を禁止した。
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

このデータ型は実際の型ではありませんが、許可された値をシンプルに記述するのに役立つ便利な型です。ブラウザーの互換性についての情報はありません。

+ +

関連情報

+ +
    +
  • {{CSSxRef("<ident>")}}
    • +
diff --git a/files/ja/web/css/dimension/index.html b/files/ja/web/css/dimension/index.html deleted file mode 100644 index 89792d3a7e..0000000000 --- a/files/ja/web/css/dimension/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: dimension -slug: Web/CSS/dimension -tags: - - CSS - - CSS Data Type - - CSS データ型 - - Reference - - dimension - - unit - - value - - 値 - - 単位 -translation_of: Web/CSS/dimension ---- -
{{CSSRef}}
- -

<dimension> は CSS のデータ型で、 {{CSSxRef("<number>")}} とそれに添付された単位を表します (10px など)。

- -

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

- -

構文

- -

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

- -

例

- -

妥当な dimension

- -
12px      12ピクセル
-1rem      1rem
-1.2pt     1.2ポイント
-2200ms    2200ミリ秒
-200hz     200ヘルツ
-200Hz     200ヘルツ (値は大文字小文字の区別なし)
-
- -

妥当ではない dimension

- -
12 px       単位は数値の直後に来る必要がある。
-12"px"      単位は識別子であり、引用符で囲まない。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS4 Values")}}cap, ic, lh, rlh, vi, vb を追加
{{SpecName("CSS3 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS3 Values")}}ch, rem, vw, vw, vmin, vmax, Q を追加
{{SpecName("CSS2.1", "syndata.html#numbers", "<dimension>")}}{{Spec2("CSS2.1")}}Numbers and Length において定義
{{SpecName("CSS1", "", "<dimension>")}}{{Spec2("CSS1")}}"length units" のもとに初回定義
- -

ブラウザーの対応

- -

{{Compat("css.types.dimension")}}

diff --git a/files/ja/web/css/dimension/index.md b/files/ja/web/css/dimension/index.md new file mode 100644 index 0000000000..89792d3a7e --- /dev/null +++ b/files/ja/web/css/dimension/index.md @@ -0,0 +1,80 @@ +--- +title: dimension +slug: Web/CSS/dimension +tags: + - CSS + - CSS Data Type + - CSS データ型 + - Reference + - dimension + - unit + - value + - 値 + - 単位 +translation_of: Web/CSS/dimension +--- +
{{CSSRef}}
+ +

<dimension> は CSS のデータ型で、 {{CSSxRef("<number>")}} とそれに添付された単位を表します (10px など)。

+ +

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

+ +

構文

+ +

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

+ +

例

+ +

妥当な dimension

+ +
12px      12ピクセル
+1rem      1rem
+1.2pt     1.2ポイント
+2200ms    2200ミリ秒
+200hz     200ヘルツ
+200Hz     200ヘルツ (値は大文字小文字の区別なし)
+
+ +

妥当ではない dimension

+ +
12 px       単位は数値の直後に来る必要がある。
+12"px"      単位は識別子であり、引用符で囲まない。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS4 Values")}}cap, ic, lh, rlh, vi, vb を追加
{{SpecName("CSS3 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS3 Values")}}ch, rem, vw, vw, vmin, vmax, Q を追加
{{SpecName("CSS2.1", "syndata.html#numbers", "<dimension>")}}{{Spec2("CSS2.1")}}Numbers and Length において定義
{{SpecName("CSS1", "", "<dimension>")}}{{Spec2("CSS1")}}"length units" のもとに初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.types.dimension")}}

diff --git a/files/ja/web/css/frequency-percentage/index.html b/files/ja/web/css/frequency-percentage/index.html deleted file mode 100644 index 1280eedabf..0000000000 --- a/files/ja/web/css/frequency-percentage/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: -slug: Web/CSS/frequency-percentage -tags: - - CSS - - CSS Data Type - - Data Type - - Reference - - frequency-percentage - - units - - values -translation_of: Web/CSS/frequency-percentage ---- -
{{CSSRef}}{{seecompattable}}
- -

<frequency-percentage> は CSS のデータ型で、 {{Cssxref("frequency")}} または {{Cssxref("percentage")}} が取りうる値を表します。周波数の値、例えば音声の高さは、現在どの CSS プロパティでも使用されていません。

- -

構文

- -

<frequency-percentage> の値は {{Cssxref("frequency")}} または {{Cssxref("percentage")}} です。それぞれの構文についての詳細はそれぞれのリファレンスページを参照してください。

- -

解説

- -

calc() での使用

- -

許可されている型として <frequency-percentage> が指定されているところでは、これはパーセント値が周期として解決されるので、 calc() の式で利用することができます。

- -

例

- -

有効なパーセント値

- -
90% 正のパーセント値
-+90% 先頭に + が付いた正のパーセント値
--90% 負のパーセント値 — パーセント値を使用するすべてのプロパティで有効とは限らない
- -

無効なパーセント値

- -
90 % 数値と単位の間に空白を入れてはいけない。
- -

有効な周波数値

- -
12Hz     正の整数
-4.3Hz    整数以外
-14KhZ    単位は大文字小文字の区別がないが、 SI 以外の大文字小文字の使い分けは推奨しない。
-+0Hz     先頭に + が付いた単位付きのゼロ
--0kHz    先頭に - が付いた単位付きのゼロ
- -

無効な周波数値

- -
12.0     これは単位がないため <number> であり <frequency> ではない。
-7 Hz     数値と単位の間に空白を入れてはいけない。
-0        単位のないゼロは <length> では許可されることがあるが、 <frequency> では無効。
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<frequency-percentage>')}}{{Spec2('CSS3 Values')}}<frequency-percentage> を定義。 calc() を追加
- -

ブラウザーの互換性

- -

{{Compat("css.types.frequency-percentage")}}

- -

関連情報

- -
    -
  • CSS データ型
    • -
  • CSS 値と単位
    • -
  • 関連する CSS データ型: -
      -
    • {{cssxref("frequency", "<frequency>")}}
      • -
    • {{cssxref("percentage", "<percentage>")}}
      • -
    -
    • -
diff --git a/files/ja/web/css/frequency-percentage/index.md b/files/ja/web/css/frequency-percentage/index.md new file mode 100644 index 0000000000..1280eedabf --- /dev/null +++ b/files/ja/web/css/frequency-percentage/index.md @@ -0,0 +1,93 @@ +--- +title: +slug: Web/CSS/frequency-percentage +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - frequency-percentage + - units + - values +translation_of: Web/CSS/frequency-percentage +--- +
{{CSSRef}}{{seecompattable}}
+ +

<frequency-percentage> は CSS のデータ型で、 {{Cssxref("frequency")}} または {{Cssxref("percentage")}} が取りうる値を表します。周波数の値、例えば音声の高さは、現在どの CSS プロパティでも使用されていません。

+ +

構文

+ +

<frequency-percentage> の値は {{Cssxref("frequency")}} または {{Cssxref("percentage")}} です。それぞれの構文についての詳細はそれぞれのリファレンスページを参照してください。

+ +

解説

+ +

calc() での使用

+ +

許可されている型として <frequency-percentage> が指定されているところでは、これはパーセント値が周期として解決されるので、 calc() の式で利用することができます。

+ +

例

+ +

有効なパーセント値

+ +
90% 正のパーセント値
++90% 先頭に + が付いた正のパーセント値
+-90% 負のパーセント値 — パーセント値を使用するすべてのプロパティで有効とは限らない
+ +

無効なパーセント値

+ +
90 % 数値と単位の間に空白を入れてはいけない。
+ +

有効な周波数値

+ +
12Hz     正の整数
+4.3Hz    整数以外
+14KhZ    単位は大文字小文字の区別がないが、 SI 以外の大文字小文字の使い分けは推奨しない。
++0Hz     先頭に + が付いた単位付きのゼロ
+-0kHz    先頭に - が付いた単位付きのゼロ
+ +

無効な周波数値

+ +
12.0     これは単位がないため <number> であり <frequency> ではない。
+7 Hz     数値と単位の間に空白を入れてはいけない。
+0        単位のないゼロは <length> では許可されることがあるが、 <frequency> では無効。
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<frequency-percentage>')}}{{Spec2('CSS3 Values')}}<frequency-percentage> を定義。 calc() を追加
+ +

ブラウザーの互換性

+ +

{{Compat("css.types.frequency-percentage")}}

+ +

関連情報

+ +
    +
  • CSS データ型
    • +
  • CSS 値と単位
    • +
  • 関連する CSS データ型: +
      +
    • {{cssxref("frequency", "<frequency>")}}
      • +
    • {{cssxref("percentage", "<percentage>")}}
      • +
    +
    • +
diff --git a/files/ja/web/css/frequency/index.html b/files/ja/web/css/frequency/index.html deleted file mode 100644 index a286230b03..0000000000 --- a/files/ja/web/css/frequency/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: -slug: Web/CSS/frequency -tags: - - CSS - - CSS データ型 - - CSS 値と単位 - - Layout - - Reference -translation_of: Web/CSS/frequency ---- -
{{CSSRef}}
- -

CSS の <frequency> データ型は、話し声の高さなどの周波数の値を表します。今のところ、どの CSS プロパティでも使われていません。

- -

構文

- -

<frequency> データ型は、 {{cssxref("<number>")}} とその後に以下に挙げる単位のうちの一つから成ります。他の CSS の数値と同様、単位と数値の間には空白を置きません。

- -

単位

- -
-
Hz
-
ヘルツ単位の周波数を表します。例： 0Hz、 1500Hz、 10000Hz
-
kHz
-
キロヘルツ単位の周波数を表します。例： 0kHz、 1.5kHz、 10kHz
-
- -
-

メモ: 0 の数値は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 0 は無効で 0Hz や 0kHz を表すものではありません。単位の大文字と小文字は区別されませんが、国際単位系の表記に従って、 Hz や kHz の H を大文字にするのが良い習慣です。

-
- -

例

- -

有効な周波数の値

- -
12Hz     正の整数
-4.3Hz    非整数
-14KhZ    単位は大文字小文字を区別しません（ただ、国際単位系の表記が推奨されます）
-+0Hz     先行する + のあるゼロと単位
--0kHz    先行する - のあるゼロと単位
- -

無効な周波数の値

- -
12.0     これは {{cssxref("<number>")}} で、<frequency> ではありません。単位が必須です。
-7 Hz     {{cssxref("<number>")}} と単位の間に空白を置いてはいけません
-0        単位のないゼロは {{cssxref("<length>")}} では利用できますが、 <frequency> では無効です。
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}{{Spec2('CSS3 Values')}}初回定義。
- -
-

メモ: このデータ型は初め、 CSS Level 2 の現在は廃止された aural メディアタイプで、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で <frequency> データ型が再導入されました。

-
- -

ブラウザーの対応

- -

{{Compat("css.types.frequency")}}

diff --git a/files/ja/web/css/frequency/index.md b/files/ja/web/css/frequency/index.md new file mode 100644 index 0000000000..a286230b03 --- /dev/null +++ b/files/ja/web/css/frequency/index.md @@ -0,0 +1,74 @@ +--- +title: +slug: Web/CSS/frequency +tags: + - CSS + - CSS データ型 + - CSS 値と単位 + - Layout + - Reference +translation_of: Web/CSS/frequency +--- +
{{CSSRef}}
+ +

CSS の <frequency> データ型は、話し声の高さなどの周波数の値を表します。今のところ、どの CSS プロパティでも使われていません。

+ +

構文

+ +

<frequency> データ型は、 {{cssxref("<number>")}} とその後に以下に挙げる単位のうちの一つから成ります。他の CSS の数値と同様、単位と数値の間には空白を置きません。

+ +

単位

+ +
+
Hz
+
ヘルツ単位の周波数を表します。例： 0Hz、 1500Hz、 10000Hz
+
kHz
+
キロヘルツ単位の周波数を表します。例： 0kHz、 1.5kHz、 10kHz
+
+ +
+

メモ: 0 の数値は単位に関わらず常に同じですが、単位は省略できません。言い換えれば、 0 は無効で 0Hz や 0kHz を表すものではありません。単位の大文字と小文字は区別されませんが、国際単位系の表記に従って、 Hz や kHz の H を大文字にするのが良い習慣です。

+
+ +

例

+ +

有効な周波数の値

+ +
12Hz     正の整数
+4.3Hz    非整数
+14KhZ    単位は大文字小文字を区別しません（ただ、国際単位系の表記が推奨されます）
++0Hz     先行する + のあるゼロと単位
+-0kHz    先行する - のあるゼロと単位
+ +

無効な周波数の値

+ +
12.0     これは {{cssxref("<number>")}} で、<frequency> ではありません。単位が必須です。
+7 Hz     {{cssxref("<number>")}} と単位の間に空白を置いてはいけません
+0        単位のないゼロは {{cssxref("<length>")}} では利用できますが、 <frequency> では無効です。
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}{{Spec2('CSS3 Values')}}初回定義。
+ +
+

メモ: このデータ型は初め、 CSS Level 2 の現在は廃止された aural メディアタイプで、音声の高さを定義するために導入されました。現時点ではこのデータ型を使う CSS プロパティはありませんが、 CSS 3 で <frequency> データ型が再導入されました。

+
+ +

ブラウザーの対応

+ +

{{Compat("css.types.frequency")}}

diff --git a/files/ja/web/css/integer/index.html b/files/ja/web/css/integer/index.html deleted file mode 100644 index 2d4976e00e..0000000000 --- a/files/ja/web/css/integer/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: -slug: Web/CSS/integer -tags: - - CSS - - CSS データ型 - - Reference - - Web -translation_of: Web/CSS/integer ---- -
{{CSSRef}}
- -

<integer> は CSS のデータ型で、 {{cssxref("number")}} の特殊型であり、正と負の整数を表現します。 integer は {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} など、数多くの CSS プロパティで使用することができます。

- -

構文

- -

<integer> データ型は数桁の10進数、 0 から 9 までを含み、任意でその前に単一の + または - の符号が付きます。 integer に関連付けられた単位はありません。

- -
公式には、有効な <integer> 値の範囲は決められていません。 Opera では 215-1、 IE では220-1 まで、その他のブラウザーではそれ以上の値に対応しています。 CSS3 Values の策定中には対応すべき最小範囲について多くの議論がありました。 LC 段階の 2012 年 4 月の最新の決定では、 [-227-1; 227-1] でしたが、# しかし 224-1 や 230-1 のような他の値も提案されていました。しかし、最新の仕様書では範囲を定めなくなりました。
- -

補間

- -

アニメーション時には、 <integer> データ型の値は離散的に整数を使用して補間されます。実数、すなわち浮動小数点で計算が行われた場合、離散値は floor 関数を使って求められます。補間の速度は、アニメーションに結びつけられた timing function で決められます。

- -

例

- -

妥当な integer の値

- -
12          正の整数 (先頭の + なし)
-+123        正の整数 (先頭の + あり)
--456        負の整数
-0           ゼロ
-+0          ゼロ、先頭の + つき
--0          ゼロ、先頭の - なし
-
- -

不正な integer の値

- -
12.0        整数を表していますが、これは <number> であり、<integer> ではありません。
-12.         小数点を含んではいけません。
-+---12      先頭に置ける +/- は 1 つだけです。
-ten         文字は使えません。
-_5          記号は使えません。
-\35         エスケープを使った Unicode 文字は、それが整数を表す場合でも (これは 5 です) 使えません。
-\4E94       アラビア数字以外の数字は使えません (これは日本語の「五」です)。
-3e4         指数表記は使えません。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Values', '#integers', '<integer>')}}{{Spec2('CSS4 Values')}}重要な変更はなし。
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}}重要な変更はなし。
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}明示的な定義
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}暗黙的な定義
- -

ブラウザーの互換性

- -
-

{{Compat("css.types.integer")}}

-
- -

関連情報

- -
    -
  • {{cssxref("<number>")}}
    • -
diff --git a/files/ja/web/css/integer/index.md b/files/ja/web/css/integer/index.md new file mode 100644 index 0000000000..2d4976e00e --- /dev/null +++ b/files/ja/web/css/integer/index.md @@ -0,0 +1,93 @@ +--- +title: +slug: Web/CSS/integer +tags: + - CSS + - CSS データ型 + - Reference + - Web +translation_of: Web/CSS/integer +--- +
{{CSSRef}}
+ +

<integer> は CSS のデータ型で、 {{cssxref("number")}} の特殊型であり、正と負の整数を表現します。 integer は {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} など、数多くの CSS プロパティで使用することができます。

+ +

構文

+ +

<integer> データ型は数桁の10進数、 0 から 9 までを含み、任意でその前に単一の + または - の符号が付きます。 integer に関連付けられた単位はありません。

+ +
公式には、有効な <integer> 値の範囲は決められていません。 Opera では 215-1、 IE では220-1 まで、その他のブラウザーではそれ以上の値に対応しています。 CSS3 Values の策定中には対応すべき最小範囲について多くの議論がありました。 LC 段階の 2012 年 4 月の最新の決定では、 [-227-1; 227-1] でしたが、# しかし 224-1 や 230-1 のような他の値も提案されていました。しかし、最新の仕様書では範囲を定めなくなりました。
+ +

補間

+ +

アニメーション時には、 <integer> データ型の値は離散的に整数を使用して補間されます。実数、すなわち浮動小数点で計算が行われた場合、離散値は floor 関数を使って求められます。補間の速度は、アニメーションに結びつけられた timing function で決められます。

+ +

例

+ +

妥当な integer の値

+ +
12          正の整数 (先頭の + なし)
++123        正の整数 (先頭の + あり)
+-456        負の整数
+0           ゼロ
++0          ゼロ、先頭の + つき
+-0          ゼロ、先頭の - なし
+
+ +

不正な integer の値

+ +
12.0        整数を表していますが、これは <number> であり、<integer> ではありません。
+12.         小数点を含んではいけません。
++---12      先頭に置ける +/- は 1 つだけです。
+ten         文字は使えません。
+_5          記号は使えません。
+\35         エスケープを使った Unicode 文字は、それが整数を表す場合でも (これは 5 です) 使えません。
+\4E94       アラビア数字以外の数字は使えません (これは日本語の「五」です)。
+3e4         指数表記は使えません。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#integers', '<integer>')}}{{Spec2('CSS4 Values')}}重要な変更はなし。
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}}重要な変更はなし。
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}明示的な定義
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}暗黙的な定義
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.types.integer")}}

+
+ +

関連情報

+ +
    +
  • {{cssxref("<number>")}}
    • +
diff --git a/files/ja/web/css/length-percentage/index.html b/files/ja/web/css/length-percentage/index.html deleted file mode 100644 index 1a6ef60dc7..0000000000 --- a/files/ja/web/css/length-percentage/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: -slug: Web/CSS/length-percentage -tags: - - CSS - - CSS Data Type - - CSS データ型 - - Reference - - length-percentage - - units - - values - - 値 - - 単位 -translation_of: Web/CSS/length-percentage ---- -
{{CSSRef}}
- -

<length-percentage> は CSS のデータ型で、 {{Cssxref("length")}} または {{Cssxref("percentage")}} が取りうる値を表します。

- -

構文

- -

この型に利用できる個々の構文の詳細は、 {{Cssxref("length")}} および {{Cssxref("percentage")}} の文書を参照してください。

- -

calc() での使用

- -

許可されている型として <length-percentage> が指定されているところでは、これはパーセント値が長さとして解決されるので、 calc() の式で利用することができます。したがって、以下のすべての値が {{Cssxref("width")}} で利用できます。

- -
width: 200px
-width: 20%
-width: calc(100% - 200px)
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS3 Values')}}<length-percentage> を定義。 calc() を追加
- -

ブラウザーの対応

- -

{{Compat("css.types.length-percentage")}}

diff --git a/files/ja/web/css/length-percentage/index.md b/files/ja/web/css/length-percentage/index.md new file mode 100644 index 0000000000..1a6ef60dc7 --- /dev/null +++ b/files/ja/web/css/length-percentage/index.md @@ -0,0 +1,59 @@ +--- +title: +slug: Web/CSS/length-percentage +tags: + - CSS + - CSS Data Type + - CSS データ型 + - Reference + - length-percentage + - units + - values + - 値 + - 単位 +translation_of: Web/CSS/length-percentage +--- +
{{CSSRef}}
+ +

<length-percentage> は CSS のデータ型で、 {{Cssxref("length")}} または {{Cssxref("percentage")}} が取りうる値を表します。

+ +

構文

+ +

この型に利用できる個々の構文の詳細は、 {{Cssxref("length")}} および {{Cssxref("percentage")}} の文書を参照してください。

+ +

calc() での使用

+ +

許可されている型として <length-percentage> が指定されているところでは、これはパーセント値が長さとして解決されるので、 calc() の式で利用することができます。したがって、以下のすべての値が {{Cssxref("width")}} で利用できます。

+ +
width: 200px
+width: 20%
+width: calc(100% - 200px)
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS3 Values')}}<length-percentage> を定義。 calc() を追加
+ +

ブラウザーの対応

+ +

{{Compat("css.types.length-percentage")}}

diff --git a/files/ja/web/css/max()/index.html b/files/ja/web/css/max()/index.html deleted file mode 100644 index cca3cfc571..0000000000 --- a/files/ja/web/css/max()/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: max() -slug: Web/CSS/max() -tags: - - CSS - - CSS Function - - Calculate - - Compute - - Function - - Layout - - Reference - - Web - - max -browser-compat: css.types.max -translation_of: Web/CSS/max() ---- -
{{CSSRef}}
- -

max() は CSS の関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 max() 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。

- -
{{EmbedInteractiveExample("pages/css/function-max.html")}}
- -

上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 max() の値はプロパティが取りうる最小の値を提供するものとして考えてください。

- -

構文

- -

max() 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。

- -

式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や max() 関数を用いることができます。

- -

式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

- -

メモ

- -
    -
  • 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります。
    • -
  • min() や他の max() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
    • -
  • 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
    • -
  • min() と max() の値を組み合わせたり、 max() を clamp() や calc() 関数の中で使用したりすることができます (そしてよく必要になります)。
    • -
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

フォントに最小値を設定する

- -

CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。

- -

多少の CSS を見てみましょう。

- -
h1 {
-  font-size: 2rem;
-}
-h1.responsive {
-  font-size: max(4vw, 2em, 2rem);
-}
-
- -

フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。

- -
<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>
-
- -

{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}

- -

max() 関数はプロパティに許される最小値を探るものと考えてください。

- -

アクセシビリティの考慮

- -

max() を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を max() の中で入れ子にして使用し、その二番目の値として常に十分な大きさの相対的な長さの単位を持つようにします。

- -
small {
-  font-size: max(min(0.5vw, 0.5em), 1rem);
-}
- -

これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは 1rem になります。

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Values", "#funcdef-max", "max()")}}{{Spec2("CSS4 Values")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- -
    -
  • {{CSSxRef("calc()", "calc()")}}
    • -
  • {{CSSxRef("clamp()", "clamp()")}}
    • -
  • {{CSSxRef("min()", "min()")}}
    • -
  • CSS 値
    • -
diff --git a/files/ja/web/css/max()/index.md b/files/ja/web/css/max()/index.md new file mode 100644 index 0000000000..cca3cfc571 --- /dev/null +++ b/files/ja/web/css/max()/index.md @@ -0,0 +1,117 @@ +--- +title: max() +slug: Web/CSS/max() +tags: + - CSS + - CSS Function + - Calculate + - Compute + - Function + - Layout + - Reference + - Web + - max +browser-compat: css.types.max +translation_of: Web/CSS/max() +--- +
{{CSSRef}}
+ +

max() は CSS の関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 max() 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。

+ +
{{EmbedInteractiveExample("pages/css/function-max.html")}}
+ +

上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 max() の値はプロパティが取りうる最小の値を提供するものとして考えてください。

+ +

構文

+ +

max() 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。

+ +

式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や max() 関数を用いることができます。

+ +

式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

+ +

メモ

+ +
    +
  • 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります。
    • +
  • min() や他の max() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
    • +
  • 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
    • +
  • min() と max() の値を組み合わせたり、 max() を clamp() や calc() 関数の中で使用したりすることができます (そしてよく必要になります)。
    • +
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

フォントに最小値を設定する

+ +

CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。

+ +

多少の CSS を見てみましょう。

+ +
h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+
+ +

フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。

+ +
<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>
+
+ +

{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}

+ +

max() 関数はプロパティに許される最小値を探るものと考えてください。

+ +

アクセシビリティの考慮

+ +

max() を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を max() の中で入れ子にして使用し、その二番目の値として常に十分な大きさの相対的な長さの単位を持つようにします。

+ +
small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
+ +

これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは 1rem になります。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Values", "#funcdef-max", "max()")}}{{Spec2("CSS4 Values")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ +
    +
  • {{CSSxRef("calc()", "calc()")}}
    • +
  • {{CSSxRef("clamp()", "clamp()")}}
    • +
  • {{CSSxRef("min()", "min()")}}
    • +
  • CSS 値
    • +
diff --git a/files/ja/web/css/min()/index.html b/files/ja/web/css/min()/index.html deleted file mode 100644 index c696ddf104..0000000000 --- a/files/ja/web/css/min()/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: min() -slug: Web/CSS/min() -tags: - - CSS - - CSS Function - - CSS 関数 - - Calculate - - Compute - - Function - - Layout - - Reference - - min -translation_of: Web/CSS/min() ---- -
{{CSSRef}}
- -

min() は CSS 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 min() 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。

- -
/* プロパティ: min(式 [, 式]) */
-width: min(10vw, 4em, 80px);
-
- -

上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 min() の値はプロパティが取りうる最大の値を提供するものとして考えてください。

- -

構文

- -

min() 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。

- -

式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr", "attr()")}} などのその他の式にすることができます。

- -

必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

- -

メモ

- -
    -
  • 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります。
    • -
  • max() や他の min() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
    • -
  • 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
    • -
  • min() と max() の値を組み合わせたり、 min() を clamp() や calc() 関数の中で使用したりすることができます (そしてよく必要になります)。
    • -
  • 複数の制約を適用する場合は、3つ以上の引数を与えることができます。
    • -
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

最大サイズまで広がる画像

- -

min() を使用すると、画像の最大幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は小さい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。

- -
.logo {
-  width: min(50vw, 300px);
-}
-
- -
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
- -

{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "110")}}

- -

この例では、ロゴの幅はビューポートが 600px 未満まで狭くならない限り 300px になり、ここからビューポートの幅の 50% を保ちながら、ビューポートが縮小するに従って縮小します。

- -

ラベルと入力欄のために最大値を設定する

- -

CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。

- -

いくらか CSS を見てください。

- -
input, label {
-  padding: 2px;
-  box-sizing: border-box;
-  display: inline-block;
-  width: min(40%, 400px);
-  background-color: pink;
-}
-
-form {
-  margin: 4px;
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。

- -
<form>
-  <label>Type something:</label>
-  <input type="text">
-</form>
-
- -

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

- -

アクセシビリティの考慮事項

- -

min() を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。

- -

-
-
-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}初回定義

-
-
ブラウザーの互換性

-
-
{{Compat("css.types.min")}}

-
-
関連情報

-
-
    
- 
  • {{CSSxRef("calc", "calc()")}}
    • 
- 
  • {{CSSxRef("clamp", "clamp()")}}
    • 
- 
  • {{CSSxRef("max", "max()")}}
    • 
- 
  • CSS 値
    • 
-

diff --git a/files/ja/web/css/min()/index.md b/files/ja/web/css/min()/index.md
new file mode 100644
index 0000000000..c696ddf104
--- /dev/null
+++ b/files/ja/web/css/min()/index.md
@@ -0,0 +1,137 @@
+---
+title: min()
+slug: Web/CSS/min()
+tags:
+  - CSS
+  - CSS Function
+  - CSS 関数
+  - Calculate
+  - Compute
+  - Function
+  - Layout
+  - Reference
+  - min
+translation_of: Web/CSS/min()
+---
+
{{CSSRef}}

+
+
min() は CSS 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 min() 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。

+
+
/* プロパティ: min(式 [, 式]) */
+width: min(10vw, 4em, 80px);
+

+
+
上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 min() の値はプロパティが取りうる最大の値を提供するものとして考えてください。

+
+
構文

+
+
min() 関数は、引数としてカンマで区切った1つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。

+
+
式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr", "attr()")}} などのその他の式にすることができます。

+
+
必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。

+
+
メモ

+
+
    
+ 
  • 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも auto が指定されていたかのように扱われる可能性があります。
    • 
+ 
  • max() や他の min() 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 calc() 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。
    • 
+ 
  • 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の <length> 構文値を使用できます。
    • 
+ 
  • min() と max() の値を組み合わせたり、 min() を clamp() や calc() 関数の中で使用したりすることができます (そしてよく必要になります)。
    • 
+ 
  • 複数の制約を適用する場合は、3つ以上の引数を与えることができます。
    • 
+

+
+
形式文法

+
+{{CSSSyntax}}
+
+
例

+
+
最大サイズまで広がる画像

+
+
min() を使用すると、画像の最大幅を簡単に設定することができます。この例では、メディアクエリを使用せずに、 CSS は小さい端末ではウィンドウの半分まで伸びるロゴを生成しますが、広い端末では 300px を超えないようにしています。

+
+
.logo {
+  width: min(50vw, 300px);
+}
+

+
+
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">

+
+
{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "110")}}

+
+
この例では、ロゴの幅はビューポートが 600px 未満まで狭くならない限り 300px になり、ここからビューポートの幅の 50% を保ちながら、ビューポートが縮小するに従って縮小します。

+
+
ラベルと入力欄のために最大値を設定する

+
+
CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。

+
+
いくらか CSS を見てください。

+
+
input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+

+
+
ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。

+
+
<form>
+  <label>Type something:</label>
+  <input type="text">
+</form>
+

+
+
{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

+
+
アクセシビリティの考慮事項

+
+
min() を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。

+
+

+
+
+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}初回定義

+
+
ブラウザーの互換性

+
+
{{Compat("css.types.min")}}

+
+
関連情報

+
+
    
+ 
  • {{CSSxRef("calc", "calc()")}}
    • 
+ 
  • {{CSSxRef("clamp", "clamp()")}}
    • 
+ 
  • {{CSSxRef("max", "max()")}}
    • 
+ 
  • CSS 値
    • 
+

diff --git a/files/ja/web/css/number/index.html b/files/ja/web/css/number/index.html
deleted file mode 100644
index cef3982e3b..0000000000
--- a/files/ja/web/css/number/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: 
-slug: Web/CSS/number
-tags:
-  - CSS
-  - CSS データ型
-  - Number
-  - Reference
-  - ウェブ
-  - レイアウト
-  - 数値
-translation_of: Web/CSS/number
----
-
{{CSSRef}}

-
-
CSS の <number> データ型は、整数または小数部分のある数値を表します。

-
-
構文

-
-
<number> の構文は {{CSSxRef("<integer>")}} 構文を拡張したものです。小数は . と続く1桁以上の10進数で表し、整数部に追加することができます。数値に関連付けられた単位はありません。

-
-
補間

-
-
<number> データ型の値はアニメーション用に補間可能です。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられた timing function で決められます。

-
-
例

-
-
有効な数値

-
-
12          生の <integer> は <number> でもある
-4.01        正の実数
--456.8      負の実数
-0.0         ゼロ
-+0.0        + に続くゼロ
--0.0        - に続くゼロ
-.60         前のゼロがない小数値
-10e3        Scientific notation
--3.4e-2     Complicated scientific notation
-

-
-
無効な数値

-
-
12.         小数点の後ろには数字が続かなくてはなりません
-+-12.2      前に置ける +/- は 1 つだけです
-12.1.1      小数点は1つしか置けません
-

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName("CSS4 Values", "#numbers", "<number>")}}{{Spec2("CSS4 Values")}}重要な変更なし
{{SpecName("CSS3 Values", "#numbers", "<number>")}}{{Spec2("CSS3 Values")}}重要な変更なし
{{SpecName("CSS2.1", "syndata.html#numbers", "<number>")}}{{Spec2("CSS2.1")}}明示的な定義
{{SpecName("CSS1", "", "<number>")}}{{Spec2("CSS1")}}暗黙的な定義

-
-
ブラウザーの互換性

-
-
{{Compat("css.types.number")}}

-
-
関連情報

-
-
    
- 
  • {{CSSxRef("<integer>")}}
    • 
-

diff --git a/files/ja/web/css/number/index.md b/files/ja/web/css/number/index.md
new file mode 100644
index 0000000000..cef3982e3b
--- /dev/null
+++ b/files/ja/web/css/number/index.md
@@ -0,0 +1,90 @@
+---
+title: 
+slug: Web/CSS/number
+tags:
+  - CSS
+  - CSS データ型
+  - Number
+  - Reference
+  - ウェブ
+  - レイアウト
+  - 数値
+translation_of: Web/CSS/number
+---
+
{{CSSRef}}

+
+
CSS の <number> データ型は、整数または小数部分のある数値を表します。

+
+
構文

+
+
<number> の構文は {{CSSxRef("<integer>")}} 構文を拡張したものです。小数は . と続く1桁以上の10進数で表し、整数部に追加することができます。数値に関連付けられた単位はありません。

+
+
補間

+
+
<number> データ型の値はアニメーション用に補間可能です。実数、浮動小数点数として補間されます。補間の速度は、アニメーションに関連付けられた timing function で決められます。

+
+
例

+
+
有効な数値

+
+
12          生の <integer> は <number> でもある
+4.01        正の実数
+-456.8      負の実数
+0.0         ゼロ
++0.0        + に続くゼロ
+-0.0        - に続くゼロ
+.60         前のゼロがない小数値
+10e3        Scientific notation
+-3.4e-2     Complicated scientific notation
+

+
+
無効な数値

+
+
12.         小数点の後ろには数字が続かなくてはなりません
++-12.2      前に置ける +/- は 1 つだけです
+12.1.1      小数点は1つしか置けません
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName("CSS4 Values", "#numbers", "<number>")}}{{Spec2("CSS4 Values")}}重要な変更なし
{{SpecName("CSS3 Values", "#numbers", "<number>")}}{{Spec2("CSS3 Values")}}重要な変更なし
{{SpecName("CSS2.1", "syndata.html#numbers", "<number>")}}{{Spec2("CSS2.1")}}明示的な定義
{{SpecName("CSS1", "", "<number>")}}{{Spec2("CSS1")}}暗黙的な定義

+
+
ブラウザーの互換性

+
+
{{Compat("css.types.number")}}

+
+
関連情報

+
+
    
+ 
  • {{CSSxRef("<integer>")}}
    • 
+

diff --git a/files/ja/web/css/percentage/index.html b/files/ja/web/css/percentage/index.html
deleted file mode 100644
index ca4ed73a96..0000000000
--- a/files/ja/web/css/percentage/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: 
-slug: Web/CSS/percentage
-tags:
-  - CSS
-  - CSS Data Type
-  - Data Type
-  - Layout
-  - Reference
-  - Web
-translation_of: Web/CSS/percentage
----
-
{{CSSRef}}

-
-
<percentage> は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 {{CSSxRef("width")}}、 {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}、 {{CSSxRef("font-size")}} など、たくさんのプロパティでパーセント値を使うことができます。

-
-
注: 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 ({{CSSxRef("<length>")}} 値に向けたピクセル単位の幅など) にのみアクセスできます。

-
-
構文

-
-
<percentage> データ型は、 {{CSSxRef("<number>")}} とそれに続くパーセント記号 (%) から成ります。任意で、先行して符号 (+ または -) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。

-
-
補間

-
-
アニメーションをする時、 <percentage> データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられたタイミング関数で定義します。

-
-
例

-
-
幅と左マージン

-
-
<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;">
-    Width: 30%, Left margin: 60%
-  </div>
-</div>
-

-
-
以上の HTML は以下のような出力になります。

-
-
{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}

-
-
font-size

-
-
<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)}}

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('CSS4 Values', '#percentages', '<percentage>')}}{{Spec2('CSS4 Values')}}目立った変更はなし。
{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}{{Spec2('CSS3 Values')}}CSS Level 2 (Revision 1) から目立った変更なし。
{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}{{Spec2('CSS2.1')}}CSS Level 1 から変更なし。
{{SpecName('CSS1', '#percentage-units', '<percentage>')}}{{Spec2('CSS1')}}初回定義。

-
-
ブラウザーの互換性

-
-
{{Compat("css.types.percentage")}}

diff --git a/files/ja/web/css/percentage/index.md b/files/ja/web/css/percentage/index.md
new file mode 100644
index 0000000000..ca4ed73a96
--- /dev/null
+++ b/files/ja/web/css/percentage/index.md
@@ -0,0 +1,94 @@
+---
+title: 
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+translation_of: Web/CSS/percentage
+---
+
{{CSSRef}}

+
+
<percentage> は CSS のデータ型で、パーセント値による割合を表します。要素の親オブジェクトからの相対的な寸法を定義するためによく使われます。 {{CSSxRef("width")}}、 {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}、 {{CSSxRef("font-size")}} など、たくさんのプロパティでパーセント値を使うことができます。

+
+
注: 継承されるのは計算値だけです。親要素のプロパティでパーセント値が使われても、継承したプロパティではパーセント値ではなく、実数値 ({{CSSxRef("<length>")}} 値に向けたピクセル単位の幅など) にのみアクセスできます。

+
+
構文

+
+
<percentage> データ型は、 {{CSSxRef("<number>")}} とそれに続くパーセント記号 (%) から成ります。任意で、先行して符号 (+ または -) を、負の値が許可されない値であってもすべてのプロパティに付けることができます。他の CSS の数値と同様、記号と数値の間には空白を置きません。

+
+
補間

+
+
アニメーションをする時、 <percentage> データ型は浮動小数点の実数として補間が行われます。補間の速度は、アニメーションに関連付けられたタイミング関数で定義します。

+
+
例

+
+
幅と左マージン

+
+
<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;">
+    Width: 30%, Left margin: 60%
+  </div>
+</div>
+

+
+
以上の HTML は以下のような出力になります。

+
+
{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}

+
+
font-size

+
+
<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)}}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Values', '#percentages', '<percentage>')}}{{Spec2('CSS4 Values')}}目立った変更はなし。
{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}{{Spec2('CSS3 Values')}}CSS Level 2 (Revision 1) から目立った変更なし。
{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}{{Spec2('CSS2.1')}}CSS Level 1 から変更なし。
{{SpecName('CSS1', '#percentage-units', '<percentage>')}}{{Spec2('CSS1')}}初回定義。

+
+
ブラウザーの互換性

+
+
{{Compat("css.types.percentage")}}

diff --git a/files/ja/web/css/position_value/index.html b/files/ja/web/css/position_value/index.html
deleted file mode 100644
index 0969fd97b3..0000000000
--- a/files/ja/web/css/position_value/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: 
-slug: Web/CSS/position_value
-tags:
-  - CSS
-  - CSS Data Type
-  - CSS データ型
-  - Data Type
-  - Layout
-  - Reference
-  - Web
-  - データ型
-translation_of: Web/CSS/position_value
----
-
{{CSSRef}}

-
-
<position> (または <bg-position>) は CSS の データ型で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。

-
-

-
注: <position> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。

-

-
-
構文

-
-
The <position> データ型は1～2つのキーワードと、任意のオフセットで定義されます。

-
-
キーワード値は center、 top、 right、 bottom、 left です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 center は左右の辺の中心か、上下の辺の中心を表します。

-
-
オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。

-
-
単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の center に設定されます。

-
-
/* 値1つの構文 */
-keyword                  /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */
-value                    /* X 座標の位置。 Y 座標は既定値の 50% になる */
-
-/* 値2つの構文 */
-keyword keyword          /* それぞれの方向のキーワード（順不同） */
-keyword value            /* キーワードで定義された辺からのオフセット */
-value keyword            /* 水平位置を表す値、垂直位置を表すキーワード */
-value value              /* それぞれの方向（水平、垂直）の距離の値 */
-
-/* 値4つの構文 */
-keyword value keyword value /* それぞれの値はその前のキーワードからのオフセット */
-

-
-
形式文法

-
-
[
- [ left | center | right ] || [ top | center | bottom ]
-|
- [ left | center | right | <length> | <percentage> ]
- [ top | center | bottom | <length> | <percentage> ]?
-|
- [ [ left | right ] [ <length> | <percentage> ] ] &&
- [ [ top | bottom ] [ <length> | <percentage> ] ]
-]
-

-
-

-
注: {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは <position> を使用する他のプロパティでは許可されません。

-

-
-
補間

-
-
アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つのタイミング関数が用いられるため、座標は直線に移動します。

-
-
例

-
-
有効な位置

-
-
center
-left
-center top
-
-right 8.5%
-bottom 12vmin right -6px
-
-10% 20%
-8rem 14px
-

-
-
無効な位置

-
-
left right
-bottom top
-10px 15px 20px 15px
-

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}両方の定義のリンクを再掲。 {{SpecName('CSS3 Backgrounds')}} に対応する場合、 <position> の定義も使用される。
{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}{{Spec2('CSS3 Backgrounds')}}<position> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}キーワードと {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値の組み合わせを許可。
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}<position> を {{cssxref("background-position")}} の値として無名で定義。

-
-
ブラウザーの互換性

-
-
{{Compat("css.types.position")}}

-
-
See also

-
-
diff --git a/files/ja/web/css/position_value/index.md b/files/ja/web/css/position_value/index.md
new file mode 100644
index 0000000000..0969fd97b3
--- /dev/null
+++ b/files/ja/web/css/position_value/index.md
@@ -0,0 +1,136 @@
+---
+title: 
+slug: Web/CSS/position_value
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - データ型
+translation_of: Web/CSS/position_value
+---
+
{{CSSRef}}

+
+
<position> (または <bg-position>) は CSS の データ型で、二次元の座標を表し、要素ボックスからの相対的な位置を示すために用いられます。 {{cssxref("background-position")}} および {{cssxref("offset-anchor")}} で使用されています。

+
+

+
注: <position> 値で記述される最終的な位置は、要素ボックスの中である必要はありません。

+

+
+
構文

+
+
The <position> データ型は1～2つのキーワードと、任意のオフセットで定義されます。

+
+
キーワード値は center、 top、 right、 bottom、 left です。それぞれのキーワードは要素ボックスの辺または2辺の中心線を表します。使われる場所によって、 center は左右の辺の中心か、上下の辺の中心を表します。

+
+
オフセット値を指定する場合は、相対的な {{cssxref("<percentage>")}} 値か絶対的な {{cssxref("<length>")}} 値のどちらかで指定することができます。正の数は右または下（適切な方）に向けたオフセットで、負の数は逆方向のオフセットです。

+
+
単一のオフセット値のみが指定された場合は X 座標を定義し、もう一方の軸は既定値の center に設定されます。

+
+
/* 値1つの構文 */
+keyword                  /* 水平位置または垂直位置。もう一方の軸は既定値の center になる */
+value                    /* X 座標の位置。 Y 座標は既定値の 50% になる */
+
+/* 値2つの構文 */
+keyword keyword          /* それぞれの方向のキーワード（順不同） */
+keyword value            /* キーワードで定義された辺からのオフセット */
+value keyword            /* 水平位置を表す値、垂直位置を表すキーワード */
+value value              /* それぞれの方向（水平、垂直）の距離の値 */
+
+/* 値4つの構文 */
+keyword value keyword value /* それぞれの値はその前のキーワードからのオフセット */
+

+
+
形式文法

+
+
[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | <length> | <percentage> ]
+ [ top | center | bottom | <length> | <percentage> ]?
+|
+ [ [ left | right ] [ <length> | <percentage> ] ] &&
+ [ [ top | bottom ] [ <length> | <percentage> ] ]
+]
+

+
+

+
注: {{cssxref("background-position")}} プロパティも3つの値の構文を受け付けます。これは <position> を使用する他のプロパティでは許可されません。

+

+
+
補間

+
+
アニメーション時、座標の横軸と縦軸の値が独立して補間されます。ただし、補間の速度は両方の座標で1つのタイミング関数が用いられるため、座標は直線に移動します。

+
+
例

+
+
有効な位置

+
+
center
+left
+center top
+
+right 8.5%
+bottom 12vmin right -6px
+
+10% 20%
+8rem 14px
+

+
+
無効な位置

+
+
left right
+bottom top
+10px 15px 20px 15px
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}両方の定義のリンクを再掲。 {{SpecName('CSS3 Backgrounds')}} に対応する場合、 <position> の定義も使用される。
{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}{{Spec2('CSS3 Backgrounds')}}<position> を明示的に定義し、すべての辺からのオフセットに対応するよう拡張。
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}キーワードと {{cssxref("<length>")}} または {{cssxref("<percentage>")}} の値の組み合わせを許可。
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}<position> を {{cssxref("background-position")}} の値として無名で定義。

+
+
ブラウザーの互換性

+
+
{{Compat("css.types.position")}}

+
+
See also

+
+
diff --git a/files/ja/web/css/resolution/index.html b/files/ja/web/css/resolution/index.html
deleted file mode 100644
index 4cdf4eadc3..0000000000
--- a/files/ja/web/css/resolution/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: 
-slug: Web/CSS/resolution
-tags:
-  - CSS
-  - CSS データ型
-  - Reference
-  - ウェブ
-  - レイアウト
-translation_of: Web/CSS/resolution
----
-
{{CSSRef}}

-
-
<resolution> は CSS の データ型 で、メディアクエリの resolution で使われ、出力端末のピクセル密度である、解像度を表します。

-
-
画面では、長さは物理的な値ではなく、 CSS のインチ、センチメートル、またはピクセルと関連づけられます。

-
-
構文

-
-
<resolution> データ型は、厳密に正の {{cssxref("<number>")}} のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。

-
-
単位

-
-

- 
dpi

- 
1 インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、1dpi ≈ 0.39dpcm です。

- 
dpcm

- 
センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、1dpcm ≈ 2.54dpi です。

- 
dppx

- 
ピクセル (px) あたりのドット数を表します。CSS の in と CSS の px の比率は 1:96 で固定なので、1dppx は 96dpi と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。

- 
x

- 
dppx の別名です。

-

-
-

-
注記: 仮に値 0 に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると 0 は無効で、0dpi、0dpcm、0dppx のどれも表しません。

-

-
-
例

-
-
メディアクエリで使用する

-
-
@media print and (min-resolution: 300dpi) { ... }

-
-
有効な解像度

-
-
96dpi
-50.82dpcm
-3dppx
-

-
-
無効な解像度

-
-
72 dpi     数値と単位の間に空白は許可されていません。
-ten dpi    数値は10進数しか使えません。
-0          単位は必須です。
-

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('CSS4 Values', '#resolution', '<resolution>')}}{{Spec2('CSS4 Values')}}x 単位を追加
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}dppx 単位を追加
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}初回定義

-
-
ブラウザーの互換性

-
-

-
{{Compat("css.types.resolution")}}

-

-
-
関連情報

-
-
diff --git a/files/ja/web/css/resolution/index.md b/files/ja/web/css/resolution/index.md
new file mode 100644
index 0000000000..4cdf4eadc3
--- /dev/null
+++ b/files/ja/web/css/resolution/index.md
@@ -0,0 +1,99 @@
+---
+title: 
+slug: Web/CSS/resolution
+tags:
+  - CSS
+  - CSS データ型
+  - Reference
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/resolution
+---
+
{{CSSRef}}

+
+
<resolution> は CSS の データ型 で、メディアクエリの resolution で使われ、出力端末のピクセル密度である、解像度を表します。

+
+
画面では、長さは物理的な値ではなく、 CSS のインチ、センチメートル、またはピクセルと関連づけられます。

+
+
構文

+
+
<resolution> データ型は、厳密に正の {{cssxref("<number>")}} のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。

+
+
単位

+
+

+ 
dpi

+ 
1 インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、1dpi ≈ 0.39dpcm です。

+ 
dpcm

+ 
センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、1dpcm ≈ 2.54dpi です。

+ 
dppx

+ 
ピクセル (px) あたりのドット数を表します。CSS の in と CSS の px の比率は 1:96 で固定なので、1dppx は 96dpi と同じです。これは {{cssxref("image-resolution")}} で定義される、CSS の画像の既定の解像度に一致します。

+ 
x

+ 
dppx の別名です。

+

+
+

+
注記: 仮に値 0 に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると 0 は無効で、0dpi、0dpcm、0dppx のどれも表しません。

+

+
+
例

+
+
メディアクエリで使用する

+
+
@media print and (min-resolution: 300dpi) { ... }

+
+
有効な解像度

+
+
96dpi
+50.82dpcm
+3dppx
+

+
+
無効な解像度

+
+
72 dpi     数値と単位の間に空白は許可されていません。
+ten dpi    数値は10進数しか使えません。
+0          単位は必須です。
+

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Values', '#resolution', '<resolution>')}}{{Spec2('CSS4 Values')}}x 単位を追加
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}dppx 単位を追加
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}初回定義

+
+
ブラウザーの互換性

+
+

+
{{Compat("css.types.resolution")}}

+

+
+
関連情報

+
+
diff --git a/files/ja/web/css/string/index.html b/files/ja/web/css/string/index.html
deleted file mode 100644
index 80290bbea9..0000000000
--- a/files/ja/web/css/string/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: 
-slug: Web/CSS/string
-tags:
-  - CSS
-  - CSS データ型
-  - CSS Data Type
-  - Data Type
-  - Layout
-  - Reference
-  - Web
-  - ウェブ
-  - レイアウト
-translation_of: Web/CSS/string
----
-
{{CSSRef}}

-
-
<string> は CSS のデータ型で、一連の文字列を表します。文字列は {{CSSxRef("content")}}, {{CSSxRef("font-family")}}, {{CSSxRef("quotes")}} など、数々の CSS プロパティで使用されます。

-
-
構文

-
-
<string> データ型は任意の数の Unicode 文字を、二重引用符 (") または単一引用符 (') で囲んで構成します。

-
-
多くの文字は文字通りに表現されます。またすべての文字は、それぞれの 16 進数の Unicode コードポイントで表現することもできます。例えば、 \22 は二重引用符を表し、 \27 は単一引用符 (')、 \A9 は著作権記号 (©) を表します。

-
-
重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、およびバックスラッシュ自身です。例えば、 \\ は単一のバックスラッシュを生成します。

-
-
改行文字を出力するには、 \A 又は \00000A のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として \ でエスケープすると、コード内で文字列を複数行に渡らせることができます。

-
-

-
注: HTML エンティティ (&nbsp; や &#8212; など) は、 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"
-

-
-
仕様書

-
-
-	
-		
-			
-			
-			
-		
-	
-	
-		
-			
-			
-			
-		
-		
-			
-			
-			
-		
-		
-			
-			
-			
-		
-	
-
仕様書状態備考
{{SpecName('CSS3 Values', '#strings', '<string>')}}{{Spec2('CSS3 Values')}}CSS Level 2 (Revision 1) から重要な変更なし
{{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}{{Spec2('CSS2.1')}}明示的定義; Unicode の 6 桁エスケープ文字を許容
{{SpecName('CSS1', '', '<string>')}}{{Spec2('CSS1')}}暗黙的定義; Unicode の 4 桁エスケープ文字を許容

-
-
ブラウザーの互換性

-
-
{{Compat("css.types.string")}}

-
-
関連情報

-
-
diff --git a/files/ja/web/css/string/index.md b/files/ja/web/css/string/index.md
new file mode 100644
index 0000000000..80290bbea9
--- /dev/null
+++ b/files/ja/web/css/string/index.md
@@ -0,0 +1,97 @@
+---
+title: 
+slug: Web/CSS/string
+tags:
+  - CSS
+  - CSS データ型
+  - CSS Data Type
+  - Data Type
+  - Layout
+  - Reference
+  - Web
+  - ウェブ
+  - レイアウト
+translation_of: Web/CSS/string
+---
+
{{CSSRef}}

+
+
<string> は CSS のデータ型で、一連の文字列を表します。文字列は {{CSSxRef("content")}}, {{CSSxRef("font-family")}}, {{CSSxRef("quotes")}} など、数々の CSS プロパティで使用されます。

+
+
構文

+
+
<string> データ型は任意の数の Unicode 文字を、二重引用符 (") または単一引用符 (') で囲んで構成します。

+
+
多くの文字は文字通りに表現されます。またすべての文字は、それぞれの 16 進数の Unicode コードポイントで表現することもできます。例えば、 \22 は二重引用符を表し、 \27 は単一引用符 (')、 \A9 は著作権記号 (©) を表します。

+
+
重要なことは、文字によっては他の方法として、バックスラッシュでエスケープすることもできます。これらには二重引用符で囲まれた文字列内で使われる二重引用符、単一引用符で囲まれた文字列内で使われる単一引用符、およびバックスラッシュ自身です。例えば、 \\ は単一のバックスラッシュを生成します。

+
+
改行文字を出力するには、 \A 又は \00000A のように改行文字としてエスケープする必要があります。しかし、改行を行の末尾の文字として \ でエスケープすると、コード内で文字列を複数行に渡らせることができます。

+
+

+
注: HTML エンティティ (&nbsp; や &#8212; など) は、 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"
+

+
+
仕様書

+
+
+	
+		
+			
+			
+			
+		
+	
+	
+		
+			
+			
+			
+		
+		
+			
+			
+			
+		
+		
+			
+			
+			
+		
+	
+
仕様書状態備考
{{SpecName('CSS3 Values', '#strings', '<string>')}}{{Spec2('CSS3 Values')}}CSS Level 2 (Revision 1) から重要な変更なし
{{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}{{Spec2('CSS2.1')}}明示的定義; Unicode の 6 桁エスケープ文字を許容
{{SpecName('CSS1', '', '<string>')}}{{Spec2('CSS1')}}暗黙的定義; Unicode の 4 桁エスケープ文字を許容

+
+
ブラウザーの互換性

+
+
{{Compat("css.types.string")}}

+
+
関連情報

+
+
diff --git a/files/ja/web/css/time-percentage/index.html b/files/ja/web/css/time-percentage/index.html
deleted file mode 100644
index a59e248142..0000000000
--- a/files/ja/web/css/time-percentage/index.html
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 
-slug: Web/CSS/time-percentage
-tags:
-  - CSS
-  - CSS Data Type
-  - CSS データ型
-  - Reference
-  - time-percentage
-  - units
-  - values
-  - 値
-  - 単位
-translation_of: Web/CSS/time-percentage
----
-
{{CSSRef}}

-
-
<time-percentage> は CSS のデータ型で、 {{Cssxref("time")}} または {{Cssxref("percentage")}} が取りうる値を表します。

-
-
構文

-
-
この型に利用できる個々の構文の詳細は、 {{Cssxref("time")}} および {{Cssxref("percentage")}} の文書を参照してください。

-
-
calc() での使用

-
-
許可されている型として <time-percentage> が指定されているところでは、これはパーセント値が時間として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。

-
-
仕様書

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS3 Values')}}<time-percentage> を定義。 calc() を追加

-
-
ブラウザーの対応

-
-
{{Compat("css.types.time-percentage")}}

diff --git a/files/ja/web/css/time-percentage/index.md b/files/ja/web/css/time-percentage/index.md
new file mode 100644
index 0000000000..a59e248142
--- /dev/null
+++ b/files/ja/web/css/time-percentage/index.md
@@ -0,0 +1,54 @@
+---
+title: 
+slug: Web/CSS/time-percentage
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS データ型
+  - Reference
+  - time-percentage
+  - units
+  - values
+  - 値
+  - 単位
+translation_of: Web/CSS/time-percentage
+---
+
{{CSSRef}}

+
+
<time-percentage> は CSS のデータ型で、 {{Cssxref("time")}} または {{Cssxref("percentage")}} が取りうる値を表します。

+
+
構文

+
+
この型に利用できる個々の構文の詳細は、 {{Cssxref("time")}} および {{Cssxref("percentage")}} の文書を参照してください。

+
+
calc() での使用

+
+
許可されている型として <time-percentage> が指定されているところでは、これはパーセント値が時間として解決されるので、 {{Cssxref("calc()")}} の式で利用することができます。

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS3 Values')}}<time-percentage> を定義。 calc() を追加

+
+
ブラウザーの対応

+
+
{{Compat("css.types.time-percentage")}}

diff --git a/files/ja/web/css/time/index.html b/files/ja/web/css/time/index.html
deleted file mode 100644
index 2e7deda39e..0000000000
--- a/files/ja/web/css/time/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: