From 17cd5fb06a1e70c389225fbecf0a0cf29680855c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 Jan 2022 20:00:34 +0900 Subject: CSS の主要概念の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/css/value_definition_syntax/index.html | 440 --------------------- files/ja/web/css/value_definition_syntax/index.md | 440 +++++++++++++++++++++ 2 files changed, 440 insertions(+), 440 deletions(-) delete mode 100644 files/ja/web/css/value_definition_syntax/index.html create mode 100644 files/ja/web/css/value_definition_syntax/index.md (limited to 'files/ja/web/css/value_definition_syntax') diff --git a/files/ja/web/css/value_definition_syntax/index.html b/files/ja/web/css/value_definition_syntax/index.html deleted file mode 100644 index f0152a8043..0000000000 --- a/files/ja/web/css/value_definition_syntax/index.html +++ /dev/null @@ -1,440 +0,0 @@ ---- -title: 値の定義構文 -slug: Web/CSS/Value_definition_syntax -tags: - - CSS - - Guide - - Reference - - Syntax -translation_of: Web/CSS/Value_definition_syntax ---- -
{{CSSRef}}
- -

CSS の値の定義構文は、形式文法であり、 CSS プロパティや関数の有効な値の組み合わせ定義するのに使われます。この構文に加えて、有効な値の組み合わせは意味的な制約で有効値の集まりをさらに制限できます (例えば、数値を正の値に限定します)。

- -

定義構文ではどの値が許可され、相互作用が可能であるかを記述します。成分は、リテラルとみなされる文字列、キーワードや、CSS データ型の値、またはその他の CSS プロパティのいずれかです。

- -

コンポーネント値型

- -

キーワード

- -

共通キーワード

- -

引用符なしのリテラルで、字句通りの意味が事前に定義されているキーワードです。例: auto, smaller, ease-in

- -

inherit, initial, unset の特殊な場合

- -

すべての CSS プロパティで、 CSS 全体で定義されているキーワード inherit, initial, unset を使うことができます。これらは値定義に現れず、暗黙的に定義されています。

- -

リテラル

- -

CSS のスラッシュ ('/') やカンマ (',') のようないくつかの文字は、文字自身として現れ、プロパティ定義で値の区切りに使われます。カンマはよく、列挙する値や数学的な関数の引数の区切りに使われます。スラッシュはよく、意味的に異なるものの、共通の構文を持つ値の集まりの区切りに使われます。よくあるのは、一括指定 (shorthand) プロパティで、同じ型だが異なるプロパティに属する成分を区切る使い方です。

- -

どちらの記号も値定義に文字通り現れます。

- -

データ型

- -

基本データ型

- -

データの種類によっては CSS 全体で使われ、仕様書のすべての値に一度だけ定義されるものがあります。これは基本データ型と呼ばれ、名前を記号 '<' と '>' で囲って表現されます。例: {{CSSxRef("<angle>")}}, {{CSSxRef("<string>")}}, …

- -

非終端データ型 (Non-terminal data types)

- -

一般的でないデータ型ですが、非終端データ型も '<' と '>' で囲います。

- -

非終端データ型には 2 種類あります:

- - - -

構成値の組み合わせ

- -

角括弧

- -

角括弧はいくつかの対象、結合子、乗算子を取り囲み、単一の成分に変換します。ひとまとまりの成分の結合優先順を無視するために使われます。

- -
bold [ thin && <length> ]
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -

並列

- -

いくつかのキーワード、リテラル、データ型を順に置き、1 つ以上の空白で区切る置き方を並列と呼びます。並列の成分はどれも必須で、記述順どおりに出現する必要があります。

- -
bold <length> , thin
-
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -

二重アンパサンド

- -

2 つ以上の成分を二重アンパサンド && で区切ると、対象すべてが必須だが出現順は問わないという意味になります。

- -
bold && <length>
-
- -

この例は次の値に一致します。

- - - -

次の値には一致します。

- - - -
-

