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 --- files/ja/web/css/actual_value/index.html | 49 --- files/ja/web/css/actual_value/index.md | 49 +++ files/ja/web/css/computed_value/index.html | 59 --- files/ja/web/css/computed_value/index.md | 59 +++ files/ja/web/css/inheritance/index.html | 74 ---- files/ja/web/css/inheritance/index.md | 74 ++++ files/ja/web/css/layout_mode/index.html | 32 -- files/ja/web/css/layout_mode/index.md | 32 ++ files/ja/web/css/replaced_element/index.html | 66 ---- files/ja/web/css/replaced_element/index.md | 66 ++++ files/ja/web/css/resolved_value/index.html | 39 -- files/ja/web/css/resolved_value/index.md | 39 ++ files/ja/web/css/shorthand_properties/index.html | 166 -------- files/ja/web/css/shorthand_properties/index.md | 166 ++++++++ files/ja/web/css/specificity/index.html | 348 ---------------- files/ja/web/css/specificity/index.md | 348 ++++++++++++++++ files/ja/web/css/specified_value/index.html | 79 ---- files/ja/web/css/specified_value/index.md | 79 ++++ files/ja/web/css/syntax/index.html | 83 ---- files/ja/web/css/syntax/index.md | 83 ++++ files/ja/web/css/used_value/index.html | 130 ------ files/ja/web/css/used_value/index.md | 130 ++++++ .../ja/web/css/value_definition_syntax/index.html | 440 --------------------- files/ja/web/css/value_definition_syntax/index.md | 440 +++++++++++++++++++++ 24 files changed, 1565 insertions(+), 1565 deletions(-) delete mode 100644 files/ja/web/css/actual_value/index.html create mode 100644 files/ja/web/css/actual_value/index.md delete mode 100644 files/ja/web/css/computed_value/index.html create mode 100644 files/ja/web/css/computed_value/index.md delete mode 100644 files/ja/web/css/inheritance/index.html create mode 100644 files/ja/web/css/inheritance/index.md delete mode 100644 files/ja/web/css/layout_mode/index.html create mode 100644 files/ja/web/css/layout_mode/index.md delete mode 100644 files/ja/web/css/replaced_element/index.html create mode 100644 files/ja/web/css/replaced_element/index.md delete mode 100644 files/ja/web/css/resolved_value/index.html create mode 100644 files/ja/web/css/resolved_value/index.md delete mode 100644 files/ja/web/css/shorthand_properties/index.html create mode 100644 files/ja/web/css/shorthand_properties/index.md delete mode 100644 files/ja/web/css/specificity/index.html create mode 100644 files/ja/web/css/specificity/index.md delete mode 100644 files/ja/web/css/specified_value/index.html create mode 100644 files/ja/web/css/specified_value/index.md delete mode 100644 files/ja/web/css/syntax/index.html create mode 100644 files/ja/web/css/syntax/index.md delete mode 100644 files/ja/web/css/used_value/index.html create mode 100644 files/ja/web/css/used_value/index.md 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') diff --git a/files/ja/web/css/actual_value/index.html b/files/ja/web/css/actual_value/index.html deleted file mode 100644 index 563219f3a2..0000000000 --- a/files/ja/web/css/actual_value/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: 実効値 -slug: Web/CSS/actual_value -tags: - - CSS - - Guide - - Reference - - ガイド -translation_of: Web/CSS/actual_value ---- -
{{CSSRef}}
- -

CSS プロパティの実効値 (actual value) は、すべての必要な推定が適用された後の使用値 (used value) です。例えば、境界を整数値のピクセル幅でしか描けない{{glossary("user agent", "ユーザーエージェント")}}は、境界の太さを近似値の整数に丸めるかもしれません。

- -

プロパティの実効値の計算

- -

{{glossary("user agent", "ユーザーエージェント")}}はプロパティの実効値 (最終値) を4段階で計算します。

- -
    -
  1. 最初に指定値 (specified value) が、カスケード、継承、初期値の使用の何れかによって決定されます。
    2. -
  2. 次に、仕様に従って計算値 (computed value) が計算されます (例えば、 position: absolute の付いた span は、計算で display が block に変わります)。
    3. -
  3. 最後に、レイアウトが計算され、結果として使用値になります。
    4. -
  4. 最後に、使用値がローカルの環境の制約によって変換され、結果として実効値になります。
    5. -
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}初回定義。
- -

関連情報

- - diff --git a/files/ja/web/css/actual_value/index.md b/files/ja/web/css/actual_value/index.md new file mode 100644 index 0000000000..563219f3a2 --- /dev/null +++ b/files/ja/web/css/actual_value/index.md @@ -0,0 +1,49 @@ +--- +title: 実効値 +slug: Web/CSS/actual_value +tags: + - CSS + - Guide + - Reference + - ガイド +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

CSS プロパティの実効値 (actual value) は、すべての必要な推定が適用された後の使用値 (used value) です。例えば、境界を整数値のピクセル幅でしか描けない{{glossary("user agent", "ユーザーエージェント")}}は、境界の太さを近似値の整数に丸めるかもしれません。

+ +

プロパティの実効値の計算

+ +

{{glossary("user agent", "ユーザーエージェント")}}はプロパティの実効値 (最終値) を4段階で計算します。

+ +
    +
  1. 最初に指定値 (specified value) が、カスケード、継承、初期値の使用の何れかによって決定されます。
    2. +
  2. 次に、仕様に従って計算値 (computed value) が計算されます (例えば、 position: absolute の付いた span は、計算で display が block に変わります)。
    3. +
  3. 最後に、レイアウトが計算され、結果として使用値になります。
    4. +
  4. 最後に、使用値がローカルの環境の制約によって変換され、結果として実効値になります。
    5. +
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}初回定義。
+ +

関連情報

+ + diff --git a/files/ja/web/css/computed_value/index.html b/files/ja/web/css/computed_value/index.html deleted file mode 100644 index f08509b8d0..0000000000 --- a/files/ja/web/css/computed_value/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 計算値 -slug: Web/CSS/computed_value -tags: - - CSS - - Guide - - Reference - - リファレンス -translation_of: Web/CSS/computed_value ---- -
{{cssref}}
- -

CSS の プロパティの計算値 (computed value) は、継承の過程で親から子へ伝えられる値です。これは指定値から計算されます。

- -
    -
  1. 特殊な値である {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}} を扱います。
    2. -
  2. プロパティの概要の「計算値」に記載された値に達するのに必要な計算を行います。
    3. -
- -

プロパティの計算値に達するのに必要な計算は、一般に (em の単位やパーセントなどの) 相対値を絶対値に変換する計算を含みます。例えば、ある要素に font-size: 16px と padding-top: 2em が指定された場合、 padding-top の計算値は 32px (フォントサイズの倍) になります。

- -

しかしながら、いくつかのプロパティ (width, margin-right, text-indent, top など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント指定された値はパーセント計算された値に変わります。さらに、 line-height に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、使用値が定義された場合、絶対値になります。

- -
-

注: DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API は解決値を返しますが、これはプロパティによって計算値であるか使用値であるかが変わります。

-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}} -

変更なし

-
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/computed_value/index.md b/files/ja/web/css/computed_value/index.md new file mode 100644 index 0000000000..f08509b8d0 --- /dev/null +++ b/files/ja/web/css/computed_value/index.md @@ -0,0 +1,59 @@ +--- +title: 計算値 +slug: Web/CSS/computed_value +tags: + - CSS + - Guide + - Reference + - リファレンス +translation_of: Web/CSS/computed_value +--- +
{{cssref}}
+ +

CSS の プロパティの計算値 (computed value) は、継承の過程で親から子へ伝えられる値です。これは指定値から計算されます。

+ +
    +
  1. 特殊な値である {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}} を扱います。
    2. +
  2. プロパティの概要の「計算値」に記載された値に達するのに必要な計算を行います。
    3. +
+ +

プロパティの計算値に達するのに必要な計算は、一般に (em の単位やパーセントなどの) 相対値を絶対値に変換する計算を含みます。例えば、ある要素に font-size: 16px と padding-top: 2em が指定された場合、 padding-top の計算値は 32px (フォントサイズの倍) になります。

+ +

しかしながら、いくつかのプロパティ (width, margin-right, text-indent, top など、レイアウトの定義に必要ものに対する割合が相対的なもの) でパーセント指定された値はパーセント計算された値に変わります。さらに、 line-height に指定された単位なしの値は、指定された計算値になります。これらの計算値に残った相対的な値は、使用値が定義された場合、絶対値になります。

+ +
+

注: DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API は解決値を返しますが、これはプロパティによって計算値であるか使用値であるかが変わります。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}} +

変更なし

+
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/inheritance/index.html b/files/ja/web/css/inheritance/index.html deleted file mode 100644 index 9bf6dfaa86..0000000000 --- a/files/ja/web/css/inheritance/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 継承 -slug: Web/CSS/inheritance -tags: - - CSS - - Guide - - Inheritance - - Layout - - Web -translation_of: Web/CSS/inheritance ---- -
{{cssref}}
- -

CSS において、継承 (inheritance) はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。

- -

CSS プロパティは2種類に分類することができます。

- - - -

いずれかの CSS プロパティの定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。

- -

継承プロパティ

- -

要素の継承プロパティに値が指定されなかった場合、要素はその親要素のプロパティの計算値を取得します。文書のルート要素だけは、プロパティの概要で与えられた初期値を取得します。

- -

継承プロパティの一般例として {{ Cssxref("color") }} プロパティが挙げられます。次の様なスタイルルールを指定し、

- -
p { color: green; }
- -

