From 00e0753b723c4ff162b000aa147d8ada537fb45b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 00:33:06 +0900 Subject: 2021/10/01 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/value_definition_syntax/index.md | 594 ++++++++++------------ 1 file changed, 273 insertions(+), 321 deletions(-) diff --git a/files/ja/web/css/value_definition_syntax/index.md b/files/ja/web/css/value_definition_syntax/index.md index f0152a8043..14433d9af0 100644 --- a/files/ja/web/css/value_definition_syntax/index.md +++ b/files/ja/web/css/value_definition_syntax/index.md @@ -3,438 +3,390 @@ title: 値の定義構文 slug: Web/CSS/Value_definition_syntax tags: - CSS - - Guide - - Reference + - ガイド + - リファレンス - Syntax translation_of: Web/CSS/Value_definition_syntax --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

コンポーネント値型

+## 成分値の種類 -

キーワード

+### キーワード -

共通キーワード

+#### 共通キーワード -

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

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

inherit, initial, unset の特殊な場合

+#### `inherit`, `initial`, `unset` の場合 -

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

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

リテラル

+### リテラル -

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

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

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

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

データ型

+### データ型 -

基本データ型

+#### 基本データ型 -

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

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

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

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

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

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

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

+非終端データ型には 2 種類あります。 - +- *同名プロパティを共有*するデータ型で、引用符で囲みます。この場合、データ型はプロパティと同じ値のセットを共有します。一括指定プロパティの定義でよく使われます。 +- *プロパティと同じ名前を共有していない*データ型。これらのデータ型は、基本データ型にとても近いものです。基本データ型と異なるのは、定義の物理的な位置だけです。この場合、通常、その定義は、それらを使用するプロパティの定義に物理的にとても近いところにあります。 -

構成値の組み合わせ

+## 成分値の組み合わせ -

角括弧

+### 角括弧 -

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

+*角括弧*はいくつかの対象、結合子、乗算子を取り囲み、単一の成分に変換します。**ひとまとまりの成分の結合優先順を無視する**ために使われます。 -
bold [ thin && <length> ]
+```css +bold [ thin && ] +``` -

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

+この例は次の値に一致します。 - +- `bold thin 2vh` +- `bold 0 thin` +- `bold thin 3.5em` -

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

+次の値には一致しません。 - +- `thin bold 3em`。 `bold` は角括弧で定義された成分と並列なので、その後に出現しなければなりません。 -

並列

+### 並列 -

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

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

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

+この例は次の値に一致します。 -
    -
  • bold 1em, thin
    • -
  • bold 0, thin
    • -
  • bold 2.5cm, thin
    • -
  • bold 3vh, thin
    • -
+- `bold 1em, thin` +- `bold 0, thin` +- `bold 2.5cm, thin` +- `bold 3vh, thin` -

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

+次の値には一致しません。 -
    -
  • thin 1em, bold。対象は記述通りの順でなければなりません
    • -
  • bold 1em thin。対象は必須です。リテラルであるカンマも存在する必要があります
    • -
  • bold 0.5ms, thin。ms 値は {{cssxref("<length>")}} ではありません。
    • -
+- `thin 1em, bold`。対象は記述通りの順でなければなりません +- `bold 1em thin`。対象は必須です。リテラルであるカンマも存在する必要があります +- `bold 0.5ms, thin`。`ms` 値は {{cssxref("<length>")}} ではありません。 -

二重アンパサンド

+### 二重アンパサンド -

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

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

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

+この例は次の値に一致します。 -
    -
  • bold 1em
    • -
  • bold 0
    • -
  • 2.5cm bold
    • -
  • 3vh bold
    • -
+- `bold 1em` +- `bold 0` +- `2.5cm bold` +- `3vh bold` -

次の値には一致します。

+次の値には一致します。 -
    -
  • bold。どちらの成分も出現しなければなりません。
    • -
  • bold 1em bold。どちらの成分も 1 度だけ出現しなければなりません。
    • -
+- `bold`。どちらの成分も出現しなければなりません。 +- `bold 1em bold`。どちらの成分も 1 度だけ出現しなければなりません。 -
-

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

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

二重バー

+### 二重バー -

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

+2 つ以上の成分を二重バー `||` で区切ると、すべての対象が省略可能であることを意味します。**少なくともいずれか 1 つが存在する必要がありますが、順序は問いません**。[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)の値定義に使われます。 -
<'border-width'> || <'border-style'> || <'border-color'>
-
+```css +<'border-width'> || <'border-style'> || <'border-color'> +``` -

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

+この例は次の値に一致します。 -
    -
  • 1em solid blue
    • -
  • blue 1em
    • -
  • solid 1px yellow
    • -
+- `1em solid blue` +- `blue 1em` +- `solid 1px yellow` -

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

+次の値には一致しません。 -
    -
  • blue yellow。各成分は最大で 1回 だけ出現できます。
    • -
  • bold。どの対象の値もこのキーワードを使えません。
    • -
+- `blue yellow`。各成分は最大で 1 回だけ出現できます。 +- `bold`。どの対象の値もこのキーワードを使えません。 -
-

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

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

単一バー

+### 単一バー -

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

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

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

+この例は次の値に一致します。 -
    -
  • 3%
    • -
  • 0
    • -
  • 3.5em
    • -
  • left
    • -
  • center
    • -
  • right
    • -
  • top
    • -
  • bottom
    • -
+- `3%` +- `0` +- `3.5em` +- `left` +- `center` +- `right` +- `top` +- `bottom` -

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

+次の値には一致しません。 -
    -
  • center 3%。各成分は 1 つだけ存在しなければなりません。
    • -
  • 3em 4.5em。成分は最大で 1 回だけ存在できます。
    • -