注: 並列は二重アンパサンドより優先されます。例えば bold thin && <length> は [ bold thin ] && <length> と同じ意味です。これは bold thin <length> や <length> bold thin を含みますが、bold <length> thin は含みません。

-
- -

二重バー

- -

2 つ以上の成分を二重バー || で区切ると、すべての対象が省略可能であることを意味します。少なくともいずれか 1つ が存在する必要がありますが、順序は問いません。一括指定プロパティの値定義に使われます。

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -
-

注: 二重アンパサンドは二重バーより優先されます。例えば bold || thin && <length> は bold || [ thin && <length> ] と同じ意味です。 bold, thin <length>, bold thin <length>, thin <length> bold を含みますが、<length> bold thin は 含みません。 bold を省略しないのなら、thin && <length> 成分全体よりも前か後ろに置く必要があるからです。

-
- -

単一バー

- -

2 つ以上の対象を単一バー | で区切ると、全対象が排他的な選択肢であることを意味します。選択肢のうち 1 つだけが存在する必要があります。利用可能なキーワードを列挙する際に使われます。

- -
<percentage> | <length> | left | center | right | top | bottom
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -
-

注: 二重バーは単一バーより優先されます。例えば bold | thin || <length> は bold | [ thin || <length> ] と同じ意味です。bold, thin, <length>, <length> thin, や thin <length> を含みますが、bold <length> は含みません。| 結合子の両側それぞれから 1つだけ対象が存在できるからです。

-
- -

成分値の乗算子

- -

乗算子は、それ以前にある対象を何回繰り返せるかを表す記号です。乗算子がなければ、対象は 1 度だけ出現する必要があります。

- -

乗算子は足し合わせることはできず、他のどの結合子より優先される点に注意してください。

- -

アスタリスク (*)

- -

アスタリスク乗算子は対象の 0 回以上の出現を示します。

- -
bold smaller*
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -

プラス (+)

- -

プラス乗算子は対象の 1 回以上の出現を示します。

- -
bold smaller+
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -

疑問符 (?)

- -

疑問符乗算子は、対象は省略可能で、0 回または 1 回出現することを意味します。

- -
bold smaller?
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -

波括弧 ({ })

- -

波括弧乗算子は、カンマで区切った 2 つの整数を囲うもので、対象が少なくともA回、最大でB回出現することを示します。

- -
bold smaller{1,3}
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -

ハッシュ記号 (#)

- -

ハッシュ記号乗算子は対象が (プラス乗算子のように) 1 回以上繰り返されるが、それぞれがカンマ (',') で区切られている必要があることを示します。

- -
bold smaller#
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -

強調点 (!)

- -

グループの後の強調点乗算子は、グループが必須であり、少なくとも1つの値を生み出す必要があることを示します。グループ内の項目の文法が内容全体を省略することができるとしていても、少なくとも1つの成分値を省略することはできません。

- -
[ bold? smaller? ]!
-
- -

この例は次の値に一致します。

- - - -

次の値には一致しません。

- - - -

概要

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
記号名前説明例
結合子
並列どちらも必須でこの順で出現する必要ありsolid <length>
&&二重アンパサンドどちらも必須だが出現順は問わない<length> && <string>
||二重バーどちらかが存在する必要があり、出現順は問わない<'border-image-outset'> || <'border-image-slice'>
|単一バー1つだけ存在する必要ありsmaller | small | normal | big | bigger
[ ]角括弧結合優先順を変えるbold [ thin && <length> ]
乗算子
乗算子なし1回solid
*アスタリスク0 回以上bold smaller*
+プラス記号1 回以上bold smaller+
?疑問符0 回か 1 回 (省略可能 (optional) を表す)bold smaller?
{A,B}波括弧少なくとも A 回、最大で B 回bold smaller{1,3}
#ハッシュ記号 (シャープ、ナンバー)1 回以上。各出現がカンマ (',') で区切られている必要があるbold smaller#
!強調点グループが少なくとも1つの値を生み出す必要がある[ bold? smaller? ]!
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2("CSS3 Values")}}ハッシュ記号乗算子を追加
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2("CSS2.1")}}二重アンパサンド結合子を追加
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2("CSS1")}}初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/value_definition_syntax/index.md b/files/ja/web/css/value_definition_syntax/index.md new file mode 100644 index 0000000000..f0152a8043 --- /dev/null +++ b/files/ja/web/css/value_definition_syntax/index.md @@ -0,0 +1,440 @@ +--- +title: 値の定義構文 +slug: Web/CSS/Value_definition_syntax +tags: + - CSS + - Guide + - Reference + - Syntax +translation_of: Web/CSS/Value_definition_syntax +--- +
{{CSSRef}}
+ +