次の様にマークアップしたとします。

- -
<p>この段落には<em>強調されたテキスト</em>があります。</p>
- -

「強調されたテキスト」という文字列は、 em 要素が p 要素から {{ Cssxref("color") }} プロパティの値を継承する為、プロパティの初期値 (※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色) ではなく、継承値の緑色となります。

- -

非継承プロパティ

- -

値を持たない非継承プロパティが要素に指定された場合、要素はプロパティの初期値（※各プロパティのページの「概要」の章に記されています）を取得します。

- -

非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、

- -
 p { border: medium solid; }
- -

次の様にマークアップしたとします。

- -
<p>この段落には<em>強調されたテキスト</em>があります。</p>
- -

この場合、「強調されたテキスト」という文字列は ({{ Cssxref("border-style") }} の初期値が none であるため) ボーダーを持ちません。

- -

注

- -

{{ Cssxref("inherit") }} のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。

- -

すべてのプロパティに値を適用する {{cssxref("all")}} 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、

- -
font {
-  all: revert;
-  font-size: 200%;
-  font-weight: bold;
-}
- -

これは、 {{cssxref("font")}} プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 {{cssxref("font-weight")}} を "bold" に適用します。

- -

関連情報

- - diff --git a/files/ja/web/css/inheritance/index.md b/files/ja/web/css/inheritance/index.md new file mode 100644 index 0000000000..9bf6dfaa86 --- /dev/null +++ b/files/ja/web/css/inheritance/index.md @@ -0,0 +1,74 @@ +--- +title: 継承 +slug: Web/CSS/inheritance +tags: + - CSS + - Guide + - Inheritance + - Layout + - Web +translation_of: Web/CSS/inheritance +--- +
{{cssref}}
+ +

CSS において、継承 (inheritance) はある要素のあるプロパティに値が指定されなかった場合の挙動を制御します。

+ +

CSS プロパティは2種類に分類することができます。

+ + + +

いずれかの CSS プロパティの定義を参照して、それぞれのプロパティが既定値を継承するか ("継承: あり") しないか ("継承: なし") を確認してください。

+ +

継承プロパティ

+ +

要素の継承プロパティに値が指定されなかった場合、要素はその親要素のプロパティの計算値を取得します。文書のルート要素だけは、プロパティの概要で与えられた初期値を取得します。

+ +

継承プロパティの一般例として {{ Cssxref("color") }} プロパティが挙げられます。次の様なスタイルルールを指定し、

+ +
p { color: green; }
+ +

次の様にマークアップしたとします。

+ +
<p>この段落には<em>強調されたテキスト</em>があります。</p>
+ +

「強調されたテキスト」という文字列は、 em 要素が p 要素から {{ Cssxref("color") }} プロパティの値を継承する為、プロパティの初期値 (※祖先要素の何れにも color プロパティが指定されていない場合に使用される文字色) ではなく、継承値の緑色となります。

+ +

非継承プロパティ

+ +

値を持たない非継承プロパティが要素に指定された場合、要素はプロパティの初期値（※各プロパティのページの「概要」の章に記されています）を取得します。

+ +

非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、

+ +
 p { border: medium solid; }
+ +

次の様にマークアップしたとします。

+ +
<p>この段落には<em>強調されたテキスト</em>があります。</p>
+ +

この場合、「強調されたテキスト」という文字列は ({{ Cssxref("border-style") }} の初期値が none であるため) ボーダーを持ちません。

+ +

注

+ +

{{ Cssxref("inherit") }} のキーワードで、明示的に継承することを指定することができます。これはこれは継承プロパティでも非継承プロパティでも動作します。

+ +

すべてのプロパティに値を適用する {{cssxref("all")}} 一括指定プロパティを使用することで、すべてのプロパティの継承を制御することができます。例えば、

+ +
font {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

これは、 {{cssxref("font")}} プロパティのスタイルを、ユーザーのスタイルシートがなければユーザーエージェントの既定値に、あればその値に戻します。それからフォントの寸法を倍にして、 {{cssxref("font-weight")}} を "bold" に適用します。

+ +

関連情報

+ + diff --git a/files/ja/web/css/layout_mode/index.html b/files/ja/web/css/layout_mode/index.html deleted file mode 100644 index 726d53e876..0000000000 --- a/files/ja/web/css/layout_mode/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: レイアウトモード -slug: Web/CSS/Layout_mode -tags: - - CSS - - リファレンス - - レイアウト -translation_of: Web/CSS/Layout_mode ---- -
{{cssref}}
- -

CSS のレイアウトモード (または単に「レイアウト」) は、ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズムです。複数のレイアウトモードがあります。

- - - -
-

メモ: レイアウトモードによって、使える CSS プロパティに制限があります。大半は 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。

-
- -

関連情報

- - diff --git a/files/ja/web/css/layout_mode/index.md b/files/ja/web/css/layout_mode/index.md new file mode 100644 index 0000000000..726d53e876 --- /dev/null +++ b/files/ja/web/css/layout_mode/index.md @@ -0,0 +1,32 @@ +--- +title: レイアウトモード +slug: Web/CSS/Layout_mode +tags: + - CSS + - リファレンス + - レイアウト +translation_of: Web/CSS/Layout_mode +--- +
{{cssref}}
+ +

CSS のレイアウトモード (または単に「レイアウト」) は、ボックスの位置やサイズを、兄弟要素や祖先要素のボックスとの相互作用を踏まえて決めるアルゴリズムです。複数のレイアウトモードがあります。

+ + + +
+

メモ: レイアウトモードによって、使える CSS プロパティに制限があります。大半は 1 つか 2 つのレイアウトモードで用いられ、別のレイアウトモードに関わる要素に設定しても効果がありません。

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/replaced_element/index.html b/files/ja/web/css/replaced_element/index.html deleted file mode 100644 index 0f5d5526fc..0000000000 --- a/files/ja/web/css/replaced_element/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: 置換要素 -slug: Web/CSS/Replaced_element -tags: - - CSS - - Reference - - 置換要素 - - 配置 -translation_of: Web/CSS/Replaced_element ---- -
{{CSSRef}}
- -

CSS において、置換要素は CSS のスコープの外で表現される要素です。 CSS の整形モデルとは独立して表現される外部オブジェクトです。

- -

もっと簡単な言葉で言い換えれば、コンテンツが現在の文書のスタイルに影響されない要素です。置換要素の位置は CSS を使用して変更することができますが、置換要素自身のコンテンツは違います。 {{HTMLElement("iframe")}} のような一部の置換要素では、独自のスタイルシートを持つことができますが、親文書のスタイルは継承されません。

- -

CSS が置換要素において影響できることは、要素のボックス内におけるコンテンツの位置の制御に対応するプロパティがあることだけです。詳しい情報は{{anch("Controlling object position within the content box", "コンテンツボックス内のオブジェクト位置の制御")}}をご覧ください。

- -

置換要素

- -

一般的な置換要素は以下の通りです。

- - - -

一部の要素は、特定の場合に限って置換要素として扱われます。

- - - -

HTML 仕様書では {{HTMLElement("input")}} 要素も置換要素になることがあるとしており、これは "image" 型の {{HTMLElement("input")}} 要素が {{HTMLElement("img")}} と同様に置換要素であるためです。しかし、他のフォームコントロールは、他の型の {{HTMLElement("input")}} 要素も含め、明示的に非置換要素として挙げられています (仕様書では、プラットフォームに依存した既定のレンダリングを「ウィジェット」という用語で記述しています)。

- -

CSS の {{cssxref("content")}} プロパティを使用して挿入されるオブジェクトは無名置換要素です。 HTML のマークアップには存在しないので、「無名」です。

- -

置換要素における CSS の使用

- -

CSS はマージンの計算時や一部の auto 値の時など場合によって、特別に置換要素を扱います。

- -

なお、一部の置換要素は、すべてではありませんが、 {{cssxref("vertical-align")}} のように一部の CSS プロパティで使用される固有の寸法やベースラインの定義を持っていることがあります。置換要素のみが固有の寸法を持つことがあります。

- -

コンテンツボックス内のオブジェクト位置の制御

- -

置換要素内に含まれたオブジェクトが要素のボックスエリア内で、どのように配置されるかを指定するために、特定の CSS プロパティを使用することができます。これらは {{SpecName("CSS3 Images")}} 及び {{SpecName("CSS4 Images")}} 仕様書で定義されています。

- -
-
{{cssxref("object-fit")}}
-
置換要素の中身のオブジェクトがどのように要素の内包ボックスに合わせられるかを指定します。
-
{{cssxref("object-position")}}
-
要素のボックス内で置換要素の中身のオブジェクトが配置される位置を指定します。
-
- -

関連情報

- - diff --git a/files/ja/web/css/replaced_element/index.md b/files/ja/web/css/replaced_element/index.md new file mode 100644 index 0000000000..0f5d5526fc --- /dev/null +++ b/files/ja/web/css/replaced_element/index.md @@ -0,0 +1,66 @@ +--- +title: 置換要素 +slug: Web/CSS/Replaced_element +tags: + - CSS + - Reference + - 置換要素 + - 配置 +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef}}
+ +

CSS において、置換要素は CSS のスコープの外で表現される要素です。 CSS の整形モデルとは独立して表現される外部オブジェクトです。

+ +

もっと簡単な言葉で言い換えれば、コンテンツが現在の文書のスタイルに影響されない要素です。置換要素の位置は CSS を使用して変更することができますが、置換要素自身のコンテンツは違います。 {{HTMLElement("iframe")}} のような一部の置換要素では、独自のスタイルシートを持つことができますが、親文書のスタイルは継承されません。

