From a82448c1ba3b12e2dc6180bfdf851a42ef04c924 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 01:25:59 +0900 Subject: [PATCH 1/2] =?UTF-8?q?2023/06/30=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=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 182 +++++++----------- 1 file changed, 70 insertions(+), 112 deletions(-) diff --git a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index d0d3c889ab31ae..5f6352fefc5dff 100644 --- a/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/ja/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -1,60 +1,77 @@ --- -title: 疑似クラスと疑似要素 +title: 擬似クラスと擬似要素 slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +l10n: + sourceCommit: 751d58669499de0c6ea0d5b356e0e1448418c5d3 --- {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} -次に取り上げるセレクターのセットは、**疑似クラス**と**疑似要素**と呼ばれます。これらは多数あり、多くの場合、それらは非常に特定の目的に役立ちます。それらの使用方法がわかったら、リストを見て、達成しようとしているタスクに有効なものがあるかどうかを確認できます。ここでも、各セレクターに関連する MDN ページは、ブラウザーサポートの説明に役立ちます。 - -| 前提条件： | 基本的なコンピュータリテラシー、[インストールされている基本的なソフトウェア](/ja/Learn/Getting_started_with_the_web/Installing_basic_software)[、ファイルの操作](/ja/Learn/Getting_started_with_the_web/Dealing_with_files)に関する基本的な知識、HTML の基本（[HTML の概要を](/ja/docs/Learn/HTML/Introduction_to_HTML)学ぶ）、CSS のしくみ（[CSS の最初のステップを](/ja/docs/Learn/CSS/First_steps)学ぶ）。 | -| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 目的： | 疑似クラスおよび疑似要素セレクターについて学習します。 | - -## 疑似クラスとは何ですか？ - -疑似クラスは、特定の状態にある要素を選択するセレクターです。たとえば、それらはそのタイプの最初の要素であるか、マウスポインターによってホバーされています。それらは、ドキュメントの一部にクラスを適用したかのように振る舞う傾向があり、マークアップの余分なクラスを削減し、より柔軟で保守可能なコードを提供するのに役立ちます。 - -疑似クラスは、コロンで始まるキーワードです。 - -``` -:疑似クラス名 -``` - -### 単純な疑似クラスの例 +次に見ていくセレクターの集合は、**擬似クラス**と**擬似要素**と呼ばれるものです。これらのセレクターは多数あり、かなり特有の用途に使われることが多いです。これらがどのように動作するのかがわかれば、一覧を見て、達成しようとしている作業にとってうまくいくものがあるかどうかを確認することができます。ブラウザーの対応については、繰り返しになりますが、セレクターの MDN ページが参考になります。 + + + + + + + + + + + + +
前提条件: + 基本的なコンピュータリテラシー、基本的なソフトウェアのインストール、ファイルの操作に関する基本的な知識、 HTML の基本（HTML 入門を学んでください）、 CSS の動作に関する知識（CSS 第一歩を学んでください）。 +
目的:擬似クラスおよび擬似要素セレクターについて学習すること。
+ +## 擬似クラスとは何か + +擬似クラスは、特定の状態にある要素を選択するセレクターです。例えば、その型の最初の要素であるとか、ポインターを当てた状態であるなどです。擬似クラスは、あたかも文書内の一部にクラスを適用したかのように動作する傾向があり、マークアップ内の余分なクラスを削減することを支援していただくことが多く、より柔軟で保守性の高いコードを提供します。 + +擬似クラスはコロンで始まるキーワードです。例えば `:hover` は擬似クラスです。 + +### 単純な擬似クラスの例 簡単な例を見てみましょう。以下の最初の例に示すように、記事の最初の段落を大きく太字にしたい場合は、その段落にクラスを追加してから、そのクラスに CSS を追加できます。 {{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}} -ただし、これを維持するのは面倒な場合があります。ドキュメントの上部に新しい段落が追加された場合はどうなりますか？クラスを新しい段落に移動する必要があります。クラスを追加する代わりに、{{cssxref(":first-child")}} 疑似クラスセレクターを使用できます。これにより、*常に*記事の最初の子要素がターゲットになり、HTML を編集する必要がなくなります（これは、CMS によって生成された可能性があるため、とにかく常に可能であるとは限りません。） +しかし、これでは保守が面倒になります。文書の先頭に新しい段落が追加されたらどうでしょう？新しい段落にクラスを移さなければなりません。クラスを追加する代わりに、 {{cssxref(":first-child")}} 擬似クラスセレクターを使用することができます。これは常に記事の最初の子要素を対象としますので、 HTML を編集する必要がなくなります（これは、CMS によって生成された可能性があるため、とにかく常に可能であるとは限りません）。 {{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}} -すべての疑似クラスは、この同じ方法で動作します。特定の状態にあるドキュメントの一部をターゲットにして、HTML にクラスを追加したかのように動作します。MDN の他の例をいくつか見てみましょう。 +すべての擬似クラスは、この同じ方法で動作します。特定の状態にある文書の一部を対象にして、 HTML にクラスを追加したかのように動作します。 MDN の他の例をいくつか見てみましょう。 - [`:last-child`](/ja/docs/Web/CSS/:last-child) - [`:only-child`](/ja/docs/Web/CSS/:only-child) - [`:invalid`](/ja/docs/Web/CSS/:invalid) -### ユーザーアクション疑似クラス +> **メモ:** 擬似クラスや要素の前に要素セレクターを書かずに書くことは有効です。この例では、 `:first-child` と書けば、段落の最初の子要素だけでなく、 `
` 要素の最初の子要素であるすべての要素に適用されます。 `:first-child` は `*:first-child` と等価だからです。しかし、通常は複数の要素を制御したいので、より詳細度を上げる必要があります。 + +### ユーザー操作擬似クラス -一部の疑似クラスは、ユーザーが何らかの方法でドキュメントを操作したときにのみ適用されます。これらの**ユーザーアクションの**疑似クラスは、**動的疑似クラス**と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。 +一部の擬似クラスは、ユーザーが何らかの方法で文書を操作したときにのみ適用されます。これらの**ユーザー操作の**擬似クラスは、**動的擬似クラス**と呼ばれることもあり、ユーザーが要素を操作したときに、要素にクラスが追加されたかのように動作します。例は次のとおりです。 -- [`:hover`](/ja/docs/Web/CSS/:hover) — 上記の通り; これは、ユーザーが要素（通常はリンク）の上にポインターを移動した場合にのみ適用されます。 +- [`:hover`](/ja/docs/Web/CSS/:hover) — 前述の通りです。これは、ユーザーが要素（通常はリンク）の上にポインターを載せた場合にのみ適用されます。 - [`:focus`](/ja/docs/Web/CSS/:focus) — ユーザーがキーボードコントロールを使用して要素にフォーカスした場合にのみ適用されます。 {{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}} -## 疑似要素とは何ですか？ +## 擬似要素とは何か -疑似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しい HTML 要素をマークアップに追加したかのように動作します。疑似要素はダブルコロンで始まり `::` ます。 +擬似要素は同様に動作しますが、既存の要素にクラスを適用するのではなく、まったく新しい HTML 要素をマークアップに追加したかのように動作します。 -``` -::疑似要素名 -``` +擬似要素はダブルコロン `::` で始まります。擬似要素の例は `::before` です。 -> **メモ:** 一部の初期の疑似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザーは、後方互換性のためにシングルまたはダブルコロン構文で初期の疑似要素をサポートしています。 +> **メモ:** 一部の初期の擬似要素では、単一のコロン構文が使用されていたため、コードまたは例でこれを見ることがあるでしょう。最新のブラウザーは、後方互換性のためにシングルまたはダブルコロン構文で初期の擬似要素に対応しています。 たとえば、段落の最初の行を選択する場合は、それを `` 要素にラップして要素セレクターを使用できます。ただし、ラップした単語の数が親要素の幅よりも長いまたは短い場合は、失敗します。1 行にいくつの単語が収まるかわからない傾向があるため（画面の幅やフォントサイズが変わると、単語数が変わるため）、HTML を追加してこれを確実に行うことは不可能です。 @@ -62,13 +79,13 @@ slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements {{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}} -それはまるで最初のフォーマットされた行を `` で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。 +それはまるで最初の整形された行を `` で魔法のように包み、行の長さが変更されるたびに更新されるかのように動作します。 これにより、両方の段落の最初の行が選択されていることがわかります。 -## 疑似クラスと疑似要素を組み合わせる +## 擬似クラスと擬似要素を組み合わせる -最初の段落の最初の行を太字にしたい場合は `:first-child` 、 `::first-line` セレクターとセレクターをチェーンすることができます。前のライブ例を編集して、次の CSS を使用するようにしてください。\
要素内にある最初の `

