From e35f378f5a7ab0c7523ce0702d98add449dd9f5f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 5 Jan 2022 23:16:15 +0900 Subject: CSS セレクター以下の記事を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_selectors/index.html | 132 --------------------- files/ja/web/css/css_selectors/index.md | 132 +++++++++++++++++++++ .../index.html | 68 ----------- .../index.md | 68 +++++++++++ 4 files changed, 200 insertions(+), 200 deletions(-) delete mode 100644 files/ja/web/css/css_selectors/index.html create mode 100644 files/ja/web/css/css_selectors/index.md delete mode 100644 files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md diff --git a/files/ja/web/css/css_selectors/index.html b/files/ja/web/css/css_selectors/index.html deleted file mode 100644 index f1b00fa844..0000000000 --- a/files/ja/web/css/css_selectors/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: CSS セレクター -slug: Web/CSS/CSS_Selectors -tags: - - CSS - - Guide - - Overview - - Reference - - Selectors -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef("Selectors")}}
- -

CSS セレクターは、一連の CSS の規則が適用される要素を定義します。

- -
-

メモ: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。

-
- -

基本セレクター

- -
-
全称セレクター
-
すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。
- 構文: * ns|* *|*
- 例: * は文書のすべての要素を選択します。
-
要素型セレクター
-
指定されたノード名を持つすべての要素を選択します。
- 構文: elementname
- 例: input はあらゆる {{HTMLElement("input")}} 要素を選択します。
-
クラスセレクター
-
指定された class 属性を持つすべての要素を選択します。
- 構文: .classname
- 例: .index は "index" クラスを持つあらゆる要素を選択します。
-
ID セレクター
-
id 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は1つしかないはずです。
- 構文: #idname
- 例: #toc は "toc" という ID を持つ要素を選択します。
-
属性セレクター
-
指定された属性を持つ要素をすべて選択します。
- 構文: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
- 例: [autoplay] は autoplay 属性が（どんな値でも）設定されているすべての要素を選択します。
-
- -

グループ化セレクター

- -
-
セレクターリスト
-
, はグループ化の手段であり、一致するすべてのノードを選択します。
- 構文: A, B
- 例: div, span は {{HTMLElement("span")}} と {{HTMLElement("div")}} の両要素に一致します。
-
- -

結合子

- -
-
子孫結合子
-
  (空白) 結合子は、第1の要素の子孫にあたるノードを選択します。
- 構文: A B
- 例: div span は {{HTMLElement("div")}} 要素の中にある {{HTMLElement("span")}} 要素をすべて選択します。
-
子結合子
-
> 結合子は、第1の要素の直接の子に当たるノードを選択します。
- 構文: A > B
- 例: ul > li は {{HTMLElement("ul")}} 要素の内側に直接ネストされた {{HTMLElement("li")}} 要素をすべて選択します。
-
一般兄弟結合子
-
~ 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。
- 構文: A ~ B
- 例: p ~ span は {{HTMLElement("p")}} 要素の後にある {{HTMLElement("span")}} 要素をすべて選択します。
-
隣接兄弟結合子
-
+ 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。
- 構文: A + B
- 例: h2 + p は {{HTMLElement("h2")}} 要素の後にすぐに続く {{HTMLElement("p")}} 要素をすべて選択します。
-
列結合子 {{Experimental_Inline}}
-
|| 結合子は列に所属するノードを選択します。
- 構文: A || B
- 例: col || td は {{HTMLElement("col")}} 要素のスコープに所属するすべての {{HTMLElement("td")}} 要素を選択します。
-
- -

擬似表記

- -
-
擬似クラス
-
: 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。
- 例: a:visited はユーザーが訪問済みの {{HTMLElement("a")}} 要素をすべて選択します。
-
疑似要素
-
:: 表記は、 HTML に含まれていないエンティティを表現します。
-
例: p::first-line はすべての {{HTMLElement("p")}} 要素の先頭行を選択します。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}|| 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の疑似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}~ 一般兄弟結合子、およびツリー構造の疑似クラスを追加。
- 疑似要素に二重コロン :: の接頭辞を用いるようにした。追加の属性セレクター。
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}子結合子 > および隣接兄弟結合子 + を追加。
- 全称セレクターと属性セレクターを追加。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}初回定義
- -

疑似クラスおよび疑似要素の詳細は、それぞれの仕様書一覧表をご覧ください。

- -

関連情報