+ +

CSS が置換要素において影響できることは、要素のボックス内におけるコンテンツの位置の制御に対応するプロパティがあることだけです。詳しい情報は{{anch("Controlling object position within the content box", "コンテンツボックス内のオブジェクト位置の制御")}}をご覧ください。

+ +

置換要素

+ +

一般的な置換要素は以下の通りです。

+ + + +

一部の要素は、特定の場合に限って置換要素として扱われます。

+ + + +

HTML 仕様書では {{HTMLElement("input")}} 要素も置換要素になることがあるとしており、これは "image" 型の {{HTMLElement("input")}} 要素が {{HTMLElement("img")}} と同様に置換要素であるためです。しかし、他のフォームコントロールは、他の型の {{HTMLElement("input")}} 要素も含め、明示的に非置換要素として挙げられています (仕様書では、プラットフォームに依存した既定のレンダリングを「ウィジェット」という用語で記述しています)。

+ +

CSS の {{cssxref("content")}} プロパティを使用して挿入されるオブジェクトは無名置換要素です。 HTML のマークアップには存在しないので、「無名」です。

+ +

置換要素における CSS の使用

+ +

CSS はマージンの計算時や一部の auto 値の時など場合によって、特別に置換要素を扱います。

+ +

なお、一部の置換要素は、すべてではありませんが、 {{cssxref("vertical-align")}} のように一部の CSS プロパティで使用される固有の寸法やベースラインの定義を持っていることがあります。置換要素のみが固有の寸法を持つことがあります。

+ +

コンテンツボックス内のオブジェクト位置の制御

+ +

置換要素内に含まれたオブジェクトが要素のボックスエリア内で、どのように配置されるかを指定するために、特定の CSS プロパティを使用することができます。これらは {{SpecName("CSS3 Images")}} 及び {{SpecName("CSS4 Images")}} 仕様書で定義されています。

+ +
+
{{cssxref("object-fit")}}
+
置換要素の中身のオブジェクトがどのように要素の内包ボックスに合わせられるかを指定します。
+
{{cssxref("object-position")}}
+
要素のボックス内で置換要素の中身のオブジェクトが配置される位置を指定します。
+
+ +

関連情報

+ + diff --git a/files/ja/web/css/resolved_value/index.html b/files/ja/web/css/resolved_value/index.html deleted file mode 100644 index d5c1f4f546..0000000000 --- a/files/ja/web/css/resolved_value/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 解決値 -slug: Web/CSS/resolved_value -tags: - - CSS - - Reference -translation_of: Web/CSS/resolved_value ---- -
{{cssref}}
- -

CSS プロパティの解決値 は、{{domxref("Window.getComputedStyle", "getComputedStyle()")}}によって返される値です。

- -

ほとんどのプロパティでは計算値がそのまま解決値となりますが、古いプロパティ({{cssxref("width")}} と {{cssxref("height")}} を含む)では、代わりに使用値が解決値となります。プロパティごとの詳細については、以下の仕様のリンクを参照してください。

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}初期定義
- -

関連情報

- - diff --git a/files/ja/web/css/resolved_value/index.md b/files/ja/web/css/resolved_value/index.md new file mode 100644 index 0000000000..d5c1f4f546 --- /dev/null +++ b/files/ja/web/css/resolved_value/index.md @@ -0,0 +1,39 @@ +--- +title: 解決値 +slug: Web/CSS/resolved_value +tags: + - CSS + - Reference +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

CSS プロパティの解決値 は、{{domxref("Window.getComputedStyle", "getComputedStyle()")}}によって返される値です。

+ +

ほとんどのプロパティでは計算値がそのまま解決値となりますが、古いプロパティ({{cssxref("width")}} と {{cssxref("height")}} を含む)では、代わりに使用値が解決値となります。プロパティごとの詳細については、以下の仕様のリンクを参照してください。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}初期定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/shorthand_properties/index.html b/files/ja/web/css/shorthand_properties/index.html deleted file mode 100644 index 36faf7a5d5..0000000000 --- a/files/ja/web/css/shorthand_properties/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: 一括指定プロパティ -slug: Web/CSS/Shorthand_properties -tags: - - CSS - - Guide - - Layout - - Reference - - Shorthand Properties - - properties - - shorthand -translation_of: Web/CSS/Shorthand_properties ---- -
{{cssref}}
- -

一括指定プロパティ (shorthand property) は、他の幾つかの CSS プロパティを一度に設定できる CSS プロパティです。一括指定プロパティを用いると、もっと簡単に (そして普通はもっと読みやすく) スタイルシートが書け、時間や労力を節約することができます。

- -

CSS 仕様書では、同じ主題に作用する共通のプロパティの定義をグループ化するために、一括指定プロパティを定義しています。例えば、 {{cssxref("background")}} プロパティは {{cssxref("background-color")}}、 {{cssxref("background-image")}}、 {{cssxref("background-repeat")}}、{{cssxref("background-position")}} の値を定義することができる一括指定プロパティです。同様に、フォントに関連したプロパティは一括指定の {{cssxref("font")}} を使用して定義することができ、ボックスの周囲のマージンは一括指定の {{cssxref("margin")}} を使用して定義することができます。

- -

注意するべき場合

- -

一括指定プロパティはとても便利なものですが、使用するにあたって注意しておかなければならない場合が若干あります。

- -
    -
  1. その一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。それは当たり前に聞こえますが、以前設定した値を上書きすることになります。つまり、 - - 
    background-color: red;
-background: url(images/bg.gif) no-repeat left top;
-
    - とすると背景色を red に設定するのではなく、2番目のルールが優先されて {{cssxref("background-color")}} の既定値である transparent となります。
    2. -
  2. 継承 (inherit) は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。 inherit キーワードをプロパティに適用することはできますが、全体に対して適用できるのみで、1つ1つに対するキーワードではありません。つまり、いくつか特定の値のみを継承させたい場合は、個別指定 (longhand) プロパティで inherit キーワードを指定するしかありません。
    3. -
  3. 一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、順序が重要ではないとき、プロパティがそれぞれ異なる型の値を使用する場合はうまく機能しますが、いくつかのプロパティが同じ値を持つことができるときは簡単ではありません。このような場合の扱い方は、いくつかに分類されます。 -
      -
    1. ボックスの境界に関するプロパティを扱う一括指定 ({{cssxref("border-style")}}, {{cssxref("margin")}}, {{cssxref("padding")}}) は、それぞれの辺を表すために、一貫して1～4つの値の構文を使用します。 - - - - - - - - - - - - - - - - - - - -
      border1.png値1つの構文: border-width: 1em — 1つの値ですべての辺を表します
      border2.png値2つの構文: border-width: 1em 2em — 最初の値は垂直、すなわち上下の辺を、2番目の値は水平、すなわち左右の辺を表します。
      border3.png値3つの構文: border-width: 1em 2em 3em — 最初の値は上辺、 2番目の値は水平、すなわち左右の辺、3番目の値は下辺を表します。
      border4.png -

      値4つの構文: border-width: 1em 2em 3em 4em — 4つの値がそれぞれ上、右、下、左の辺を表し、これは上を起点に時計回りの順です (頭文字が Top-Right-Bottom-Left で、これは trouble の子音 TRBL の順と一致します) (また、時計の上で針が回転する順番として覚えることもできます。 1em は12時の位置で始まり、3時の位置で 2em、それから6時の位置で 3em、そして9時の位置で 4em です)。

      -
      -
      2. -
    2. 同様に、ボックスの角に関する一括指定プロパティ ({{cssxref("border-radius")}} など) は、それぞれの角を表すために一貫して1～4つの値を使用します。 - - - - - - - - - - - - - - - - - - - -
      corner1.png値1つの構文: border-radius: 1em — 1つの値がすべての角を表現します
      corner2.png値2つの構文: border-radius: 1em 2em — 最初の値は左上と右下の角、2番目の値は右上と左下の角を表します。
      corner3.png値3つの構文: border-radius: 1em 2em 3em — 最初の値は左上、2番目の値は右上と左下、3番目の値は右下の角をそれぞれ表します。
      corner4.png -

      値4つの構文: border-radius: 1em 2em 3em 4em — 4つの値がそれぞれ左上、右上、右下、左下を表し、これは左上を起点に時計回りの順です。

      -
      -
      3. -
    -
    4. -
- -

background プロパティ

- -

以下のプロパティによる背景の指定は...

- -
background-color: #000;
-background-image: url(images/bg.gif);
-background-repeat: no-repeat;
-background-position: left top;
- -

...1つの宣言で一括指定することができます。

- -
background: #000 url(images/bg.gif) no-repeat left top;
- -

(一括指定の形式は、実際は上記の個別指定に加えて、 background-attachment: scroll や、 CSS3 ではいくつかの追加プロパティと等価になります。)

- -

CSS3 のプロパティを含む詳しい情報は、 {{cssxref("background")}} をご覧ください。

- -

font プロパティ

- -

以下の宣言は ...

- -
font-style: italic;
-font-weight: bold;
-font-size: .8em;
-line-height: 1.2;
-font-family: Arial, sans-serif;
- -

... 以下のように一括指定することができます。

- -
font: italic bold .8em/1.2 Arial, sans-serif;
- -

この一括指定宣言は、実際には上記の個別指定宣言に加えて、 font-variant: normal と font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3) と等価になります。

- -

border プロパティ

- -

境界線の幅、色、スタイルについては1つの宣言にまとめることができます。例えば、以下の CSS ...

- -
border-width: 1px;
-border-style: solid;
-border-color: #000;
- -

