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/specificity/index.html | 348 -------------------------------- files/ja/web/css/specificity/index.md | 348 ++++++++++++++++++++++++++++++++ 2 files changed, 348 insertions(+), 348 deletions(-) delete mode 100644 files/ja/web/css/specificity/index.html create mode 100644 files/ja/web/css/specificity/index.md (limited to 'files/ja/web/css/specificity') 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")}}初回定義
+
+ +

関連情報

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