- - diff --git a/files/ja/web/css/css_selectors/index.md b/files/ja/web/css/css_selectors/index.md new file mode 100644 index 0000000000..f1b00fa844 --- /dev/null +++ b/files/ja/web/css/css_selectors/index.md @@ -0,0 +1,132 @@ +--- +title: CSS セレクター +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - Guide + - Overview + - Reference + - Selectors +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS セレクターは、一連の CSS の規則が適用される要素を定義します。

+ +
+

メモ: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。

+
+ +

基本セレクター

+ +
+
全称セレクター
+
すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。
+ 構文: * ns|* *|*
+ 例: * は文書のすべての要素を選択します。
+
要素型セレクター
+
指定されたノード名を持つすべての要素を選択します。
+ 構文: elementname
+ 例: input はあらゆる {{HTMLElement("input")}} 要素を選択します。
+
クラスセレクター
+
指定された class 属性を持つすべての要素を選択します。
+ 構文: .classname
+ 例: .index は "index" クラスを持つあらゆる要素を選択します。
+
ID セレクター
+
id 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は1つしかないはずです。
+ 構文: #idname
+ 例: #toc は "toc" という ID を持つ要素を選択します。
+
属性セレクター
+
指定された属性を持つ要素をすべて選択します。
+ 構文: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ 例: [autoplay] は autoplay 属性が（どんな値でも）設定されているすべての要素を選択します。
+
+ +

グループ化セレクター

+ +
+
セレクターリスト
+
, はグループ化の手段であり、一致するすべてのノードを選択します。
+ 構文: A, B
+ 例: div, span は {{HTMLElement("span")}} と {{HTMLElement("div")}} の両要素に一致します。
+
+ +

結合子

+ +
+
子孫結合子
+
  (空白) 結合子は、第1の要素の子孫にあたるノードを選択します。
+ 構文: A B
+ 例: div span は {{HTMLElement("div")}} 要素の中にある {{HTMLElement("span")}} 要素をすべて選択します。
+
子結合子
+
> 結合子は、第1の要素の直接の子に当たるノードを選択します。
+ 構文: A > B
+ 例: ul > li は {{HTMLElement("ul")}} 要素の内側に直接ネストされた {{HTMLElement("li")}} 要素をすべて選択します。
+
一般兄弟結合子
+
~ 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。
+ 構文: A ~ B
+ 例: p ~ span は {{HTMLElement("p")}} 要素の後にある {{HTMLElement("span")}} 要素をすべて選択します。
+
隣接兄弟結合子
+
+ 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。
+ 構文: A + B
+ 例: h2 + p は {{HTMLElement("h2")}} 要素の後にすぐに続く {{HTMLElement("p")}} 要素をすべて選択します。
+
列結合子 {{Experimental_Inline}}
+
|| 結合子は列に所属するノードを選択します。
+ 構文: A || B
+ 例: col || td は {{HTMLElement("col")}} 要素のスコープに所属するすべての {{HTMLElement("td")}} 要素を選択します。
+
+ +

擬似表記

+ +
+
擬似クラス
+
: 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。
+ 例: a:visited はユーザーが訪問済みの {{HTMLElement("a")}} 要素をすべて選択します。
+
疑似要素
+
:: 表記は、 HTML に含まれていないエンティティを表現します。
+
例: p::first-line はすべての {{HTMLElement("p")}} 要素の先頭行を選択します。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}|| 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の疑似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}~ 一般兄弟結合子、およびツリー構造の疑似クラスを追加。
+ 疑似要素に二重コロン :: の接頭辞を用いるようにした。追加の属性セレクター。
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}子結合子 > および隣接兄弟結合子 + を追加。
+ 全称セレクターと属性セレクターを追加。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}初回定義
+ +

疑似クラスおよび疑似要素の詳細は、それぞれの仕様書一覧表をご覧ください。

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html deleted file mode 100644 index bec8180372..0000000000 --- a/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 'セレクターでの :target 疑似クラスの利用' -slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' -tags: - - ':target' - - CSS - - ガイド - - セレクター - - リファレンス -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -
{{CSSRef}}
- -

URL が文書の特定の部分を指している場合、ユーザーが気づきにくい場合があります。いくつかのシンプルな CSS を使用して URL の対象に注目させ、ユーザーの利便性を向上させる方法を確認しましょう。

- -

ターゲットの選択

- -