... は、以下のように簡略化できます。

- -
border: 1px solid #000;
- -

margin プロパティと padding プロパティ

- -

margin と padding の一括指定も同様に動作します。 margin プロパティでは、1 つ、2 つ、3 つ、または 4 つの値を使用して短縮値を指定することができます。以下の CSS 宣言は ...

- -
margin-top: 10px;
-margin-right: 5px;
-margin-bottom: 10px;
-margin-left: 5px;
- -

... は以下の値4つの一括指定を使用した宣言と同じです。なお、値は上から始まって時計回りに、上、右、下、左の順になります (TRBL、 "trouble" の子音)。

- -
margin: 10px 5px 10px 5px;
- -

マージンの値1つ、2つ、3つ、4つの一括指定宣言は次の通りです。

- - - -

全体一括指定プロパティ

- -

CSS は全体の一括指定プロパティとして {{cssxref("all")}} を提供しており、値を文書中のすべてのプロパティに適用させます。これは、プロパティの継承モデルを以下のいずれかに変更するためのものです。

- -

{{page("/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

- -

CSS の継承がどのように動作するかについての詳細については、カスケードと継承または CSS カスケード入門をご覧ください。

- -

関連情報

- - diff --git a/files/ja/web/css/shorthand_properties/index.md b/files/ja/web/css/shorthand_properties/index.md new file mode 100644 index 0000000000..36faf7a5d5 --- /dev/null +++ b/files/ja/web/css/shorthand_properties/index.md @@ -0,0 +1,166 @@ +--- +title: 一括指定プロパティ +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guide + - Layout + - Reference + - Shorthand Properties + - properties + - shorthand +translation_of: Web/CSS/Shorthand_properties +--- +
{{cssref}}
+ +

一括指定プロパティ (shorthand property) は、他の幾つかの CSS プロパティを一度に設定できる CSS プロパティです。一括指定プロパティを用いると、もっと簡単に (そして普通はもっと読みやすく) スタイルシートが書け、時間や労力を節約することができます。

+ +

CSS 仕様書では、同じ主題に作用する共通のプロパティの定義をグループ化するために、一括指定プロパティを定義しています。例えば、 {{cssxref("background")}} プロパティは {{cssxref("background-color")}}、 {{cssxref("background-image")}}、 {{cssxref("background-repeat")}}、{{cssxref("background-position")}} の値を定義することができる一括指定プロパティです。同様に、フォントに関連したプロパティは一括指定の {{cssxref("font")}} を使用して定義することができ、ボックスの周囲のマージンは一括指定の {{cssxref("margin")}} を使用して定義することができます。

+ +

注意するべき場合

+ +

一括指定プロパティはとても便利なものですが、使用するにあたって注意しておかなければならない場合が若干あります。

+ +
    +
  1. その一括指定が対応する個別プロパティの内、省略したプロパティ全てに初期値が設定されます。それは当たり前に聞こえますが、以前設定した値を上書きすることになります。つまり、 + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+
    + とすると背景色を red に設定するのではなく、2番目のルールが優先されて {{cssxref("background-color")}} の既定値である transparent となります。
    2. +
  2. 継承 (inherit) は個別プロパティのみで行うことができます。一括指定では欠けている値が初期値に置き換えられるため、省略することで個別のプロパティを継承させることはできません。 inherit キーワードをプロパティに適用することはできますが、全体に対して適用できるのみで、1つ1つに対するキーワードではありません。つまり、いくつか特定の値のみを継承させたい場合は、個別指定 (longhand) プロパティで inherit キーワードを指定するしかありません。
    3. +
  3. 一括指定プロパティは、置き換えるプロパティの指定順序をなるべく強制しないようにしています。ただしこれは、順序が重要ではないとき、プロパティがそれぞれ異なる型の値を使用する場合はうまく機能しますが、いくつかのプロパティが同じ値を持つことができるときは簡単ではありません。このような場合の扱い方は、いくつかに分類されます。 +
      +
    1. ボックスの境界に関するプロパティを扱う一括指定 ({{cssxref("border-style")}}, {{cssxref("margin")}}, {{cssxref("padding")}}) は、それぞれの辺を表すために、一貫して1～4つの値の構文を使用します。 + + + + + + + + + + + + + + + + + + + +
      border1.png値1つの構文: border-width: 1em — 1つの値ですべての辺を表します
      border2.png値2つの構文: border-width: 1em 2em — 最初の値は垂直、すなわち上下の辺を、2番目の値は水平、すなわち左右の辺を表します。
      border3.png値3つの構文: border-width: 1em 2em 3em — 最初の値は上辺、 2番目の値は水平、すなわち左右の辺、3番目の値は下辺を表します。
      border4.png +

      値4つの構文: border-width: 1em 2em 3em 4em — 4つの値がそれぞれ上、右、下、左の辺を表し、これは上を起点に時計回りの順です (頭文字が Top-Right-Bottom-Left で、これは trouble の子音 TRBL の順と一致します) (また、時計の上で針が回転する順番として覚えることもできます。 1em は12時の位置で始まり、3時の位置で 2em、それから6時の位置で 3em、そして9時の位置で 4em です)。

      +
      +
      2. +
    2. 同様に、ボックスの角に関する一括指定プロパティ ({{cssxref("border-radius")}} など) は、それぞれの角を表すために一貫して1～4つの値を使用します。 + + + + + + + + + + + + + + + + + + + +
      corner1.png値1つの構文: border-radius: 1em — 1つの値がすべての角を表現します
      corner2.png値2つの構文: border-radius: 1em 2em — 最初の値は左上と右下の角、2番目の値は右上と左下の角を表します。
      corner3.png値3つの構文: border-radius: 1em 2em 3em — 最初の値は左上、2番目の値は右上と左下、3番目の値は右下の角をそれぞれ表します。
      corner4.png +

      値4つの構文: border-radius: 1em 2em 3em 4em — 4つの値がそれぞれ左上、右上、右下、左下を表し、これは左上を起点に時計回りの順です。

      +
      +
      3. +
    +
    4. +
+ +

background プロパティ

+ +

以下のプロパティによる背景の指定は...

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;
+ +

...1つの宣言で一括指定することができます。

+ +
background: #000 url(images/bg.gif) no-repeat left top;
+ +

(一括指定の形式は、実際は上記の個別指定に加えて、 background-attachment: scroll や、 CSS3 ではいくつかの追加プロパティと等価になります。)

+ +

CSS3 のプロパティを含む詳しい情報は、 {{cssxref("background")}} をご覧ください。

+ +

font プロパティ

+ +

以下の宣言は ...

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

... 以下のように一括指定することができます。

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +

この一括指定宣言は、実際には上記の個別指定宣言に加えて、 font-variant: normal と font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3) と等価になります。

+ +

border プロパティ

+ +

境界線の幅、色、スタイルについては1つの宣言にまとめることができます。例えば、以下の CSS ...

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

... は、以下のように簡略化できます。

+ +
border: 1px solid #000;
+ +

margin プロパティと padding プロパティ

+ +

margin と padding の一括指定も同様に動作します。 margin プロパティでは、1 つ、2 つ、3 つ、または 4 つの値を使用して短縮値を指定することができます。以下の CSS 宣言は ...

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

... は以下の値4つの一括指定を使用した宣言と同じです。なお、値は上から始まって時計回りに、上、右、下、左の順になります (TRBL、 "trouble" の子音)。

+ +
margin: 10px 5px 10px 5px;
+ +

マージンの値1つ、2つ、3つ、4つの一括指定宣言は次の通りです。

+ + + +

全体一括指定プロパティ

+ +

CSS は全体の一括指定プロパティとして {{cssxref("all")}} を提供しており、値を文書中のすべてのプロパティに適用させます。これは、プロパティの継承モデルを以下のいずれかに変更するためのものです。

+ +

{{page("/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

+ +

CSS の継承がどのように動作するかについての詳細については、カスケードと継承または CSS カスケード入門をご覧ください。

+ +

関連情報

+ + diff --git a/files/ja/web/css/specificity/index.html b/files/ja/web/css/specificity/index.html deleted file mode 100644 index 88b4080d96..0000000000 --- a/files/ja/web/css/specificity/index.html +++ /dev/null @@ -1,348 +0,0 @@ ---- -title: 詳細度 -slug: Web/CSS/Specificity -tags: - - CSS - - Example - - Reference - - Web - - ウェブ - - ガイド -translation_of: Web/CSS/Specificity ---- -
{{CSSRef}}
- -

詳細度 (Specificity) は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。

- -

詳細度の計算方法

- -

詳細度は CSS 宣言が適用される際の重みであり、一致するセレクターそれぞれの種類の数によって特定されます。複数の宣言が同じ詳細度であれば、 CSS の中で最後に宣言されたものが要素に適用されます。詳細度は同じ要素に対して複数の宣言が行われている場合のみ適用されます。 CSS の規則として、直接対象となった要素は要素が祖先から継承した規則よりも常に優先されます。

- -
-

メモ: 文書ツリー内における要素の近接性は、詳細度には影響を与えません。

-
- -

詳細度の序列（昇順）

- -

以下のリストは、セレクターを詳細度の小さな順に並べたものです。

- -
    -
  1. 要素型セレクター (例えば h1) と 擬似要素 (例えば ::before)
    2. -
  2. クラスセレクター (例えば .example)、属性セレクター (例えば [type="radio"])、擬似クラス (例えば :hover)
    3. -
  3. ID セレクター (例えば #example)
    4. -
- -

全称セレクター ({{CSSxRef("Universal_selectors", "*")}}), 結合子 ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}), 否定擬似クラス ({{CSSxRef(":not", ":not()")}}) は詳細度に影響を与えません。 (但し、 :not() の中で宣言されたセレクターは影響を与えます。)

- -

詳しくは「カスケードと継承」の「詳細度」または https://specifishity.com をご覧ください。

- -

要素に追加されたインラインスタイル (例えば style="font-weight: bold;") は、常に外部スタイルシートの中のスタイルを上書きしますので、最も高い詳細度を持っていると考えることもできます。

- -

!important の例外

- -

!important 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には !important は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然のカスケードを破壊するためデバッグが難しくなるので、 !important を使用することは悪い習慣であり、使用を避けるべきです。同じ要素に二つの競合する宣言が !important 規則付きで適用された場合、より高い詳細度の宣言が適用されます。

- -

いくつかの経験則

- - - -

!important を使用する代わりに、以下のことを検討してください。

- -
    -
  1. CSS のカスケードをもっと利用する
    2. -
  2. -

    もっと詳細な規則を使う。規則の選択時に要素の前に１つまたは複数の要素を示すと、詳細度が上がり、より優先度が高くなります。

    - - 
    <div id="test">
-  <span>Text</span>
-</div>
-
    - - 
    div#test span { color: green; }
-div span { color: blue; }
-span { color: red; }
    - -

    順番に関わらず、テキストは最も詳細度が高い規則である緑色になります。 (また、青の規則は規則の順番にかかわらず、赤の規則を上書きします)

    -
    3. -
  3. (2)のナンセンスの特殊なケースとして、何も指定する必要がない場合には、単純にセレクターを複製することで詳細度を高めることができます。 - 
    #myId#myId span { color: yellow; }
-.myClass.myClass span { color: orange; }
    -
    4. -
- -

!important の用途

- -
A) インラインスタイルの上書き
- -

サイトの視覚的な側面をグローバルに設定するグローバル CSS ファイルは、それぞれの要素に直接定義されたインラインスタイルによって上書きされることがあります。インラインスタイルと !important はどちらもとても悪い習慣とみなされていますが、時には前者を上書きするために後者が必要とされることがあります。

- -

この場合、特定のスタイルをグローバル CSS ファイルの中で !important として設定することで、要素に直接設定されたインラインスタイルを上書きすることができます。

- -
<div class="foo" style="color: red;">What color am I?</div>
-
- -
.foo[style*="color: red"] {
-  color: firebrick !important;
-}
-
- -

多くの JavaScript フレームワークやライブラリがインラインスタイルを追加します。 !important をとても限定的なセレクターで使用することは、これらのインラインスタイルを上書きする方法の一つです。

- -
B) 高い詳細度の上書き
- -
#someElement p {
-  color: blue;
-}
-
-p.awesome {
-  color: red;
-}
- -

#someElement の中にある場合であっても、 awesome の段落を常に赤くするにはどうすればよいでしょうか。 !important がないと、第一の規則がより詳細度が高いので、第二の規則に勝ちます。

- -

!important を上書きする方法

- -

A) !important の付いた CSS 規則と、それにより高い詳細度のセレクターを与えるか (タグ、 id、 class のセレクターへの追加)、同じセレクターで既存の位置より後に CSS 規則を追加するかします。これが動作するのは、詳細度が同じであるとき、最後に定義された規則が勝つからです。

