From d0dce4c91dcc21c0c2b5f0fc5b28458e96d9642e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 28 Dec 2024 15:43:16 +0900 Subject: [PATCH 1/4] =?UTF-8?q?2024/12/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styling_basics/basic_selectors/index.md | 364 ++++++++++++++---- 1 file changed, 295 insertions(+), 69 deletions(-) diff --git a/files/ja/learn_web_development/core/styling_basics/basic_selectors/index.md b/files/ja/learn_web_development/core/styling_basics/basic_selectors/index.md index c4bf6f92e7abaf..080b777f4f96df 100644 --- a/files/ja/learn_web_development/core/styling_basics/basic_selectors/index.md +++ b/files/ja/learn_web_development/core/styling_basics/basic_selectors/index.md @@ -1,38 +1,38 @@ --- -title: CSS セレクター +title: 基本的な CSS セレクター slug: Learn_web_development/Core/Styling_basics/Basic_selectors -original_slug: Learn/CSS/Building_blocks/Selectors l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} +{{LearnSidebar}} -{{Glossary("CSS")}}では、セレクター (selector) を使って装飾したい {{glossary("HTML")}} 要素を選択します。CSS セレクターは種類豊富なので、装飾したい要素を細かく選択できます。この記事では、さまざまな種類のセレクターについて、その機能を詳しく確認します。 +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Styling_a_bio_page", "Learn_web_development/Core/Styling_basics/Attribute_selectors", "Learn_web_development/Core/Styling_basics")}} + +{{Glossary("CSS")}} において、スタイル設定したいウェブページ上の {{glossary("HTML")}} 要素を対象とするためにセレクターを使用する方法については、すでに説明しました。 CSS セレクターにはさまざまな種類があり、スタイル設定する要素を選択する際にきめ細かい精度を実現できます。次のいくつかの記事では、さまざまなタイプについて詳しく見ていきます。この記事では、基本的なタイプ、クラスおよび ID セレクター、セレクターリストなど、セレクターの基本についておさらいします。また、全称セレクターについても紹介します。 - - + +
前提条件: - 基本的なソフトウェアがインストールされていること, basic knowledge of - ファイルの扱い, HTML basics (study - HTML 入門)、および CSS がどのように動作するかという考え(CSS の第一歩)に関する基本的な知識を得ている。 + HTML の基本( + 基本的な HTML の構文を学んでいること)。
目的:CSS セレクターがどのように機能するかを学ぶ。学習成果: +
    +
  • 基本的なセレクター型(要素型、クラス、ID)。
  • +
  • ID は文書内の固有であるため、特定の要素を 1 つ選択するには ID を使用すべきであることを理解すること。
  • +
  • それぞれの要素に複数のクラスを指定することができ、必要に応じてスタイルのレイヤーとして使用することができること。
  • +
  • セレクターリスト。
  • +
  • 全称セレクター。
  • +
      +
@@ -43,9 +43,203 @@ CSS セレクターは、CSS ルール (CSS Rule) の最初の部分です。CSS ![多少のコードで、 h1 が強調されている。](selector.png) -他にもいろいろな記事で、様々なセレクターに出会い、様々な方法で文書を対象とするセレクターがあることを知ることができたと思います。例えば、`h1` は HTML 要素で選択する一方 `.special` はクラスで選択します。 +以前の記事で、様々なセレクターに出会い、様々な方法で文書を対象とするセレクターがあることを知ることができたと思います。例えば、`h1` は HTML 要素で選択する一方 `.special` はクラスで選択します。 + +## 要素型セレクター + +**要素型セレクター**は、文書内の HTML のタグや要素を選択するものであるため、タグ名セレクターまたは要素セレクターと呼ばれることもあります。例えば、下記では `span`、`em`、`strong` セレクターを使用しています。 + +CSS ルールを追加して、 `

` 要素を選択し、その色を青に変更してみましょう。 + +```html live-sample___type +

要素型セレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki + bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter + purslane kale. Celery potato scallion desert raisin horseradish spinach +

+``` + +```css live-sample___type +body { + font-family: sans-serif; +} + +span { + background-color: yellow; +} + +strong { + color: rebeccapurple; +} + +em { + color: rebeccapurple; +} +``` + +{{EmbedLiveSample("type", "", "280px")}} + +## クラスセレクター + +クラスセレクターは大文字と小文字を区別し、ドット (`.`) 文字で始まります。文書内でそのクラスが適用されているすべての要素が選択されます。次のライブサンプルでは、 `highlight` というクラスを作成し、それを文書のいくつかの場所に適用しています。このクラスが適用されているすべての要素が強調表示されています。 + +```html live-sample___class +

クラスセレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi + tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+``` + +```css live-sample___class +body { + font-family: sans-serif; +} + +.highlight { + background-color: yellow; +} +``` + +{{EmbedLiveSample("class", "", "220px")}} + +### 特定の要素についたクラスを対象にする + +クラスが適用された特定の要素を対象とするセレクターを作成することができます。例えば、次の例では、 `` のうちクラス名が `highlight` であるものを、 `