{{cssxref(":target")}} 疑似クラスは、フラグメント識別子を含む URL のターゲット要素にスタイルを適用するために使用されます。例えば、 http://developer.mozilla.org/ja/docs/Using_the_:target_selector#example という URL はフラグメント識別子 #example を含んでいます。 HTML では、 id 及び name 属性が名前空間を共用しているので、識別子はどちらかの値として見つかります。従って、例の URL はこの文書の「例」の見出しを指すことになります。

- -

おそらく URL のターゲットになる h2 要素をすべてスタイル付けしたいでしょうが、他の種類の要素がターゲットのスタイルになることは望まないでしょう。単純にこうするだけです。

- -
h2:target { font-weight: bold; }
- -

文書の特定のフラグメントに特化してスタイルを作成することもできます。これは URI に見られる値と同じ識別子を使用することで実現できます。つまり、 #example フラグメントに枠を追加するには、以下の書きます。

- -
#example:target { border: 1px solid black; }
- -

すべての要素を対象にする

- -

インテントが「ブランケット」スタイルで作成されれば、すべての対象となる要素に適用されますので、ユニバーサルセレクターの代わりになります。

- -
:target { color: red; }
-
- -

例

- -

以下の例には、同じ文書内で要素を指す五つのリンクがあります。例えば「First」のリンクを選択すると、 <h1 id="one"> がターゲットの要素になります。なお、ターゲット要素は可能であればブラウザーウィンドウの先頭に配置されるため、文書は新しいスクロール位置へ移動する可能性があります。

- -
-
<h4 id="one">...</h4> <p id="two">...</p>
-<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
-
-<a href="#one">First</a>
-<a href="#two">Second</a>
-<a href="#three">Third</a>
-<a href="#four">Fourth</a>
-<a href="#five">Fifth</a>
-
- -

まとめ

- -

フラグメント識別子が文書の一部を指している場合、文書のどの部分を読むことを想定しているのか、読み手が分からなくなることがあります。 URI の対象をスタイル付けすることで、読み手の混乱を縮小したり除いたりすることができます。

- - - - - -
-

原典情報

- - -
diff --git a/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md new file mode 100644 index 0000000000..bec8180372 --- /dev/null +++ b/files/ja/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md @@ -0,0 +1,68 @@ +--- +title: 'セレクターでの :target 疑似クラスの利用' +slug: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +tags: + - ':target' + - CSS + - ガイド + - セレクター + - リファレンス +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +
{{CSSRef}}
+ +

URL が文書の特定の部分を指している場合、ユーザーが気づきにくい場合があります。いくつかのシンプルな CSS を使用して URL の対象に注目させ、ユーザーの利便性を向上させる方法を確認しましょう。

+ +

ターゲットの選択

+ +

{{cssxref(":target")}} 疑似クラスは、フラグメント識別子を含む URL のターゲット要素にスタイルを適用するために使用されます。例えば、 http://developer.mozilla.org/ja/docs/Using_the_:target_selector#example という URL はフラグメント識別子 #example を含んでいます。 HTML では、 id 及び name 属性が名前空間を共用しているので、識別子はどちらかの値として見つかります。従って、例の URL はこの文書の「例」の見出しを指すことになります。

+ +

おそらく URL のターゲットになる h2 要素をすべてスタイル付けしたいでしょうが、他の種類の要素がターゲットのスタイルになることは望まないでしょう。単純にこうするだけです。

+ +
h2:target { font-weight: bold; }
+ +

文書の特定のフラグメントに特化してスタイルを作成することもできます。これは URI に見られる値と同じ識別子を使用することで実現できます。つまり、 #example フラグメントに枠を追加するには、以下の書きます。

+ +
#example:target { border: 1px solid black; }
+ +

すべての要素を対象にする

+ +

インテントが「ブランケット」スタイルで作成されれば、すべての対象となる要素に適用されますので、ユニバーサルセレクターの代わりになります。

+ +
:target { color: red; }
+
+ +

例

+ +

以下の例には、同じ文書内で要素を指す五つのリンクがあります。例えば「First」のリンクを選択すると、 <h1 id="one"> がターゲットの要素になります。なお、ターゲット要素は可能であればブラウザーウィンドウの先頭に配置されるため、文書は新しいスクロール位置へ移動する可能性があります。

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

まとめ

+ +

フラグメント識別子が文書の一部を指している場合、文書のどの部分を読むことを想定しているのか、読み手が分からなくなることがあります。 URI の対象をスタイル付けすることで、読み手の混乱を縮小したり除いたりすることができます。

+ + + + + +
+

原典情報

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