- -

詳細度を高める例です。

- -
table td    { height: 50px !important; }
-.myTable td { height: 50px !important; }
-#myTable td { height: 50px !important; }
-
- -

B) または、既存の物の後に同じセレクターを追加します。

- -
td { height: 50px !important; }
- -

C) また、できれば、元の規則を書き換えて、どちらも !important を使用しないようにします。

- -
[id="someElement"] p {
-  color: blue;
-}
-
-p.awesome {
-  color: red;
-}
- -

ID セレクターの代わりとして属性セレクターの一部に id を入れると、クラスと同じ詳細度になります。上記の両方のセレクターとも同じ重みをもつようになりました。詳細度が同等の場合、後に定義された規則が優先されます。

- -

詳細情報

- - - -

:is() および :not() の例外

- -

全一致の擬似クラス {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および否定擬似クラスの {{CSSxRef(":not", ":not()")}} は、詳細度の計算では擬似クラスとは見なされません。しかし、セレクターの種類の数を数える時には、これらの擬似クラスの中に置かれたセレクターは、通常のセレクターのように計算されます。

- -
-

以下の CSS を...

- -
div.outer p {
-  color: orange;
-}
-
-div:not(.outer) p {
-  color: blueviolet;
-}
-
- -

以下の HTML に適用した場合...

- -
<div class="outer">
-  <p>This is in the outer div.</p>
-  <div class="inner">
-    <p>This text is in the inner div.</p>
-  </div>
-</div>
-
- -

画面では、以下のように表示されるでしょう。

- -

{{EmbedLiveSample("The_not_exception-example")}}

-
- -

:where() の例外 {{Experimental_Inline}}

- -

{{SeeCompatTable}}

- -

詳細度を調整する擬似クラス {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} は、自分自身の詳細度が常にゼロで置き換えられます。

- -

この一連の CSS で...

- -
div:where(.outer) p {
-  color: orange;
-}
-
-div p {
-  color: blueviolet;
-}
-
- - - -

... 以下の HTML と一緒に使用されたとき ...

- - - -
<div class="outer">
-  <p>This is in the outer div.</p>
-  <div class="inner">
-    <p>This text is in the inner div.</p>
-  </div>
-</div>
-
- -

... このように画面に表示されます。

- -

{{EmbedLiveSample("The_where_exception")}}

- -

形ベースの詳細度

- -

詳細度は、セレクターの形に基づきます。次の場合、セレクター *[id="foo"] は ID を選択しているにもかかわらず、セレクターの詳細度を決定する目的においては属性セレクターとして計算されます。

- -

以下のスタイル宣言を...

- -
*#foo {
-  color: green;
-}
-
-*[id="foo"] {
-  color: purple;
-}
-
- -

この HTML に対して適用すると...

- -
<p id="foo">I am a sample text.</p>
-
- -

このようになってしまうでしょう。

- -

{{EmbedLiveSample("Form-based_specificity")}}

- -

なぜなら、それは同じ要素に一致しますが、 ID セレクターがより高い詳細度をもっているからです。

- -

文書ツリー内の近接性の無視

- -

指定されたセレクターで参照される要素と他の要素との近接性は、詳細度には影響を与えません。以下のスタイル宣言と...

- -
body h1 {
-  color: green;
-}
-
-html h1 {
-  color: purple;
-}
-
- -

... 以下の HTML で...

- -
<html>
-  <body>
-    <h1>Here is a title!</h1>
-  </body>
-</html>
-
- -

... このように描画されるでしょう。

- -

{{EmbedLiveSample("Tree_proximity_ignorance")}}

- -

これは、二つの宣言が同じセレクター型数ですが、 html h1 セレクターが最後に宣言されているからです。

- -

直接対象の要素と継承されたスタイル

- -

直接対象となる要素のスタイル付けは、継承された規則の詳細度に関わらず、常に継承されたスタイルより優先されます。この CSS は ...

- -
#parent {
-  color: green;
-}
-
-h1 {
-  color: purple;
-}
- -

... 以下の HTML と共に使用します ...

- -
<html>
-  <body id="parent">
-    <h1>Here is a title!</h1>
-  </body>
-</html>
- -

... 以下のように表示されます。

- -

{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}}

- -

これは、 h1 セレクターが要素を具体的に対象としていますが、緑のセレクターは親から継承されているだけだからです。

- -

仕様書

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}{{Spec2("CSS4 Selectors")}}詳細度調整セレクター {{CSSxRef(":where", ":where()")}} を追加
{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS3 Selectors")}}擬似要素を追加
{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS2.1")}}擬似クラスを追加
{{SpecName("CSS1", "#cascading-order", "Cascading order")}}{{Spec2("CSS1")}}初回定義
-
- -

関連情報

- - diff --git a/files/ja/web/css/specificity/index.md b/files/ja/web/css/specificity/index.md new file mode 100644 index 0000000000..88b4080d96 --- /dev/null +++ b/files/ja/web/css/specificity/index.md @@ -0,0 +1,348 @@ +--- +title: 詳細度 +slug: Web/CSS/Specificity +tags: + - CSS + - Example + - Reference + - Web + - ウェブ + - ガイド +translation_of: Web/CSS/Specificity +--- +
{{CSSRef}}
+ +

詳細度 (Specificity) は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。

+ +

詳細度の計算方法

+ +

詳細度は CSS 宣言が適用される際の重みであり、一致するセレクターそれぞれの種類の数によって特定されます。複数の宣言が同じ詳細度であれば、 CSS の中で最後に宣言されたものが要素に適用されます。詳細度は同じ要素に対して複数の宣言が行われている場合のみ適用されます。 CSS の規則として、直接対象となった要素は要素が祖先から継承した規則よりも常に優先されます。

+ +
+

メモ: 文書ツリー内における要素の近接性は、詳細度には影響を与えません。

+
+ +

詳細度の序列（昇順）

+ +

以下のリストは、セレクターを詳細度の小さな順に並べたものです。

+ +
    +
  1. 要素型セレクター (例えば h1) と 擬似要素 (例えば ::before)
    2. +
  2. クラスセレクター (例えば .example)、属性セレクター (例えば [type="radio"])、擬似クラス (例えば :hover)
    3. +
  3. ID セレクター (例えば #example)
    4. +
+ +

全称セレクター ({{CSSxRef("Universal_selectors", "*")}}), 結合子 ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}), 否定擬似クラス ({{CSSxRef(":not", ":not()")}}) は詳細度に影響を与えません。 (但し、 :not() の中で宣言されたセレクターは影響を与えます。)

+ +

詳しくは「カスケードと継承」の「詳細度」または https://specifishity.com をご覧ください。

+ +

要素に追加されたインラインスタイル (例えば style="font-weight: bold;") は、常に外部スタイルシートの中のスタイルを上書きしますので、最も高い詳細度を持っていると考えることもできます。

+ +

!important の例外

+ +

!important 規則がスタイル宣言で使われたとき、それが宣言リストのどこであっても、この宣言は CSS 内で作られたその他の宣言を上書きします。技術的には !important は詳細度とは無関係ですが、直接作用します。しかし、スタイルの自然のカスケードを破壊するためデバッグが難しくなるので、 !important を使用することは悪い習慣であり、使用を避けるべきです。同じ要素に二つの競合する宣言が !important 規則付きで適用された場合、より高い詳細度の宣言が適用されます。

+ +

いくつかの経験則

+ + + +

!important を使用する代わりに、以下のことを検討してください。

+ +
    +
  1. CSS のカスケードをもっと利用する
    2. +
  2. +

    もっと詳細な規則を使う。規則の選択時に要素の前に１つまたは複数の要素を示すと、詳細度が上がり、より優先度が高くなります。

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
+
    + + 
    div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }
    + +

    順番に関わらず、テキストは最も詳細度が高い規則である緑色になります。 (また、青の規則は規則の順番にかかわらず、赤の規則を上書きします)

    +
    3. +
  3. (2)のナンセンスの特殊なケースとして、何も指定する必要がない場合には、単純にセレクターを複製することで詳細度を高めることができます。 + 
    #myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }
    +
    4. +