+- `center 3%`。各成分は 1 つだけ存在しなければなりません。 +- `3em 4.5em`。成分は最大で 1 回だけ存在できます。 -
-

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

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

成分値の乗算子

+## 成分値の乗算子 -

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

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

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

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

アスタリスク (*)

+### アスタリスク (`*`) -

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

+アスタリスク乗算子は対象の **0 回以上**の出現を示します。 -
bold smaller*
+```css +bold smaller* +``` -

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

+この例は次の値に一致します。 -
    -
  • bold
    • -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller など
    • -
+- `bold` +- `bold smaller` +- `bold smaller smaller` +- `bold smaller smaller smaller` など -

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

+次の値には一致しません。 -
    -
  • smaller。bold は並列で、他のどの smaller キーワードより先に出現する必要があります。
    • -
+- `smaller`。`bold` は並列で、他のどの `smaller` キーワードより先に出現する必要があります。 -

プラス (+)

+### プラス (`+`) -

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

+プラス乗算子は対象の **1 回以上**の出現を示します。 -
bold smaller+
+```css +bold smaller+ +``` -

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

+この例は次の値に一致します。 -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller など
    • -
+- `bold smaller` +- `bold smaller smaller` +- `bold smaller smaller smaller` など -

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

+次の値には一致しません。 -
    -
  • bold。smaller が少なくとも 1 回 出現しなければなりません。
    • -
  • smaller。bold は並列で、他のどの smaller キーワードよりも前に出現しなければなりません。
    • -
+- `bold`。`smaller` が少なくとも 1 回 出現しなければなりません。 +- `smaller`。`bold` は並列で、他のどの `smaller` キーワードよりも前に出現しなければなりません。 -

疑問符 (?)

+### 疑問符 (`?`) -

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

+*疑問符乗算子*は、対象は省略可能で、**0 回または 1 回**出現することを意味します。 -
bold smaller?
+```css +bold smaller? +``` -

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

+この例は次の値に一致します。 -
    -
  • bold
    • -
  • bold smaller
    • -
+- `bold` +- `bold smaller` -

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

+次の値には一致しません。 -
    -
  • bold smaller smaller 。smaller は最大で 1 回しか出現できません。
    • -
  • smaller。bold は並列で、他のどの smaller キーワードよりも前に出現する必要があります。
    • -
+- `bold smaller smaller` 。`smaller` は最大で 1 回しか出現できません。 +- `smaller`。`bold` は並列で、他のどの `smaller` キーワードよりも前に出現する必要があります。 -

波括弧 ({ })

+### 波括弧 (`{ }`) -

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

+波括弧乗算子は、カンマで区切った 2 つの整数を囲うもので、対象が**少なくとも A 回、最大で B 回**出現することを示します。 -
bold smaller{1,3}
+```css +bold smaller{1,3} +``` -

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

+この例は次の値に一致します。 -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller
    • -
+- `bold smaller` +- `bold smaller smaller` +- `bold smaller smaller smaller` -

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

+次の値には一致しません。 -
    -
  • bold。smaller が少なくとも 1 度出現する必要があります。
    • -
  • bold smaller smaller smaller smaller。smaller は最大で 1度しか出現できません。
    • -
  • smaller。bold は並列で、他のどの smaller キーワードよりも前に出現する必要があります。
    • -
+- `bold`。`smaller` が少なくとも 1 回出現する必要があります。 +- `bold smaller smaller smaller smaller`。`smaller` は最大で 3 回しか出現できません。 +- `smaller`。`bold` は並列で、他のどの `smaller` キーワードよりも前に出現する必要があります。 -

ハッシュ記号 (#)

+### ハッシュ記号 (`#`) -

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

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

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

+この例は次の値に一致します。 -
    -
  • bold smaller
    • -
  • bold smaller, smaller
    • -
  • bold smaller, smaller, smaller など
    • -
+- `bold smaller` +- `bold smaller, smaller` +- `bold smaller, smaller, smaller` など -

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

+次の値には一致しません。 -
    -
  • bold。smaller が少なくとも 1 度出現する必要があります。
    • -
  • bold smaller smaller smaller。smaller の出現部がそれぞれカンマで区切られている必要があります。
    • -
  • smaller。bold は並列で、どの smaller キーワードよりも前に出現する必要があります。
    • -
+- `bold`。`smaller` が少なくとも 1 度出現する必要があります。 +- `bold smaller smaller smaller`。`smaller` の出現部がそれぞれカンマで区切られている必要があります。 +- `smaller`。`bold` は並列で、どの `smaller` キーワードよりも前に出現する必要があります。 -

強調点 (!)

+### 強調点 (`!`) -

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

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

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

+この例は次の値に一致します。 -
    -
  • bold
    • -
  • smaller
    • -
  • bold smaller
    • -
+- `bold` +- `smaller` +- `bold smaller` -

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

+次の値には一致しません。 -
    -
  • bold も smaller もないものは、どちらか一つが現れる必要があります。
    • -
  • smaller bold。 bold は並列であり、 smaller キーワードの前に現れる必要があります。
    • -
  • bold smaller bold。 bold および smaller は一度だけしか現れてはいけません。
    • -
+- `bold` も `smaller` もないものは、どちらか一つが現れる必要があります。 +- `smaller bold`。 `bold` は並列であり、 `smaller` キーワードの前に現れる必要があります。 +- `bold smaller bold`。 `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? ]!
記号名前説明例
結合子
並列どちらも必須でこの順で出現する必要あり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 回 (すなわち省略可能)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")}}初回定義
+| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------- | ------------------------ | ---------------------------- | +| {{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")}} | 初回定義 | -

関連情報

+## 関連情報 -
    -
  • {{CSS_key_concepts}}
    • -
+- {{CSS_key_concepts}} -- cgit v1.2.3-54-g00ecf