` 見出しでクラス名が `highlight` であるものとは異なる形で強調表示します。 対象とする要素型セレクターを使用し、クラス名の間にホワイトスペースを入れずにドットでつなげます。 + +```html live-sample___class-type +

クラスセレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi + tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+``` + +```css live-sample___class-type +body { + font-family: sans-serif; +} + +span.highlight { + background-color: yellow; +} + +h1.highlight { + background-color: pink; +} +``` + +{{EmbedLiveSample("class-type", "", "200px")}} + +この手法はルールの適用範囲を縮小します。ルールは、その具体的な要素とクラスとの組み合わせにのみ適用されます。ルールを他の要素にも適用したい場合は、別のセレクターを追加する必要があります。 + +### 要素に複数のクラスが適用されていた時の対象 + +要素に複数のクラスを適用し、それらを個別に対象にすることも、セレクター内のクラスがすべて存在する場合に要素だけを選択することもできます。これは、サイト上でさまざまな方法で結合できる部分を構築する際に役立つでしょう。 + +次の例では、メモを含む `
` があります。ボックスに `notebox` クラスが設定されている場合、灰色の境界線が適用されます。ボックスに `warning` または `danger` クラスが設定されている場合は、 {{cssxref("border-color")}} を変更します。 + +2 つのクラスがホワイトスペースなしで連結されている場合、要素が一致するようにブラウザーに指示することができます。最後の `
` には `danger` クラスしかないため、スタイル設定が適用されないことがお分かりいただけるでしょう。何らかのスタイル設定を取得するには、 `notebox` も必要です。 + +```html live-sample___class-many +
これは情報のメモです。
+ +
このメモは警告を表します。
+ +
このメモは危険であることを表します。
+ +
+ これはスタイル設定されません。また、 notebox クラスを持つ必要があります。 +
+``` + +```css live-sample___class-many +body { + font-family: sans-serif; +} + +.notebox { + border: 4px solid #666; + padding: 0.5em; + margin: 0.5em; +} + +.notebox.warning { + border-color: orange; + font-weight: bold; +} + +.notebox.danger { + border-color: red; + font-weight: bold; +} +``` + +{{EmbedLiveSample("class-many", "", "200px")}} + +## ID セレクター -セレクターは CSS セレクター仕様で定義されます。ほとんどのセレクターは [Level 3 Selectors specification](https://www.w3.org/TR/selectors-3/) や [Level 4 Selectors specification](https://www.w3.org/TR/selectors-4/) で定義されています。CSS の他の部分と同様に、セレクターが機能するにはブラウザーの対応が必要ですが、どちらも成熟した仕様なのでブラウザーの対応も充実しています。 +ID セレクターは大文字と小文字を区別し、ドット文字の代わりに `#` で始めますが、クラスセレクターと同じ方法で使用します。 ID はページごとに 1 度しか使用することができず、要素には 1 つしか `id` 値を適用できないという違いがあります。 ID は `id` を持つ要素を選択することができ、要素と ID が一致する場合にのみ要素をターゲットとするために、要素型セレクターを ID の前に置くことができます。次の例では、どちらの使用方法も見ることができます。 + +```html live-sample___id +

ID セレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+``` + +```css live-sample___id +body { + font-family: sans-serif; +} + +#one { + background-color: yellow; +} + +h1#heading { + color: rebeccapurple; +} +``` + +{{EmbedLiveSample("id", "", "200px")}} + +> [!WARNING] +> 文書内で同じ ID を複数回使用すると、スタイル設定の目的では動作しているように見えるかもしれませんが、これは行わないでください。これは不正なコードとなり、多くの場所で奇妙な動作を引き起こすことになります。 ## セレクターリスト @@ -80,9 +274,47 @@ h1, 以下のライブサンプルを使って、同じ宣言を持つ 2 つのセレクターを結合してみてください。作業の前後で見た目が変わらないはずです。 -{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1150)}} +```html live-sample___selector-list +

要素型セレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki + bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

+ +

+ Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce + kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter + purslane kale. Celery potato scallion desert raisin horseradish spinach +

+``` + +```css live-sample___selector-list +body { + font-family: sans-serif; +} +span { + background-color: yellow; +} + +strong { + color: rebeccapurple; +} -この方法でセレクターをまとめている場合、間違った文法で書かれたセレクターを 1 つでも含んでいるとルール全体が無視されます。 +em { + color: rebeccapurple; +} +``` + +{{EmbedLiveSample("selector-list", "", "280px")}} + +この方法でセレクターをまとめた場合、間違った構文で書かれたセレクターを 1 つでも含んでいると、ルール全体が無視されます。 次の例では、不正なクラスセレクターのルールは無視され、 `h1` がスタイル設定されます。 @@ -104,79 +336,73 @@ h1, ..special { } ``` -## セレクターの種類 +## 全称セレクター -セレクターにはいくつかのグループ分けがあり、どの種類のセレクターが必要かを知ることは、その仕事に正しいツールを探すのに役立ちます。この記事の下位の記事では、異なるセレクターのグループについてより詳しく見ていきます。 +全称セレクター (universal selector) はアスタリスク (`*`) で示します。これは文書内のすべての要素を選択します。 `*` が[子孫結合子](/ja/docs/Web/CSS/Descendant_combinator)を使用して連結されている場合、その祖先要素内のすべてが選択されます。例えば、 `p *` は `

` 要素内のすべての子要素を選択します。 -### 要素型、クラス、ID セレクター +次の例では、全称セレクターを使用してすべての要素のマージンを削除します。 見出しや段落にマージンを設けて間隔を空けるブラウザーの既定のスタイルではなく、すべてが密接に配置されます。 -[`

`](/ja/docs/Web/HTML/Element/Heading_Elements) のような HTML 要素を選択するセレクターがこのグループに属します。 +```html live-sample___universal +

全称セレクター

+

+ Veggies es bonus vobis, proinde vos postulo essum magis + kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki + bean garlic. +

-```css -h1 { -} +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley + shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra + wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. +

``` -クラスセレクターは、 [`class`](/ja/docs/Web/HTML/Global_attributes/class) 属性に特定の値が示されている要素を対象とします。 - -```css -.box { +```css live-sample___universal +body { + font-family: sans-serif; } -``` - -ID セレクターは、 [`id`](/ja/docs/Web/HTML/Global_attributes/id) 属性に特定の値がある要素を対象とします。 -```css -#unique { +* { + margin: 0; } ``` -### 属性セレクター +{{EmbedLiveSample("universal")}} -このセレクターのグループは、要素上の特定の属性の存在に基づいて要素を選択するさまざまな方法を提供します。 +この種の動作は、ブラウザーのスタイル設定をすべて削除する「リセットスタイルシート」で時折見られます。全称セレクターはグローバルな変更を行うため、下記に記述されているような特定の状況でのみ使用しています。 -```css -a[title] { -} -``` +### 全称セレクターを使用して、セレクターを読みやすくする -特定の属性を持ち、かつ、特定の属性値を持つ要素を選択するセレクターもあります。 +全称セレクターの用途のひとつは、セレクターを読みやすく、また、何を行っているのかをより明確にすることです。例えば、記事 `
` 要素の子孫要素で、親の最初の子であるものすべてを選択し、太字にしたい場合、 {{cssxref(":first-child")}} 擬似クラスを使用することができます。この点については、[擬似クラスと擬似要素](/ja/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements)のレッスンで詳しく説明します。 ```css -a[href="https://example.com"] -{ +article :first-child { + font-weight: bold; } ``` -### 擬似クラスおよび擬似要素 +しかし、この記事のセレクターは `article:first-child`、すうなわち他の要素の最初の子であるすべての `
` 要素を選択するセレクターと混同される可能性があります。 -このセレクターのグループには、要素の特定の状態をスタイル設定する擬似クラスが含まれます。例えば、`:hover`擬似クラスは、マウスポインターが上に置かれたときだけ要素を選択します。 +この混乱を避けるために、全称セレクターを `:first-child` 擬似クラスに追加すると、セレクターが何をしているのかがより明確になるようにします。これは、 `
` 要素の最初の子である、または `
` の任意の子孫要素の最初の子である、任意の要素を選択します。 ```css -a:hover { +article *:first-child { + font-weight: bold; } ``` -擬似要素 (pseudo-element) 、つまり要素自体ではなく要素の特定の部分を選択するセレクターもあります。たとえば、`::first-line` は要素(以下の例では `

`)内の最初の行をまるで `` で囲んでスタイル設定したかのように動作します。 - -```css -p::first-line { -} -``` +どちらも同じことをしていますが、読みやすさが大幅に改善されています。 -### 結合子 - -最後のグループのセレクターは、セレクター同士を組み合わせて文書内のターゲット要素を選択します。たとえば、以下の例では子結合子(子コンビネーター、child combinator)(`>`) によって `

` 要素の直接の子である段落を選択します。 +## まとめ -```css -article > p { -} -``` +この記事では、前回よりも少し掘り下げて、型、クラス、 ID セレクターに注目しながら、具体的な HTML 要素を対象とするための CSS セレクターについてまとめました。次の記事では、属性セレクターについて掘り下げていきます。 -## まとめ +> [!NOTE] +> セレクターの完全なリストについては、 [CSS セレクターリファレンス](/ja/docs/Web/CSS/CSS_selectors)を参照してください。 -この記事や MDN にあるさまざまなセレクターについては、下の方にある表を参照してください。または、[要素型、クラス、ID セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)から見ていくこともできます。 +## 関連情報 -セレクターの完全なリストについては、 [CSS セレクターリファレンス](/ja/docs/Web/CSS/CSS_selectors)を参照してください。 +- [CSS classes](https://v2.scrimba.com/the-frontend-developer-career-path-c0j/~01d?via=mdn), Scrimba _MDN カリキュラムパートナー_ + - : 対話型レッスンであり、 CSS クラスに関するいくつかのガイダンスを提供します。 -{{NextMenu("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Styling_a_bio_page", "Learn_web_development/Core/Styling_basics/Attribute_selectors", "Learn_web_development/Core/Styling_basics")}} From 3164fc299ce9a7d08bc96eb97025084736454174 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 28 Dec 2024 16:06:51 +0900 Subject: [PATCH 2/4] =?UTF-8?q?2024/12/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../attribute_selectors/index.md | 162 +++++++++--------- 1 file changed, 83 insertions(+), 79 deletions(-) diff --git a/files/ja/learn_web_development/core/styling_basics/attribute_selectors/index.md b/files/ja/learn_web_development/core/styling_basics/attribute_selectors/index.md index d8ae8b36f0889e..067ee90dda2971 100644 --- a/files/ja/learn_web_development/core/styling_basics/attribute_selectors/index.md +++ b/files/ja/learn_web_development/core/styling_basics/attribute_selectors/index.md @@ -1,12 +1,13 @@ --- title: 属性セレクター slug: Learn_web_development/Core/Styling_basics/Attribute_selectors -original_slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Basic_selectors", "Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements", "Learn_web_development/Core/Styling_basics")}} HTML の学習で学んだように、要素はマークアップについてさらに詳細な情報を提供する属性を持つことがあります。 CSS では、属性セレクターを使用して、ある種類の属性のある要素を対象に指定できます。このレッスンでは、これらのとても便利なセレクターの使い方を紹介します。 @@ -15,25 +16,20 @@ HTML の学習で学んだように、要素はマークアップについてさ 前提条件: - 基本的なソフトウェアがインストールされていること, basic knowledge of - ファイルの扱い, HTML basics (study - HTML 入門)、および CSS がどのように動作するかという考え(CSS の第一歩)に関する基本的な知識を得ている。 + HTML の基本( + 基本的な HTML の構文を学んでいること)、基本的な CSS セレクター。 - 目的: + 学習成果: - 属性セレクターとは何かと、その使い方を学ぶ。 +
    +
  • 属性セレクターの基本概念。
  • +
  • 存在や値の属性セレクター。
  • +
  • 属性セレクターにおける部分文字列の照合。
  • +
@@ -41,49 +37,14 @@ HTML の学習で学んだように、要素はマークアップについてさ ## 存在や値のセレクター -これらのセレクターにより、要素を属性が存在するか (`href` など)、または属性の値に対して様々な方法で一致させて選択できるようになります。 +これらのセレクターにより、要素を属性が存在するか(`href` など)、または属性の値に対して様々な方法で一致させて選択できるようになります。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
セレクター説明
[attr]a[title] - attr という属性名を持つ要素と一致します(値を角括弧の中に入れます)。 -
[attr=value]a[href="https://example.com"] - attr という属性名で値が value と完全一致する要素と一致します。文字列は引用符の中に入れます。 -
[attr~=value]p[class~="special"] -

-
値が正確に value である attr の属性名を持つ要素、または 1 つ以上の値を含む attr 属性を持つ要素に一致します。複数の値のリストでは、個別の値が空白で区切られていることに注意してください。 -

-
[attr|=value]div[lang|="zh"] - 値が正確に value であるか、または value の直後にハイフンが続く値で始まるattr 属性を持つ要素に一致します。 -
+| セレクター | 例 | 説明 | +| -------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- | +| `[*attr*]` | `a[title]` | _attr_ という属性名を持つ要素に一致します(値を角括弧の中に入れます)。 | +| `[*attr*=*value*]` | `a[href="https://example.com"]` | _attr_ という属性名で値が _value_ (引用符の中の文字列)と完全一致する要素に一致します。 | +| `[*attr*~=*value*]` | `p[class~="special"]` | _attr_ 属性の値が正確に _value_ である、または(空白区切りの)値のリストの中に _value_ を含んでいる要素に一致します。 | +| `[*attr*\|=*value*]` | `div[lang\|="zh"]` | _attr_ 属性の値が正確に _value_ である、または _value_ の直後にハイフンが入ったもので始まる値を持つ要素に一致します。 | 以下の例では、これらのセレクターが使用されていることがわかります。 @@ -91,19 +52,46 @@ HTML の学習で学んだように、要素はマークアップについてさ - `li[class="a"]` は、a のクラスを持つセレクターには一致しますが、別のスペースで区切られたクラスを値の一部として持つ a のクラスを持つセレクターには一致しません。2 番目のリストアイテムを選択します。 - `li[class~="a"]`は、 `a` のクラスを持つセレクターに一致しますが、空白で区切られたリストの一部に `a` のクラスを含む値にも一致します。2 番目と 3 番目のリストアイテムを選択します。 -{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}} +```html live-sample___attribute +

属性の存在や値のセレクター

+
    +
  • アイテム 1
  • +
  • アイテム 2
  • +
  • アイテム 3
  • +
  • アイテム 4
  • +
+``` + +```css live-sample___attribute +body { + font-family: sans-serif; +} +li[class] { + font-size: 120%; +} + +li[class="a"] { + background-color: yellow; +} + +li[class~="a"] { + color: red; +} +``` + +{{EmbedLiveSample("attribute", "", "200px")}} ## 部分文字列照合セレクター -これらのセレクターは、属性の値の中の部分文字列をより高度に照合させることができます。例えば、 `box-warning` と `box-error` のクラスがあり、文字列 "box-" で始まるものを全て一致させたい場合、 `[class^="box-"]` を使用して両方を選択することができます。 +これらのセレクターは、属性の値の中の部分文字列をより高度に照合させることができます。例えば、 `box-warning` と `box-error` のクラスがあり、文字列 "box-" で始まるものを全て一致させたい場合、 `[class^="box-"]` を使用して両方を選択することができます(上記の通り、 `[class|="box"]` でもできます)。 -| セレクター | 例 | 説明 | -| --------------- | ------------------- | ------------------------------------------------------------------------------- | -| `[attr^=value]` | `li[class^="box-"]` | 値が _value_ で始まる _attr_ 属性(名前は角括弧内の値)を持つ要素に一致します。 | -| `[attr$=value]` | `li[class$="-box"]` | 値が _value_ で終わる _attr_ 属性を持つ要素に一致します。 | -| `[attr*=value]` | `li[class*="box"]` | 文字列内の任意の場所に _value_ を含む _attr_ 属性を持つ要素に一致します。 | +| セレクター | 例 | 説明 | +| --------------- | ------------------- | ---------------------------------------------------------------------- | +| `[attr^=value]` | `li[class^="box-"]` | _attr_ 属性の値が _value_ で始まる要素に一致します。 | +| `[attr$=value]` | `li[class$="-box"]` | _attr_ 属性の値が _value_ で終わる要素に一致します。 | +| `[attr*=value]` | `li[class*="box"]` | _attr_ 属性の文字列内のどこかに _value_ を含むを持つ要素に一致します。 | -(ところで、長い間 `^` と `$` は正規表現において、それぞれ _先頭_ と _末尾_ を意味する _アンカー_ として使用されてきたことに注意すると有用かもしれません。) +(参考: 長い間 `^` と `$` は正規表現において、それぞれ _先頭_ と _末尾_ を意味する _アンカー_ として使用されてきたことに注意すると有用かもしれません。) 次の例は、これらのセレクターの使用法を示しています。 @@ -111,21 +99,37 @@ HTML の学習で学んだように、要素はマークアップについてさ - `li[class$="a"]` は `a` で終わる属性値に一致するので、最初と 3 番目のリストアイテムに一致します。 - `li[class*="a"]`は、`a` が文字列のどこかに現れる属性値に一致します。 -{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}} - -## 大文字小文字の区別 +```html live-sample___attribute-substring +

属性の部分文字列照合セレクター

+
    +
  • アイテム 1
  • +
  • アイテム 2
  • +
  • アイテム 3
  • +
  • アイテム 4
  • +
+``` -属性値を大文字小文字を区別せずに照合したい場合は、閉じ括弧の前に値 `i` を使うことができます。このフラグは、ブラウザーに {{Glossary("ASCII")}} 文字を大文字小文字を区別せずに照合するように指示します。このフラグがない場合、値は文書言語の大文字小文字の区別に従って照合されます - HTML の場合は大文字小文字を区別します。 +```css live-sample___attribute-substring +body { + font-family: sans-serif; +} +li[class^="a"] { + font-size: 120%; +} -下の例では、最初のセレクターは `a` で始まる値に一致します。他の 2 つのリストアイテムは大文字の A で始まるので、最初のリストアイテムにのみ一致します。 2 つ目のセレクターは大文字と小文字を区別しないフラグを使用しているので、すべてのリストアイテムに一致します。 +li[class$="a"] { + background-color: yellow; +} -{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}} +li[class*="a"] { + color: red; +} +``` -> [!NOTE] -> 新しい値 `s` もあります。これは、通常大文字と小文字が区別されないコンテキストで大文字と小文字を区別する照合を強制しますが、これはブラウザーではあまり対応されておらず、HTML の文脈ではあまり役に立ちません。 +{{EmbedLiveSample("attribute-substring", "", "200px")}} -## 次のステップ +## まとめ -これで属性セレクターが完了しました。次の記事に進んで、[pseudo-class and pseudo-element selectors](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)について読むことができます。 +これで属性セレクターについては終了です。次の記事では続いて、擬似クラスと擬似要素セレクターについて説明します。 -{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Basic_selectors", "Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements", "Learn_web_development/Core/Styling_basics")}} From ea0850753d326561755588f75b7d38c0949e21cf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 28 Dec 2024 16:19:23 +0900 Subject: [PATCH 3/4] =?UTF-8?q?2024/12/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pseudo_classes_and_elements/index.md | 170 +++++++++++++++--- 1 file changed, 145 insertions(+), 25 deletions(-) diff --git a/files/ja/learn_web_development/core/styling_basics/pseudo_classes_and_elements/index.md b/files/ja/learn_web_development/core/styling_basics/pseudo_classes_and_elements/index.md index 03b068751da81d..ee19c10b45bf5c 100644 --- a/files/ja/learn_web_development/core/styling_basics/pseudo_classes_and_elements/index.md +++ b/files/ja/learn_web_development/core/styling_basics/pseudo_classes_and_elements/index.md @@ -1,34 +1,37 @@ --- title: 擬似クラスと擬似要素 slug: Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements -original_slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} +{{LearnSidebar}} -次に見ていくセレクターの集合は、**擬似クラス**と**擬似要素**と呼ばれるものです。これらのセレクターは多数あり、かなり特有の用途に使われることが多いです。これらがどのように動作するのかがわかれば、一覧を見て、達成しようとしている作業にとってうまくいくものがあるかどうかを確認することができます。ブラウザーの対応については、繰り返しになりますが、セレクターの MDN ページが参考になります。 +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Attribute_selectors", "Learn_web_development/Core/Styling_basics/Combinators", "Learn_web_development/Core/Styling_basics")}} + +次に見ていく一連のセレクターは、**擬似クラス**および**擬似要素**と呼ばれるものです。これらのセレクターは多数あり、かなり特有の用途に使われることが多いです。それらの使用方法を理解したら、さまざまな種類を見ていき、自分が実現しようと取り組んでいる課題にうまくいくものがあるかどうかを確認しましょう。 - - + +
前提条件: - 基本的なソフトウェアのインストールファイルの操作に関する基本的な知識、 HTML の基本(HTML 入門を学んでください)、 CSS の動作に関する知識(CSS 第一歩を学んでください)。 + HTML の基本( + 基本的な HTML の構文を学んでいること)、基本的な CSS セレクター
目的:擬似クラスおよび擬似要素セレクターについて学習すること。学習成果: +
    +
  • 擬似クラスと擬似要素。
  • +
  • 2 つの違い。
  • +
  • 擬似クラスと擬似要素の組み合わせ。
  • +
  • 生成コンテンツ。
  • +
+
@@ -43,11 +46,55 @@ l10n: 簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスに CSS を追加できます。 -{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}} +```html live-sample___first-child +
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

+
+``` + +```css live-sample___first-child +.first { + font-size: 120%; + font-weight: bold; +} +``` + +{{EmbedLiveSample("first-child")}} しかし、これでは保守が面倒になります。文書の先頭に新しい段落が追加されたらどうでしょう?新しい段落にクラスを移さなければなりません。クラスを追加する代わりに、 {{cssxref(":first-child")}} 擬似クラスセレクターを使用することができます。これは常に記事の最初の子要素を対象としますので、 HTML を編集する必要がなくなります(これは、CMS によって生成された可能性があるため、とにかく常に可能であるとは限りません)。 -{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}} +```html live-sample___first-child2 +
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

+
+``` + +```css live-sample___first-child2 +article p:first-child { + font-size: 120%; + font-weight: bold; +} +``` + +{{EmbedLiveSample("first-child2")}} すべての擬似クラスは、この同じ方法で動作します。特定の状態にある文書の一部を対象にして、 HTML にクラスを追加したかのように動作します。 MDN の他の例をいくつか見てみましょう。 @@ -65,7 +112,23 @@ l10n: - [`:hover`](/ja/docs/Web/CSS/:hover) — 前述の通りです。これは、ユーザーが要素(通常はリンク)の上にポインターを載せた場合にのみ適用されます。 - [`:focus`](/ja/docs/Web/CSS/:focus) — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。 -{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}} +```html live-sample___hover +

ここにカーソルを当ててください

+``` + +```css live-sample___hover +a:link, +a:visited { + color: rebeccapurple; + font-weight: bold; +} + +a:hover { + color: hotpink; +} +``` + +{{EmbedLiveSample("hover")}} ## 擬似要素とは何か @@ -80,7 +143,29 @@ l10n: `::first-line` 擬似要素セレクターは確実にあなたのためにこれを行います-それはまだ最初の行のみを選択します言葉の数が増加した場合と減少します。 -{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}} +```html live-sample___first-line +
+

+ Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

+ +

+ Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

+
+``` + +```css live-sample___first-line +article p::first-line { + font-size: 120%; + font-weight: bold; +} +``` + +{{EmbedLiveSample("first-line")}} それはまるで最初の整形された行を `` で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。 @@ -103,21 +188,56 @@ CSS を使用してコンテンツを文書に挿入するための [`content`]( 以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 `::before` 擬似要素を `::after` に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。 -{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}} +```html live-sample___before +

この HTML ページ内のボックスのコンテンツ

+``` + +```css live-sample___before +.box::before { + content: "これは他のコンテンツの前に表示されます。"; +} +``` + +{{EmbedLiveSample("before")}} CSS からテキストを挿入することは、ウェブ上で実に多く使用することではありません。なぜなら、そのテキストはスクリーンリーダーによってはアクセスできず、将来誰かが見つけて編集するのが難しくなるからです。 これらの擬似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。 -{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}} +```html live-sample___after-icon +

この HTML ページ内のボックスのコンテンツ

+``` + +```css live-sample___after-icon +.box::after { + content: " ➥"; +} +``` + +{{EmbedLiveSample("after-icon")}} これらの擬似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。 次の例では、 `::before` 擬似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを `display: block` に設定しました。次に、CSS を使用して、他の要素と同じようにスタイルを設定します。CSS をいじって、CSS の外観と動作を変更できます。 -{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} +```html live-sample___before-styled +

この HTML ページ内のボックスのコンテンツ

+``` + +```css live-sample___before-styled +.box::before { + content: ""; + display: block; + width: 100px; + height: 100px; + background-color: rebeccapurple; + border: 1px solid black; +} +``` + +{{EmbedLiveSample("before-styled", "", "160")}} -`::before` と `::after` 擬似要素を `content` プロパティとともに使用することは、CSS では「生成コンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、 [CSS Arrow Please](http://www.cssarrowplease.com/) のサイトで、 [CSS で矢印](http://www.cssarrowplease.com/)を生成するのに役立てています。矢印を作成するときの CSS を見ると、 {{cssxref("::before")}} および {{cssxref("::after")}} 擬似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、文書に何が追加されているかを確認してください。 +`::before` と `::after` 擬似要素を `content` プロパティとともに使用することは、CSS では「生成コンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、 [CSS Arrow Please](http://cssarrowplease.com/) のサイトで、矢印を生成するのに役立てています。矢印を作成するときの CSS を見ると、 {{cssxref("::before")}} および {{cssxref("::after")}} 擬似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、文書に何が追加されているかを確認してください。 ## まとめ @@ -125,11 +245,11 @@ CSS からテキストを挿入することは、ウェブ上で実に多く使 擬似クラスを使用すると、要素が特定の状態にあるときに、その状態のクラスを DOM に追加したかのように、その要素を対象とすることができます。擬似要素は、あたかも DOM に新しい要素を追加したかのように動作し、その要素をスタイル設定することができます。擬似要素の `::before` と `::after` では、 CSS を使用して文書内のコンテンツを挿入することができます。 -次の記事では、[結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators)について学びます。 +次の記事では、結合子について学びます。 ## 関連情報 - [擬似クラスリファレンス](/ja/docs/Web/CSS/Pseudo-classes) - [擬似要素リファレンス](/ja/docs/Web/CSS/Pseudo-elements) -{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Attribute_selectors", "Learn_web_development/Core/Styling_basics/Combinators", "Learn_web_development/Core/Styling_basics")}} From a1834d6c957d8d1a1917da5c29f34bc2288073a4 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 28 Dec 2024 17:07:54 +0900 Subject: [PATCH 4/4] =?UTF-8?q?2024/12/20=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../core/styling_basics/combinators/index.md | 162 ++++++++++++++---- 1 file changed, 133 insertions(+), 29 deletions(-) diff --git a/files/ja/learn_web_development/core/styling_basics/combinators/index.md b/files/ja/learn_web_development/core/styling_basics/combinators/index.md index 4325fcc7c0f826..9b0bc2279f2823 100644 --- a/files/ja/learn_web_development/core/styling_basics/combinators/index.md +++ b/files/ja/learn_web_development/core/styling_basics/combinators/index.md @@ -1,12 +1,13 @@ --- title: 結合子 slug: Learn_web_development/Core/Styling_basics/Combinators -original_slug: Learn/CSS/Building_blocks/Selectors/Combinators l10n: - sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3 + sourceCommit: a92e10b293358bc796c43d5872a8981fd988a005 --- -{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks")}} +{{LearnSidebar}} + +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements", "Learn_web_development/Core/Styling_basics/Box_model", "Learn_web_development/Core/Styling_basics")}} ここで取り上げる最後のセレクターは、他のセレクターと、ドキュメント内のコンテンツの場所や場所との有用な関係を提供する方法で組み合わせるため、結合子と呼ばれます。 @@ -15,22 +16,22 @@ l10n: 前提条件: - 基本的なソフトウェアのインストールファイルの扱い、の基本知識、 HTML の基本(HTML 入門で学習)および CSS の動作が分かっていること(CSS の第一歩で学習) + HTML の基本( + 基本的な HTML の構文を学んでいること)、基本的な CSS セレクター。 - 目的: + 学習成果: - CSS で使用できるさまざまな結合子セレクターについて学ぶ。 - CSS. +
    +
  • 結合氏の基本概念。
  • +
  • 子孫結合子と子結合子。
  • +
  • 次兄弟結合子と後続兄弟結合子。
  • +
  • 入れ子。
  • +
  • 結合子とセレクターの組み合わせ。
  • +
      @@ -38,15 +39,27 @@ l10n: ## 子孫結合子 -**子孫結合子** (descendant combinator) は、通常は単一のスペース(" ")文字で表され、2 つのセレクターを結合して、最初のセレクターと一致する祖先(親、親の親、親の親の親など)要素がある場合、 2 番目のセレクターと一致する要素が選択されるようにします。 子孫結合子を利用するセレクターは、子孫セレクターと呼ばれます。 +**子孫結合子** (descendant combinator) は、通常は単一のスペース( )文字で表され、2 つのセレクターを結合して、最初のセレクターと一致する祖先(親、親の親、親の親の親など)要素がある場合、 2 番目のセレクターと一致する要素が選択されるようにします。 子孫結合子を利用するセレクターは、子孫セレクターと呼ばれます。 ```css -body article p +body article p { +} ``` 以下の例は、 `.box` クラスのついた要素の内部にある `

      ` 要素のみに一致します。 -{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}} +```html live-sample___descendant +

      .box の中のテキスト

      +

      .box の外のテキスト

      +``` + +```css live-sample___descendant +.box p { + color: red; +} +``` + +{{EmbedLiveSample("descendant")}} ## 子結合子 @@ -60,7 +73,26 @@ article > p これを子結合子として指定している `>` を削除すると、子孫セレクターになり、すべての `
    • ` 要素に赤い境界線が表示されます。 -{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}} +```html live-sample___child +
        +
      • 順序なしアイテム
      • +
      • + 順序なしアイテム +
          +
        1. アイテム 1
        2. +
        3. アイテム 2
        4. +
        +
      • +
      +``` + +```css live-sample___child +ul > li { + border-top: 5px solid red; +} +``` + +{{EmbedLiveSample("child")}} ## 次兄弟結合子 @@ -74,9 +106,36 @@ p + img もし `

      ` と `

      ` の間に `

      ` のような他の要素を挿入すると、段落はセレクターに一致しなくなり、要素が隣接しているときに適用される背景色と前景色が適用されなくなります。 - +```html live-sample___adjacent +
      +

      見出し

      +

      + Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion + daikon amaranth tatsoi tomatillo melon azuki bean garlic. +

      + +

      + Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette + tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. + Dandelion cucumber earthnut pea peanut soko zucchini. +

      +
      +``` + +```css live-sample___adjacent +body { + font-family: sans-serif; +} + +h1 + p { + font-weight: bold; + background-color: #333; + color: #fff; + padding: 0.5em; +} +``` -{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}} +{{EmbedLiveSample("adjacent", "", "220px")}} ## 後続兄弟結合子 @@ -88,9 +147,29 @@ p ~ img 以下の例では、`

      ` の後に続くすべての `

      ` 要素を選択しています。また、ドキュメントに `

      ` がある場合でも、その後にある `

      ` が選択されています。 - +```html live-sample___general +

      +

      見出し

      +

      これは段落です。

      +
      これは div です
      +

      これは他の段落です。

      +
      +``` + +```css live-sample___general +body { + font-family: sans-serif; +} + +h1 ~ p { + font-weight: bold; + background-color: #333; + color: #fff; + padding: 0.5em; +} +``` -{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}} +{{EmbedLiveSample("general", "", "220px")}} ## 入れ子による複雑なセレクターの作成 @@ -106,7 +185,7 @@ p ~ img { } ``` -[`&` 入れ子セレクター](/ja/docs/Web/CSS/Nesting_selector)も、複合セレクターを作成するために使用されることがあります。 +[`&` 入れ子セレクター](/ja/docs/Web/CSS/Nesting_selector)も、複雑なセレクターを作成するために使用されることがあります。 ```css p { @@ -118,9 +197,34 @@ p img { } ``` - +複雑なセレクターの例を以下に示します。 + +```html live-sample___nesting +
      +

      見出し

      +

      これは段落です。

      +
      これは div です
      +

      これは他の段落です。

      +
      +``` + +```css live-sample___nesting +body { + font-family: sans-serif; +} + +h1 { + & ~ p { + /* this is parsed by the browser as h1 ~ p */ + font-weight: bold; + background-color: #333; + color: #fff; + padding: 0.5em; + } +} +``` -{{EmbedGHLiveSample("css-examples/learn/selectors/nesting.html", '100%', 800)}} +{{EmbedLiveSample("nesting", "", "220px")}} > [!NOTE] > 上の例では、 `&` 入れ子セレクターは必須ではありませんが、これを追加することで、CSSの入れ子が使用されていることを明示的に示すことができます。 @@ -140,10 +244,10 @@ ul > li[class="a"] { ## スキルテスト -この記事の最後に達しましたが、最も大切な情報を覚えていますか?次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks)を参照してください。 +この記事の最後に達しましたが、最も大切な情報を覚えていますか?次に進む前に、この情報が身に付いたかどうかを確認するテストがあります。[スキルテスト: セレクター](/ja/docs/Learn_web_development/Core/Styling_basics/Basic_selectors/Selectors_Tasks)を参照してください。 ## まとめ -セレクターの学習はこの章で終わりです。次は、 CSS のもう一つの重要な部分である[カスケード、詳細度、継承](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)に進みます。 +セレクターの学習は以上です。次は、 CSS のもう一つの重要な部分であるボックスモデルに進みます。 -{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks")}} +{{PreviousMenuNext("Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements", "Learn_web_development/Core/Styling_basics/Box_model", "Learn_web_development/Core/Styling_basics")}}