+ +

!important の用途

+ +
A) インラインスタイルの上書き
+ +

サイトの視覚的な側面をグローバルに設定するグローバル CSS ファイルは、それぞれの要素に直接定義されたインラインスタイルによって上書きされることがあります。インラインスタイルと !important はどちらもとても悪い習慣とみなされていますが、時には前者を上書きするために後者が必要とされることがあります。

+ +

この場合、特定のスタイルをグローバル CSS ファイルの中で !important として設定することで、要素に直接設定されたインラインスタイルを上書きすることができます。

+ +
<div class="foo" style="color: red;">What color am I?</div>
+
+ +
.foo[style*="color: red"] {
+  color: firebrick !important;
+}
+
+ +

多くの JavaScript フレームワークやライブラリがインラインスタイルを追加します。 !important をとても限定的なセレクターで使用することは、これらのインラインスタイルを上書きする方法の一つです。

+ +
B) 高い詳細度の上書き
+ +
#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}
+ +

#someElement の中にある場合であっても、 awesome の段落を常に赤くするにはどうすればよいでしょうか。 !important がないと、第一の規則がより詳細度が高いので、第二の規則に勝ちます。

+ +

!important を上書きする方法

+ +

A) !important の付いた CSS 規則と、それにより高い詳細度のセレクターを与えるか (タグ、 id、 class のセレクターへの追加)、同じセレクターで既存の位置より後に CSS 規則を追加するかします。これが動作するのは、詳細度が同じであるとき、最後に定義された規則が勝つからです。

+ +

詳細度を高める例です。

+ +
table td    { height: 50px !important; }
+.myTable td { height: 50px !important; }
+#myTable td { height: 50px !important; }
+
+ +

B) または、既存の物の後に同じセレクターを追加します。

+ +
td { height: 50px !important; }
+ +

C) また、できれば、元の規則を書き換えて、どちらも !important を使用しないようにします。

+ +
[id="someElement"] p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}
+ +

ID セレクターの代わりとして属性セレクターの一部に id を入れると、クラスと同じ詳細度になります。上記の両方のセレクターとも同じ重みをもつようになりました。詳細度が同等の場合、後に定義された規則が優先されます。

+ +

詳細情報

+ + + +

:is() および :not() の例外

+ +

全一致の擬似クラス {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} および否定擬似クラスの {{CSSxRef(":not", ":not()")}} は、詳細度の計算では擬似クラスとは見なされません。しかし、セレクターの種類の数を数える時には、これらの擬似クラスの中に置かれたセレクターは、通常のセレクターのように計算されます。

+ +
+

以下の CSS を...

+ +
div.outer p {
+  color: orange;
+}
+
+div:not(.outer) p {
+  color: blueviolet;
+}
+
+ +

以下の HTML に適用した場合...

+ +
<div class="outer">
+  <p>This is in the outer div.</p>
+  <div class="inner">
+    <p>This text is in the inner div.</p>
+  </div>
+</div>
+
+ +

画面では、以下のように表示されるでしょう。

+ +

{{EmbedLiveSample("The_not_exception-example")}}

+
+ +

:where() の例外 {{Experimental_Inline}}

+ +

{{SeeCompatTable}}

+ +

詳細度を調整する擬似クラス {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} は、自分自身の詳細度が常にゼロで置き換えられます。

+ +

この一連の CSS で...

+ +
div:where(.outer) p {
+  color: orange;
+}
+
+div p {
+  color: blueviolet;
+}
+
+ + + +

... 以下の HTML と一緒に使用されたとき ...

+ + + +
<div class="outer">
+  <p>This is in the outer div.</p>
+  <div class="inner">
+    <p>This text is in the inner div.</p>
+  </div>
+</div>
+
+ +

... このように画面に表示されます。

+ +

{{EmbedLiveSample("The_where_exception")}}

+ +

形ベースの詳細度

+ +

詳細度は、セレクターの形に基づきます。次の場合、セレクター *[id="foo"] は ID を選択しているにもかかわらず、セレクターの詳細度を決定する目的においては属性セレクターとして計算されます。

+ +

以下のスタイル宣言を...

+ +
*#foo {
+  color: green;
+}
+
+*[id="foo"] {
+  color: purple;
+}
+
+ +

この HTML に対して適用すると...

+ +
<p id="foo">I am a sample text.</p>
+
+ +

このようになってしまうでしょう。

+ +

{{EmbedLiveSample("Form-based_specificity")}}

+ +

なぜなら、それは同じ要素に一致しますが、 ID セレクターがより高い詳細度をもっているからです。

+ +

文書ツリー内の近接性の無視

+ +

指定されたセレクターで参照される要素と他の要素との近接性は、詳細度には影響を与えません。以下のスタイル宣言と...

+ +
body h1 {
+  color: green;
+}
+
+html h1 {
+  color: purple;
+}
+
+ +

... 以下の HTML で...

+ +
<html>
+  <body>
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+
+ +

... このように描画されるでしょう。

+ +

{{EmbedLiveSample("Tree_proximity_ignorance")}}

+ +

これは、二つの宣言が同じセレクター型数ですが、 html h1 セレクターが最後に宣言されているからです。

+ +

直接対象の要素と継承されたスタイル

+ +

直接対象となる要素のスタイル付けは、継承された規則の詳細度に関わらず、常に継承されたスタイルより優先されます。この CSS は ...

+ +
#parent {
+  color: green;
+}
+
+h1 {
+  color: purple;
+}
+ +

... 以下の HTML と共に使用します ...

+ +
<html>
+  <body id="parent">
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+ +

... 以下のように表示されます。

+ +

{{EmbedLiveSample("Directly_targeted_elements_vs._inherited_styles")}}

+ +

これは、 h1 セレクターが要素を具体的に対象としていますが、緑のセレクターは親から継承されているだけだからです。

+ +

仕様書

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}{{Spec2("CSS4 Selectors")}}詳細度調整セレクター {{CSSxRef(":where", ":where()")}} を追加
{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS3 Selectors")}}擬似要素を追加
{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS2.1")}}擬似クラスを追加
{{SpecName("CSS1", "#cascading-order", "Cascading order")}}{{Spec2("CSS1")}}初回定義
+
+ +

関連情報

+ + diff --git a/files/ja/web/css/specified_value/index.html b/files/ja/web/css/specified_value/index.html deleted file mode 100644 index 81e1552aea..0000000000 --- a/files/ja/web/css/specified_value/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 指定値 -slug: Web/CSS/specified_value -tags: - - CSS - - Guide - - Reference -translation_of: Web/CSS/specified_value ---- -
{{CSSRef}}
- -

指定値 (specified value) は、 CSS プロパティにおいて文書のスタイルシートから受け取る値です。指定されたプロパティの指定値は、以下の規則に従って決定されます。

- -
    -
  1. 文書のスタイルシートが明示的にプロパティに値を指定した場合は、その値が使用されます。
    2. -
  2. 文書のスタイルシートが値を指定しなかった場合、可能であれば親要素から値を継承します。
    3. -
  3. 上記のいずれも利用できない場合、要素の初期値が使用されます。
    4. -
- -

例

- -

HTML

- -
<p>My specified color is given explicitly in the CSS.</p>
-
-<div>The specified values of all my properties default to their
-    initial values, because none of them are given in the CSS.</div>
-
-<div class="fun">
-  <p>The specified value of my font family is not given explicitly
-      in the CSS, so it is inherited from my parent. However,
-      the border is not an inheriting property.</p>
-</div>
- -

CSS

- -
.fun {
-  border: 1px dotted pink;
-  font-family: fantasy;
-}
-
-p {
-  color: green;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples", 500, 220)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/specified_value/index.md b/files/ja/web/css/specified_value/index.md new file mode 100644 index 0000000000..81e1552aea --- /dev/null +++ b/files/ja/web/css/specified_value/index.md @@ -0,0 +1,79 @@ +--- +title: 指定値 +slug: Web/CSS/specified_value +tags: + - CSS + - Guide + - Reference +translation_of: Web/CSS/specified_value +--- +
{{CSSRef}}
+ +

指定値 (specified value) は、 CSS プロパティにおいて文書のスタイルシートから受け取る値です。指定されたプロパティの指定値は、以下の規則に従って決定されます。

+ +
    +
  1. 文書のスタイルシートが明示的にプロパティに値を指定した場合は、その値が使用されます。
    2. +
  2. 文書のスタイルシートが値を指定しなかった場合、可能であれば親要素から値を継承します。
    3. +
  3. 上記のいずれも利用できない場合、要素の初期値が使用されます。
    4. +
+ +

例

+ +

HTML

+ +
<p>My specified color is given explicitly in the CSS.</p>
+
+<div>The specified values of all my properties default to their
+    initial values, because none of them are given in the CSS.</div>
+
+<div class="fun">
+  <p>The specified value of my font family is not given explicitly
+      in the CSS, so it is inherited from my parent. However,
+      the border is not an inheriting property.</p>
+</div>
+ +

CSS

+ +
.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 500, 220)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS2.2", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.2")}}
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/syntax/index.html b/files/ja/web/css/syntax/index.html deleted file mode 100644 index 30b41c6dda..0000000000 --- a/files/ja/web/css/syntax/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 構文 -slug: Web/CSS/Syntax -tags: - - CSS - - Guide - - Reference - - Web -translation_of: Web/CSS/Syntax ---- -
{{cssref}}
- -