` 要素の最初の行を選択したいと言っています。 +最初の段落の最初の行を太字にしたい場合は、 `:first-child` および `::first-line` セレクターを連結することができます。前のライブ例を編集して、次の CSS を使用するようにしてください。 `

` 要素内にある最初の `

` 要素の最初の行を選択したいということです。 ```css article p:first-child::first-line { @@ -77,98 +94,39 @@ article p:first-child::first-line { } ``` -## :: before および:: after を使用したコンテンツの生成 +## ::before および ::after を使用したコンテンツの生成 -CSS を使用してコンテンツをドキュメントに挿入するための [`content`](/ja/docs/Web/CSS/content) プロパティと共に使用される特別な疑似要素がいくつかあります。 +CSS を使用してコンテンツを文書に挿入するための [`content`](/ja/docs/Web/CSS/content) プロパティと共に使用される特別な擬似要素がいくつかあります。 -以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 `::before` 疑似要素を `::after` に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。 +以下のライブ例のように、これらを使用してテキストの文字列を挿入できます。{{cssxref("content")}} プロパティのテキスト値を変更してみて、出力でそれを確認してください。 `::before` 擬似要素を `::after` に変更して、要素の最初ではなく最後に挿入されたテキストを表示することもできます。 {{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}} -CSS からテキストの文字列を挿入することは、実際には Web で頻繁に行うことではありません。そのテキストは一部のスクリーンリーダーにはアクセスできず、将来誰かが見つけて編集するのが難しい場合があるためです。 +CSS からテキストを挿入することは、ウェブ上で実に多く使用することではありません。なぜなら、そのテキストはスクリーンリーダーによってはアクセスできず、将来誰かが見つけて編集するのが難しくなるからです。 -これらの疑似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。 +これらの擬似要素のより有効な使用法は、アイコンを挿入することです。たとえば、以下の例で追加された小さな矢印は、スクリーンリーダーで読みたくない視覚的なインジケーターです。 {{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}} -これらの疑似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。 +これらの擬似要素は、空の文字列を挿入するためにも頻繁に使用され、ページ上の要素と同じようにスタイルを設定できます。 -次の例では、 `::before` 疑似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを `display: block` に設定しました。次に、CSS を使用して、他の要素と同じようにスタイルを設定します。CSS をいじって、CSS の外観と動作を変更できます。 +次の例では、 `::before` 擬似要素を使用して空の文字列を追加しています。幅と高さでスタイルを設定できるように、これを `display: block` に設定しました。次に、CSS を使用して、他の要素と同じようにスタイルを設定します。CSS をいじって、CSS の外観と動作を変更できます。 {{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} -`content` プロパティとともに `::before` と `::after` 擬似要素を使用することは、CSS では「生成されたコンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、[CSS Arrow Please Please](http://www.cssarrowplease.com/)のサイトで、[CSS で矢印](http://www.cssarrowplease.com/)を生成するのに役立ちます。矢印を作成するときに CSS を見ると、{{cssxref("::before")}} および {{cssxref("::after")}} 疑似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、ドキュメントに何が追加されているかを確認してください。 - -## 参照セクション - -疑似クラスと疑似要素は多数あり、参照するリストがあると便利です。以下に、MDN のリファレンスページへのリンクとともに、それらをリストした表を示します。これをリファレンスとして使用して、ターゲットにできるものの種類を確認します。 - -### 疑似クラス - -| セレクタ | 説明 | -| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{cssxref(":active")}} | ユーザーが要素をアクティブ化（たとえばクリック）すると一致します。 | -| {{cssxref(":any-link")}} | リンクの `:link` と `:visited` 状態の両方に一致します。 | -| {{cssxref(":blank")}} | 入力値が空の[`` 要素に](/ja/docs/Web/HTML/Element/input)一致します。 | -| {{cssxref(":checked")}} | 選択状態のラジオボタンまたはチェックボックスに一致します。 | -| {{cssxref(":current")}} | 現在表示されている要素または要素の祖先と一致します。 | -| {{cssxref(":default")}} | 類似要素のセットの中でデフォルトである 1 つ以上の UI 要素に一致します。 | -| {{cssxref(":dir")}} | 方向性（HTML [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) 属性または CSS [`direction`](/ja/docs/Web/CSS/direction) プロパティの値）に基づいて要素を選択します。 | -| {{cssxref(":disabled")}} | 無効な状態のユーザーインターフェイス要素に一致します。 | -| {{cssxref(":empty")}} | オプションの空白以外の子を持たない要素に一致します。 | -| {{cssxref(":enabled")}} | 有効な状態のユーザーインターフェイス要素に一致します。 | -| {{cssxref(":first")}} | [ページ媒体](/ja/docs/Web/CSS/Paged_Media)では、最初のページと一致します。 | -| {{cssxref(":first-child")}} | 兄弟の中で最初にある要素に一致します。 | -| {{cssxref(":first-of-type")}} | 兄弟の中で最初にある特定のタイプの要素に一致します。 | -| {{cssxref(":focus")}} | 要素にフォーカスがあるときに一致します。 | -| {{cssxref(":focus-visible")}} | 要素にフォーカスがあり、そのフォーカスがユーザーに表示される場合に一致します。 | -| {{cssxref(":focus-within")}} | フォーカスを持つ要素と、フォーカスを持つ子孫を持つ要素に一致します。 | -| {{cssxref(":future")}} | 現在の要素の後の要素に一致します。 | -| {{cssxref(":hover")}} | ユーザーが要素にカーソルを合わせると一致します。 | -| {{cssxref(":indeterminate")}} | 値が不確定な状態の UI 要素、通常は[チェックボックスに](/ja/docs/Web/HTML/Element/input/checkbox)一致し[ます](/ja/docs/Web/HTML/Element/input/checkbox)。 | -| {{cssxref(":in-range")}} | 範囲制限を持つ要素で、要素の値が範囲内にある場合にマッチします。 | -| {{cssxref(":invalid")}} | 無効な状態の `` のような要素に一致します。 | -| {{cssxref(":lang")}} | 言語（HTML [lang](/ja/docs/Web/HTML/Global_attributes/lang)属性の値）に基づいて要素を[照合し](/ja/docs/Web/HTML/Global_attributes/lang)ます。 | -| {{cssxref(":last-child")}} | 兄弟の中で最後にある要素に一致します。 | -| {{cssxref(":last-of-type")}} | 兄弟の中で最後にある特定のタイプの要素に一致します。 | -| {{cssxref(":left")}} | [ページ媒体](/ja/docs/Web/CSS/CSS_Pages)では、左側のページと一致します。 | -| {{cssxref(":link")}} | 未訪問のリンクに一致します。 | -| {{cssxref(":local-link")}} | 現在のドキュメントと同じサイトにあるページを指すリンクに一致します。 | -| {{cssxref(":is", ":is()")}} | 渡されたセレクターリスト内の任意のセレクターに一致します。 | -| {{cssxref(":not")}} | このセレクターに値として渡されるセレクターで一致しないものと一致します。 | -| {{cssxref(":nth-child")}} | 兄弟のリストの要素に一致します — 兄弟は*an+b*の形式の式で一致します（たとえば、2n + 1 は 1、3、5、7 番目などの要素に一致します。すべてが奇数です）。 | -| {{cssxref(":nth-of-type")}} | 特定のタイプの兄弟（ `

` 要素など）のリストの要素に一致します — 兄弟は*、an+b*という形式の式で一致します（たとえば、2n + 1 は、その要素のタイプの 1、3、5 、7 番目などに一致します。すべて奇数です。） | -| {{cssxref(":nth-last-child")}} | 兄弟のリストの要素を末尾から逆に数えて一致させます。兄弟は*an+b*の形式の式で一致します（たとえば、2n + 1 はシーケンスの最後の要素、次にその 2 つ前の要素、次にその 2 つ前の要素などと一致します。最後から数えてすべての奇数の要素。） | -| {{cssxref(":nth-last-of-type")}} | 特定のタイプの兄弟のリスト（ `

` 要素など）の要素を最後から逆に数えて一致させます。兄弟は*、an+b*という形式の式で一致します（たとえば、2n + 1 は、シーケンス内のそのタイプの最後の要素、次にその 2 つ前の要素、次にその 2 つ前の要素などと一致します。最後から数えてすべての奇数の要素。） | -| {{cssxref(":only-child")}} | 兄弟がない要素に一致します。 | -| {{cssxref(":only-of-type")}} | 兄弟間でそのタイプの唯一の要素である要素に一致します。 | -| {{cssxref(":optional")}} | 不要なフォーム要素に一致します。 | -| {{cssxref(":out-of-range")}} | 範囲制限を持つ要素で、要素の値が範囲外にある場合にマッチします。 | -| {{cssxref(":past")}} | 現在の要素より前の要素に一致します。 | -| {{cssxref(":placeholder-shown")}} | プレースホルダーテキストを表示している input 要素に一致します。 | -| {{cssxref(":playing")}} | 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「再生中」のときに一致します。 | -| {{cssxref(":paused")}} | 「再生」または「一時停止」できるオーディオ、ビデオ、または類似のリソースを表す要素が「一時停止」されている場合に一致します。 | -| {{cssxref(":read-only")}} | ユーザーが変更できない要素と一致します。 | -| {{cssxref(":read-write")}} | ユーザーが変更可能な要素と一致します。 | -| {{cssxref(":required")}} | 必要なフォーム要素に一致します。 | -| {{cssxref(":right")}} | [ページ媒体](/ja/docs/Web/CSS/CSS_Pages)では、右側のページに一致します。 | -| {{cssxref(":root")}} | ドキュメントのルートである要素に一致します。 | -| {{cssxref(":scope")}} | スコープ要素であるすべての要素に一致します。 | -| {{cssxref(":valid")}} | `` 要素などで要素が有効な状態のときに一致します。 | -| {{cssxref(":target")}} | 現在の URL のターゲットである場合（つまり、現在の[URL フラグメントに](https://en.wikipedia.org/wiki/Fragment_identifier)一致する ID を持つ場合）、要素に一致し[ます](https://en.wikipedia.org/wiki/Fragment_identifier)。 | -| {{cssxref(":visited")}} | 訪問したリンクに一致します。 | - -### 疑似要素 - -| セレクタ | 説明 | -| ------------------------------- | -------------------------------------------------------------------------------------- | -| {{cssxref("::after")}} | 元の要素の実際のコンテンツの後に現れるスタイル可能な要素と一致します。 | -| {{cssxref("::before")}} | 元の要素の実際のコンテンツの前に現れるスタイル可能な要素と一致します。 | -| {{cssxref("::first-letter")}} | 要素の最初の文字と一致します。 | -| {{cssxref("::first-line")}} | 含まれている要素の最初の行と一致します。 | -| {{cssxref("::grammar-error")}} | ブラウザーによってフラグが立てられた文法エラーを含むドキュメントの一部に一致します。 | -| {{cssxref("::marker")}} | 通常は箇条書きまたは番号が含まれているリストアイテムのマーカーボックスに一致します。 | -| {{cssxref("::selection")}} | 選択されたドキュメントの部分に一致します。 | -| {{cssxref("::spelling-error")}} | ブラウザーによってフラグが付けられた、スペルミスを含むドキュメントの一部に一致します。 | +`::before` と `::after` 擬似要素を `content` プロパティとともに使用することは、CSS では「生成コンテンツ」と呼ばれ、この手法がさまざまなタスクに使用されているのをよく目にします。良い例は、 [CSS Arrow Please](http://www.cssarrowplease.com/) のサイトで、 [CSS で矢印](http://www.cssarrowplease.com/)を生成するのに役立てています。矢印を作成するときの CSS を見ると、 {{cssxref("::before")}} および {{cssxref("::after")}} 擬似要素が使用されていることがわかります。これらのセレクターが表示されたら、{{cssxref("content")}} プロパティを見て、文書に何が追加されているかを確認してください。 + +## まとめ + +この記事では、特殊な種類のセレクターである 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")}} From 73ce9bf18913b087573e468a9b5885bc08b1c094 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 25 Oct 2023 01:32:27 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Pseudo-classes=5Fand=5Fpseudo-elements=20?= =?UTF-8?q?=E3=81=B8=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/learn/css/building_blocks/selectors/index.md | 4 ++-- files/ja/learn/css/building_blocks/values_and_units/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/ja/learn/css/building_blocks/selectors/index.md b/files/ja/learn/css/building_blocks/selectors/index.md index 592b589566e9a6..cbd7db07f36149 100644 --- a/files/ja/learn/css/building_blocks/selectors/index.md +++ b/files/ja/learn/css/building_blocks/selectors/index.md @@ -167,8 +167,8 @@ article > p { | [クラスセレクター](/ja/docs/Web/CSS/Class_selectors) | `.box { }` | [クラスセレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors) | | [ID セレクター](/ja/docs/Web/CSS/ID_selectors) | `#unique { }` | [ID セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors) | | [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) | `a[title] { }` | [属性によるセレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) | -| [擬似クラスセレクター](/ja/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [疑似クラス](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#What_is_a_pseudo-class) | -| [疑似要素セレクター](/ja/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [疑似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#What_is_a_pseudo-element) | +| [擬似クラスセレクター](/ja/docs/Web/CSS/Pseudo-classes) | `p:first-child { }` | [疑似クラス](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#擬似クラスとは何か) | +| [疑似要素セレクター](/ja/docs/Web/CSS/Pseudo-elements) | `p::first-line { }` | [疑似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#擬似要素とは何か) | | [子孫結合子](/ja/docs/Web/CSS/Descendant_combinator) | `article p` | [子孫結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector) | | [子結合子](/ja/docs/Web/CSS/Child_combinator) | `article > p` | [子結合子](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator) | | [隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p` | [隣接兄弟](/ja/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling) | diff --git a/files/ja/learn/css/building_blocks/values_and_units/index.md b/files/ja/learn/css/building_blocks/values_and_units/index.md index ab33a1fdbc3343..0cc350d9d0b64a 100644 --- a/files/ja/learn/css/building_blocks/values_and_units/index.md +++ b/files/ja/learn/css/building_blocks/values_and_units/index.md @@ -288,7 +288,7 @@ RGB に RGBA があるように、HSL には同様な HSLA があり、アルフ 上記の例を通じて、キーワードが値として使われる場所を見てきました (例えば、`` キーワードの例として `red`, `black`, `rebeccapurple`, `goldenrod`)。このキーワードをより正確に述べると、CSS が理解できる特別な値の _識別子_ です。このためそれは引用符で囲まれておらず、文字列として扱われません。 -CSS で文字列が使われる場所もあります、例えば、[生成されたコンテンツを指定するとき](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#before%E3%81%8A%E3%82%88%E3%81%B3_after%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%AE%E7%94%9F%E6%88%90)です。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。 +CSS で文字列が使われる場所もあります、例えば、[生成されたコンテンツを指定するとき](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#before_および_after_を使用したコンテンツの生成)です。この場合、値は文字列を示すようクォートで囲まれます。下記の例ではクォートで囲まれていない color キーワードと生成されたコンテンツ文字列を一緒に使っています。 {{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}}