CSS の値の定義構文は、形式文法であり、 CSS プロパティや関数の有効な値の組み合わせ定義するのに使われます。この構文に加えて、有効な値の組み合わせは意味的な制約で有効値の集まりをさらに制限できます (例えば、数値を正の値に限定します)。

+ +

定義構文ではどの値が許可され、相互作用が可能であるかを記述します。成分は、リテラルとみなされる文字列、キーワードや、CSS データ型の値、またはその他の CSS プロパティのいずれかです。

+ +

コンポーネント値型

+ +

キーワード

+ +

共通キーワード

+ +

引用符なしのリテラルで、字句通りの意味が事前に定義されているキーワードです。例: auto, smaller, ease-in

+ +

inherit, initial, unset の特殊な場合

+ +

すべての CSS プロパティで、 CSS 全体で定義されているキーワード inherit, initial, unset を使うことができます。これらは値定義に現れず、暗黙的に定義されています。

+ +

リテラル

+ +

CSS のスラッシュ ('/') やカンマ (',') のようないくつかの文字は、文字自身として現れ、プロパティ定義で値の区切りに使われます。カンマはよく、列挙する値や数学的な関数の引数の区切りに使われます。スラッシュはよく、意味的に異なるものの、共通の構文を持つ値の集まりの区切りに使われます。よくあるのは、一括指定 (shorthand) プロパティで、同じ型だが異なるプロパティに属する成分を区切る使い方です。

+ +

どちらの記号も値定義に文字通り現れます。

+ +

データ型

+ +

基本データ型

+ +

データの種類によっては CSS 全体で使われ、仕様書のすべての値に一度だけ定義されるものがあります。これは基本データ型と呼ばれ、名前を記号 '<' と '>' で囲って表現されます。例: {{CSSxRef("<angle>")}}, {{CSSxRef("<string>")}}, …

+ +

非終端データ型 (Non-terminal data types)

+ +

一般的でないデータ型ですが、非終端データ型も '<' と '>' で囲います。

+ +

非終端データ型には 2 種類あります:

+ + + +

構成値の組み合わせ

+ +

角括弧

+ +

角括弧はいくつかの対象、結合子、乗算子を取り囲み、単一の成分に変換します。ひとまとまりの成分の結合優先順を無視するために使われます。

+ +
bold [ thin && <length> ]
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +

並列

+ +

いくつかのキーワード、リテラル、データ型を順に置き、1 つ以上の空白で区切る置き方を並列と呼びます。並列の成分はどれも必須で、記述順どおりに出現する必要があります。

+ +
bold <length> , thin
+
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +

二重アンパサンド

+ +

2 つ以上の成分を二重アンパサンド && で区切ると、対象すべてが必須だが出現順は問わないという意味になります。

+ +
bold && <length>
+
+ +

この例は次の値に一致します。

+ + + +

次の値には一致します。

+ + + +
+

注: 並列は二重アンパサンドより優先されます。例えば bold thin && <length> は [ bold thin ] && <length> と同じ意味です。これは bold thin <length> や <length> bold thin を含みますが、bold <length> thin は含みません。

+
+ +

二重バー

+ +

2 つ以上の成分を二重バー || で区切ると、すべての対象が省略可能であることを意味します。少なくともいずれか 1つ が存在する必要がありますが、順序は問いません。一括指定プロパティの値定義に使われます。

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +
+