カスケーディングスタイルシート (CSS) 言語の基本的な狙いは、ブラウザーのエンジンがページの要素を、色、位置、装飾などの特定の特性をもって描けるようにすることです。 CSS の構文はこの狙いを反映し、以下のような基本的な構成要素があります。

- - - -

CSS の宣言

- -

CSS のプロパティを特定の値に設定することは、 CSS 言語の核となる仕組みです。プロパティと値の組は宣言と呼ばれ、どの CSS エンジンも、1つ1つのページの要素を適切に配置し、形作るために、どの宣言を要素に適用するかを計算します。

- -

CSS では、プロパティと値の両方とも、既定で大文字と小文字を区別しません。組はコロン ':' (U+003A COLON) で分割され、プロパティと値の前、間、後のホワイトスペースは (内部のものを除き) 無視されます。

- -

css syntax - declaration.png

- -

CSS には100を超える種類のプロパティと、無限に近い種類の値があります。すべてのプロパティと値の組み合わせが許されるわけではなく、どのプロパティも、何が妥当な値であるか定義されています。与えられたプロパティの値が妥当ではなかったとき、その宣言は妥当ではないと見なされ、 CSS エンジンから完全に無視されます。

- -

CSS の宣言ブロック

- -

宣言は、左中括弧 '{' (U+007B LEFT CURLY BRACKET) と右中括弧 '}' (U+007D RIGHT CURLY BRACKET) で区切られた構造の中で、ブロックにグループ化されます。ブロックは入れ子になることがあるため、左中括弧と右中括弧が対応していなければなりません。

- -

css syntax - block.png

- -

このようなブロックは必然的に宣言ブロックと呼ばれ、その中の宣言はセミコロン ';' (U+003B SEMICOLON) で区切ります。宣言ブロックは宣言を持たず、空になることもあります。宣言の周囲のホワイトスペースは無視されます。ブロックの最後の宣言は、セミコロンで終わらせる必要はありませんが、セミコロンで終わらせればブロックを他の宣言で拡張するときにセミコロンを付け忘れることを防げるため、良い書き方とみなされます。

- -

CSS 宣言ブロックは以下の図のように表すことができます。

- -

css syntax - declarations block.png

- -
注: 左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の {{htmlattrxref("style")}} 属性の中に置くことができます。
- -

CSS の規則セット

- -

もしスタイルシートが、1つの宣言をウェブページのどの要素にも適用するとしたら、それはひどく使えないものになるでしょう。本当の目的は、それぞれの宣言を文書のそれぞれの部品に適用することです。

- -

CSS ではこれを、宣言ブロックと条件を関連付けることで実現します。それぞれの (妥当な) 宣言ブロックの前に、ページの要素を選択する条件であるセレクターを置きます。セレクターのグループと宣言ブロックの組を規則セット、またはしばしば単に規則と呼びます。

- -

CSS の規則セット (または規則) は下記の図のように表現することができます。

- -

css syntax - ruleset.png

- -

ページの要素は複数のセレクターに一致する可能性があるため、複数の規則によってあるプロパティが異なる値で複数回現れる可能性があるため、 CSS 標準ではあるプロパティが他のプロパティより優先され、適用されなければならないことを定義しています。これをカスケードアルゴリズムと呼びます。

- -
単一のセレクターで構成される規則セットを複数まとめて表記する方法の一つとして、規則セットをセレクターの集合で記述することが挙げられますが、各規則セットの妥当性を上手くまとめるものではない点に注意しましょう。
-
-基本セレクターのうちの一つが妥当ではなかった場合 (架空の要素や架空のセレクターを使った際など)、セレクター全体が妥当ではないこととなり、規則全体も (妥当ではないものとして) 無視されます。
- -

CSS の文

- -

規則セットはスタイルシートの主な構成要素であり、よく大きな一連の規則セットのみから成ります。しかし、ウェブ制作者がスタイルシートで伝えたい情報としては、他にも文字セット、インポートする他の外部スタイルシート、フォントフェイス、リストカウンターの記述などがあります。このためには別の、特定の種類の文を使用します。

- -

文は、空白ではないすべての文字で始まり、 (文字列の外にあり、エスケープされておらず、別の {} または () または [] の対の中に含まれていない) 最初の右中括弧またはセミコロンで終わる構成要素です。

- -

css syntax - statements Venn diag.png

- -

文には二種類があります。

- - - -

規則またはアット規則ではない文は、すべて妥当ではなく、無視されます。

- -

他にも文のグループとして、入れ子文があります。これらはアット規則特有のサブセットである条件付きグループ規則の中で使用することができます。これらの文は、特定の条件が一致した場合にのみ適用されます。例えば、 @mediaアット規則の内容は、示された条件に一致するブラウザーが実行されている端末でのみ適用されるなどです。 CSS1 と CSS2.1 では、条件付きグループ規則内では規則セットのみが利用できました。それではあまりに厳しかったので、 CSS Conditionals Level 3 では、この制約は撤廃されました。現在、それは今でも試験的でどのブラウザーでも対応しているわけではないものの、条件付きグループ規則はより広い範囲の内容を持つことができ、規則セットだけではなく、すべてではないものの、一部のアット規則を含むこともできます。

- -

関連情報

- - diff --git a/files/ja/web/css/syntax/index.md b/files/ja/web/css/syntax/index.md new file mode 100644 index 0000000000..30b41c6dda --- /dev/null +++ b/files/ja/web/css/syntax/index.md @@ -0,0 +1,83 @@ +--- +title: 構文 +slug: Web/CSS/Syntax +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

カスケーディングスタイルシート (CSS) 言語の基本的な狙いは、ブラウザーのエンジンがページの要素を、色、位置、装飾などの特定の特性をもって描けるようにすることです。 CSS の構文はこの狙いを反映し、以下のような基本的な構成要素があります。

+ + + +

CSS の宣言

+ +

CSS のプロパティを特定の値に設定することは、 CSS 言語の核となる仕組みです。プロパティと値の組は宣言と呼ばれ、どの CSS エンジンも、1つ1つのページの要素を適切に配置し、形作るために、どの宣言を要素に適用するかを計算します。

+ +

CSS では、プロパティと値の両方とも、既定で大文字と小文字を区別しません。組はコロン ':' (U+003A COLON) で分割され、プロパティと値の前、間、後のホワイトスペースは (内部のものを除き) 無視されます。

+ +

css syntax - declaration.png

+ +

CSS には100を超える種類のプロパティと、無限に近い種類の値があります。すべてのプロパティと値の組み合わせが許されるわけではなく、どのプロパティも、何が妥当な値であるか定義されています。与えられたプロパティの値が妥当ではなかったとき、その宣言は妥当ではないと見なされ、 CSS エンジンから完全に無視されます。

+ +

CSS の宣言ブロック

+ +

宣言は、左中括弧 '{' (U+007B LEFT CURLY BRACKET) と右中括弧 '}' (U+007D RIGHT CURLY BRACKET) で区切られた構造の中で、ブロックにグループ化されます。ブロックは入れ子になることがあるため、左中括弧と右中括弧が対応していなければなりません。

+ +

css syntax - block.png

+ +

このようなブロックは必然的に宣言ブロックと呼ばれ、その中の宣言はセミコロン ';' (U+003B SEMICOLON) で区切ります。宣言ブロックは宣言を持たず、空になることもあります。宣言の周囲のホワイトスペースは無視されます。ブロックの最後の宣言は、セミコロンで終わらせる必要はありませんが、セミコロンで終わらせればブロックを他の宣言で拡張するときにセミコロンを付け忘れることを防げるため、良い書き方とみなされます。

+ +

CSS 宣言ブロックは以下の図のように表すことができます。

+ +

css syntax - declarations block.png

+ +
注: 左中括弧と右中括弧を除いた、セミコロンで分割された宣言のリストである CSS 宣言ブロックの内容は、 HTML の {{htmlattrxref("style")}} 属性の中に置くことができます。
+ +

CSS の規則セット

+ +

もしスタイルシートが、1つの宣言をウェブページのどの要素にも適用するとしたら、それはひどく使えないものになるでしょう。本当の目的は、それぞれの宣言を文書のそれぞれの部品に適用することです。

+ +

CSS ではこれを、宣言ブロックと条件を関連付けることで実現します。それぞれの (妥当な) 宣言ブロックの前に、ページの要素を選択する条件であるセレクターを置きます。セレクターのグループと宣言ブロックの組を規則セット、またはしばしば単に規則と呼びます。

+ +

CSS の規則セット (または規則) は下記の図のように表現することができます。

+ +

css syntax - ruleset.png

+ +

ページの要素は複数のセレクターに一致する可能性があるため、複数の規則によってあるプロパティが異なる値で複数回現れる可能性があるため、 CSS 標準ではあるプロパティが他のプロパティより優先され、適用されなければならないことを定義しています。これをカスケードアルゴリズムと呼びます。

+ +
単一のセレクターで構成される規則セットを複数まとめて表記する方法の一つとして、規則セットをセレクターの集合で記述することが挙げられますが、各規則セットの妥当性を上手くまとめるものではない点に注意しましょう。
+
+基本セレクターのうちの一つが妥当ではなかった場合 (架空の要素や架空のセレクターを使った際など)、セレクター全体が妥当ではないこととなり、規則全体も (妥当ではないものとして) 無視されます。
+ +

CSS の文

+ +

規則セットはスタイルシートの主な構成要素であり、よく大きな一連の規則セットのみから成ります。しかし、ウェブ制作者がスタイルシートで伝えたい情報としては、他にも文字セット、インポートする他の外部スタイルシート、フォントフェイス、リストカウンターの記述などがあります。このためには別の、特定の種類の文を使用します。

+ +

文は、空白ではないすべての文字で始まり、 (文字列の外にあり、エスケープされておらず、別の {} または () または [] の対の中に含まれていない) 最初の右中括弧またはセミコロンで終わる構成要素です。

+ +

css syntax - statements Venn diag.png

+ +

文には二種類があります。

+ + + +

規則またはアット規則ではない文は、すべて妥当ではなく、無視されます。

+ +

他にも文のグループとして、入れ子文があります。これらはアット規則特有のサブセットである条件付きグループ規則の中で使用することができます。これらの文は、特定の条件が一致した場合にのみ適用されます。例えば、 @mediaアット規則の内容は、示された条件に一致するブラウザーが実行されている端末でのみ適用されるなどです。 CSS1 と CSS2.1 では、条件付きグループ規則内では規則セットのみが利用できました。それではあまりに厳しかったので、 CSS Conditionals Level 3 では、この制約は撤廃されました。現在、それは今でも試験的でどのブラウザーでも対応しているわけではないものの、条件付きグループ規則はより広い範囲の内容を持つことができ、規則セットだけではなく、すべてではないものの、一部のアット規則を含むこともできます。

+ +

関連情報

+ + diff --git a/files/ja/web/css/used_value/index.html b/files/ja/web/css/used_value/index.html deleted file mode 100644 index 80cd1f5827..0000000000 --- a/files/ja/web/css/used_value/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: 使用値 -slug: Web/CSS/used_value -tags: - - CSS - - Reference - - レイアウト -translation_of: Web/CSS/used_value ---- -
{{cssref}}
- -

CSS プロパティの使用値 (used value) は、計算値において行われたすべての計算が実行された後の値です。

- -

{{glossary("user agent", "ユーザーエージェント")}}が計算を終了した後、すべての CSS プロパティは使用値を持ちます。長さ ({{cssxref("width")}} や {{cssxref("line-height")}} など) の使用値はピクセル数です。一括指定プロパティ ({{cssxref("background")}} など) の使用値は、各成分 ({{cssxref("background-color")}} や {{cssxref("background-size")}} など) のプロパティに、 {{cssxref("position")}} や {{cssxref("float")}} が加味されたものと一致します。

- -
-

メモ: DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API が返すのは解決値であり、これはプロパティによって計算値または使用値のどちらかになります。

-
- -

例

- -

この例は、三つの要素の width の使用値を計算および表示します (大きさを変更すると更新されます)。

- -

HTML

- -
<div id="no-width">
-  <p>明示的な幅の指定なし</p>
-  <p class="show-used-width">..</p>
-
-  <div id="width-50">
-    <p>明示的に幅に 50% を指定</p>
-    <p class="show-used-width">..</p>
-
-    <div id="width-inherit">
-      <p>明示的に幅に inherit を指定</p>
-      <p class="show-used-width">..</p>
-    </div>
-  </div>
-</div>
-
- -

CSS

- -
#no-width {
-  width: auto;
-}
-
-#width-50 {
-  width: 50%;
-}
-
-#width-inherit {
-  width: inherit;
-}
-
-/* 結果を見やすくする */
-div {
-  border: 1px solid red;
-  padding: 8px;
-}
- -

JavaScript

- -
function updateUsedWidth(id) {
-  var div = document.querySelector(`#${id}`);
-  var par = div.querySelector('.show-used-width');
-  var wid = window.getComputedStyle(div)["width"];
-  par.textContent = `Used width: ${wid}.`;
-}
-
-function updateAllUsedWidths() {
-  updateUsedWidth("no-width");
-  updateUsedWidth("width-50");
-  updateUsedWidth("width-inherit");
-}
-
-updateAllUsedWidths();
-window.addEventListener('resize', updateAllUsedWidths);
-
- -

結果

- -

{{ EmbedLiveSample('Example', '80%', 372) }}

- -

計算値との違い

- -

CSS 2.0 では、プロパティの計算の最後のステップとして計算値のみを定義していました。そして CSS 2.1 では、使用値を別な定義として導入しました。そして、計算値がパーセント値である親の幅や高さを、要素が明確に継承できるようになりました。レイアウトに依存しない CSS プロパティ (display, font-size, line-height など) に関しては、計算値と使用値は同じです。以下のものは CSS 2.1 のプロパティのうち、レイアウトに依存し、計算値と使用値が異なるものです。 (CSS 2.1 Changes: Specified, computed, and actual values より取得)。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.2")}} -

変更なし。

-
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/used_value/index.md b/files/ja/web/css/used_value/index.md new file mode 100644 index 0000000000..80cd1f5827 --- /dev/null +++ b/files/ja/web/css/used_value/index.md @@ -0,0 +1,130 @@ +--- +title: 使用値 +slug: Web/CSS/used_value +tags: + - CSS + - Reference + - レイアウト +translation_of: Web/CSS/used_value +--- +
{{cssref}}
+ +

CSS プロパティの使用値 (used value) は、計算値において行われたすべての計算が実行された後の値です。

+ +

{{glossary("user agent", "ユーザーエージェント")}}が計算を終了した後、すべての CSS プロパティは使用値を持ちます。長さ ({{cssxref("width")}} や {{cssxref("line-height")}} など) の使用値はピクセル数です。一括指定プロパティ ({{cssxref("background")}} など) の使用値は、各成分 ({{cssxref("background-color")}} や {{cssxref("background-size")}} など) のプロパティに、 {{cssxref("position")}} や {{cssxref("float")}} が加味されたものと一致します。

+ +
+

メモ: DOM の {{domxref("Window.getComputedStyle", "getComputedStyle()")}} API が返すのは解決値であり、これはプロパティによって計算値または使用値のどちらかになります。

+
+ +

例

+ +

この例は、三つの要素の width の使用値を計算および表示します (大きさを変更すると更新されます)。

+ +

HTML

+ +
<div id="no-width">
+  <p>明示的な幅の指定なし</p>
+  <p class="show-used-width">..</p>
+
+  <div id="width-50">
+    <p>明示的に幅に 50% を指定</p>
+    <p class="show-used-width">..</p>
+
+    <div id="width-inherit">
+      <p>明示的に幅に inherit を指定</p>
+      <p class="show-used-width">..</p>
+    </div>
+  </div>
+</div>
+
+ +

CSS

+ +
#no-width {
+  width: auto;
+}
+
+#width-50 {
+  width: 50%;
+}
+
+#width-inherit {
+  width: inherit;
+}
+
+/* 結果を見やすくする */
+div {
+  border: 1px solid red;
+  padding: 8px;
+}
+ +

JavaScript

+ +
function updateUsedWidth(id) {
+  var div = document.querySelector(`#${id}`);
+  var par = div.querySelector('.show-used-width');
+  var wid = window.getComputedStyle(div)["width"];
+  par.textContent = `Used width: ${wid}.`;
+}
+
+function updateAllUsedWidths() {
+  updateUsedWidth("no-width");
+  updateUsedWidth("width-50");
+  updateUsedWidth("width-inherit");
+}
+
+updateAllUsedWidths();
+window.addEventListener('resize', updateAllUsedWidths);
+
+ +

結果

+ +

{{ EmbedLiveSample('Example', '80%', 372) }}

+ +

計算値との違い

+ +

CSS 2.0 では、プロパティの計算の最後のステップとして計算値のみを定義していました。そして CSS 2.1 では、使用値を別な定義として導入しました。そして、計算値がパーセント値である親の幅や高さを、要素が明確に継承できるようになりました。レイアウトに依存しない CSS プロパティ (display, font-size, line-height など) に関しては、計算値と使用値は同じです。以下のものは CSS 2.1 のプロパティのうち、レイアウトに依存し、計算値と使用値が異なるものです。 (CSS 2.1 Changes: Specified, computed, and actual values より取得)。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS2.2", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.2")}} +

変更なし。

+
{{SpecName("CSS2.1", "cascade.html#used-value", "used value")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

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