注: 二重アンパサンドは二重バーより優先されます。例えば bold || thin && <length> は bold || [ thin && <length> ] と同じ意味です。 bold, thin <length>, bold thin <length>, thin <length> bold を含みますが、<length> bold thin は 含みません。 bold を省略しないのなら、thin && <length> 成分全体よりも前か後ろに置く必要があるからです。

+
+ +

単一バー

+ +

2 つ以上の対象を単一バー | で区切ると、全対象が排他的な選択肢であることを意味します。選択肢のうち 1 つだけが存在する必要があります。利用可能なキーワードを列挙する際に使われます。

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +
+

注: 二重バーは単一バーより優先されます。例えば bold | thin || <length> は bold | [ thin || <length> ] と同じ意味です。bold, thin, <length>, <length> thin, や thin <length> を含みますが、bold <length> は含みません。| 結合子の両側それぞれから 1つだけ対象が存在できるからです。

+
+ +

成分値の乗算子

+ +

乗算子は、それ以前にある対象を何回繰り返せるかを表す記号です。乗算子がなければ、対象は 1 度だけ出現する必要があります。

+ +

乗算子は足し合わせることはできず、他のどの結合子より優先される点に注意してください。

+ +

アスタリスク (*)

+ +

アスタリスク乗算子は対象の 0 回以上の出現を示します。

+ +
bold smaller*
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +

プラス (+)

+ +

プラス乗算子は対象の 1 回以上の出現を示します。

+ +
bold smaller+
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +

疑問符 (?)

+ +

疑問符乗算子は、対象は省略可能で、0 回または 1 回出現することを意味します。

+ +
bold smaller?
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +

波括弧 ({ })

+ +

波括弧乗算子は、カンマで区切った 2 つの整数を囲うもので、対象が少なくともA回、最大でB回出現することを示します。

+ +
bold smaller{1,3}
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +

ハッシュ記号 (#)

+ +

ハッシュ記号乗算子は対象が (プラス乗算子のように) 1 回以上繰り返されるが、それぞれがカンマ (',') で区切られている必要があることを示します。

+ +
bold smaller#
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +

強調点 (!)

+ +

グループの後の強調点乗算子は、グループが必須であり、少なくとも1つの値を生み出す必要があることを示します。グループ内の項目の文法が内容全体を省略することができるとしていても、少なくとも1つの成分値を省略することはできません。

+ +
[ bold? smaller? ]!
+
+ +

この例は次の値に一致します。

+ + + +

次の値には一致しません。

+ + + +

概要

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
記号名前説明例
結合子
並列どちらも必須でこの順で出現する必要ありsolid <length>
&&二重アンパサンドどちらも必須だが出現順は問わない<length> && <string>
||二重バーどちらかが存在する必要があり、出現順は問わない<'border-image-outset'> || <'border-image-slice'>
|単一バー1つだけ存在する必要ありsmaller | small | normal | big | bigger
[ ]角括弧結合優先順を変えるbold [ thin && <length> ]
乗算子
乗算子なし1回solid
*アスタリスク0 回以上bold smaller*
+プラス記号1 回以上bold smaller+
?疑問符0 回か 1 回 (省略可能 (optional) を表す)bold smaller?
{A,B}波括弧少なくとも A 回、最大で B 回bold smaller{1,3}
#ハッシュ記号 (シャープ、ナンバー)1 回以上。各出現がカンマ (',') で区切られている必要があるbold smaller#
!強調点グループが少なくとも1つの値を生み出す必要がある[ bold? smaller? ]!
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Values", "#value-defs", "Value definition syntax")}}{{Spec2("CSS3 Values")}}ハッシュ記号乗算子を追加
{{SpecName("CSS2.1", "about.html#value-defs", "Value definition syntax")}}{{Spec2("CSS2.1")}}二重アンパサンド結合子を追加
{{SpecName("CSS1", "#notation-for-property-values", "Value definition syntax")}}{{Spec2("CSS1")}}初回定義
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf