From b8cc946f62c0f13bdd29675c20bfeffcd6e8bbac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 13:25:31 +0900 Subject: 擬似クラス/擬似要素の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/pseudo-classes/index.html | 167 ---------------------------- files/ja/web/css/pseudo-classes/index.md | 167 ++++++++++++++++++++++++++++ files/ja/web/css/pseudo-elements/index.html | 125 --------------------- files/ja/web/css/pseudo-elements/index.md | 125 +++++++++++++++++++++ 4 files changed, 292 insertions(+), 292 deletions(-) delete mode 100644 files/ja/web/css/pseudo-classes/index.html create mode 100644 files/ja/web/css/pseudo-classes/index.md delete mode 100644 files/ja/web/css/pseudo-elements/index.html create mode 100644 files/ja/web/css/pseudo-elements/index.md diff --git a/files/ja/web/css/pseudo-classes/index.html b/files/ja/web/css/pseudo-classes/index.html deleted file mode 100644 index 2be624f4d8..0000000000 --- a/files/ja/web/css/pseudo-classes/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: 擬似クラス -slug: Web/CSS/Pseudo-classes -tags: - - CSS - - Reference - - セレクター - - 擬似クラス - - 概要 - - 疑似クラス -translation_of: Web/CSS/Pseudo-classes ---- -
{{CSSRef}}
- -

CSS の擬似クラス (Pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。

- -
/* ユーザーのポインターが当たっているすべてのボタン */
-button:hover {
-  color: blue;
-}
- -

擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。

- -
-

メモ: 擬似要素は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の特定の部分にスタイルを適用するために使用します。

-
- -

構文

- -
selector:pseudo-class {
-  property: value;
-}
-
- -

通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。

- -

標準擬似クラスの索引

- -
- -
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}:fullscreen を定義。
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}いつ特定のセレクターが HTML 要素に一致するのかを定義。
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}:any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where() を定義
- :empty の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。
- {{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}正規の (WHATWG) HTML 仕様書から関連する節を複写。
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write を定義。ただし意味論的な意味は定義していません。
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}:target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :not() を定義。
- :enabled, :disabled, :checked, :indeterminate の構文を定義。ただし意味論的な意味は定義していません。
- {{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}:lang(), :first-child, :hover, :focus を定義。
- {{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}:link, :visited, :active を定義。ただし意味論的な意味は定義していません。
- -

関連情報

- - diff --git a/files/ja/web/css/pseudo-classes/index.md b/files/ja/web/css/pseudo-classes/index.md new file mode 100644 index 0000000000..2be624f4d8 --- /dev/null +++ b/files/ja/web/css/pseudo-classes/index.md @@ -0,0 +1,167 @@ +--- +title: 擬似クラス +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Reference + - セレクター + - 擬似クラス + - 概要 + - 疑似クラス +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

CSS の擬似クラス (Pseudo-classes) は、セレクターに付加するキーワードであり、選択された要素に対して特定の状態を指定します。例えば {{CSSxRef(":hover")}} 擬似クラスで、ユーザーのポインターが当たったときにボタンの色を変更することができます。

+ +
/* ユーザーのポインターが当たっているすべてのボタン */
+button:hover {
+  color: blue;
+}
+ +

擬似クラスにより、文書ツリーのコンテンツに関するものだけでなく、閲覧履歴 (例えば {{CSSxRef(":visited")}})、コンテンツの状態 (例えばフォーム要素における {{CSSxRef(":checked")}})、マウスポインタの位置 (例えばマウスポインタが要素上にあるかを知ることができる {{CSSxRef(":hover")}}) といった外的要因との関係についてスタイルを適用することができるようになります。

+ +
+

メモ: 擬似要素は擬似クラスとは対照的に、 {{CSSxRef("pseudo-elements")}} は要素の特定の部分にスタイルを適用するために使用します。

+
+ +

構文

+ +
selector:pseudo-class {
+  property: value;
+}
+
+ +

通常のクラスと同様に、必要であれば1つのセレクターに複数の擬似クラスを並べることができます。

+ +

標準擬似クラスの索引

+ +
+ +
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}:fullscreen を定義。
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}いつ特定のセレクターが HTML 要素に一致するのかを定義。
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}:any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where() を定義
+ :empty の動作を {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}} のように変更。
+ {{SpecName("CSS3 Selectors")}} および {{SpecName("HTML5 W3C")}} で定義された擬似クラスについて、大きな変更はなし (ただし意味論的な意味は引き継いでいません)。
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}正規の (WHATWG) HTML 仕様書から関連する節を複写。
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write を定義。ただし意味論的な意味は定義していません。
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}:target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :not() を定義。
+ :enabled, :disabled, :checked, :indeterminate の構文を定義。ただし意味論的な意味は定義していません。
+ {{SpecName('CSS2.1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}:lang(), :first-child, :hover, :focus を定義。
+ {{SpecName('CSS1')}} で定義された擬似クラスについて、大きな変更はなし。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}:link, :visited, :active を定義。ただし意味論的な意味は定義していません。
+ +

関連情報

+ + diff --git a/files/ja/web/css/pseudo-elements/index.html b/files/ja/web/css/pseudo-elements/index.html deleted file mode 100644 index d46d32bce6..0000000000 --- a/files/ja/web/css/pseudo-elements/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: 擬似要素 (Pseudo-elements) -slug: Web/CSS/Pseudo-elements -tags: - - CSS - - Guide - - Overview - - Pseudo-element - - Reference - - Selectors -translation_of: Web/CSS/Pseudo-elements ---- -
{{CSSRef}}
- -

CSS の 擬似要素 (Pseudo-elements) はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。

- -
/* 各 <p> 要素の最初の行です。 */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
- -
-

注: 擬似要素とは対照的に、{{CSSxRef("pseudo-classes", "擬似クラス")}}は要素の状態に基づいてスタイル付けを行うことができます。

-
- -

構文

- -
selector::pseudo-element {
-  property: value;
-}
- -

擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。

- -
-

注: 規則として、単一コロン (:) の代わりに二重コロン (::) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の文法に対応しています。

-
- -

標準の擬似要素の索引

- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ブラウザー対応開始バージョン対応内容
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS1")}}{{Spec2("CSS1")}}擬似クラスと擬似要素を定義した。
- -

関連情報

- - diff --git a/files/ja/web/css/pseudo-elements/index.md b/files/ja/web/css/pseudo-elements/index.md new file mode 100644 index 0000000000..d46d32bce6 --- /dev/null +++ b/files/ja/web/css/pseudo-elements/index.md @@ -0,0 +1,125 @@ +--- +title: 擬似要素 (Pseudo-elements) +slug: Web/CSS/Pseudo-elements +tags: + - CSS + - Guide + - Overview + - Pseudo-element + - Reference + - Selectors +translation_of: Web/CSS/Pseudo-elements +--- +
{{CSSRef}}
+ +

CSS の 擬似要素 (Pseudo-elements) はセレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。例えば {{CSSxRef("::first-line")}} 擬似要素は、段落の最初の行のフォントを変更するために使用することができます。

+ +
/* 各 <p> 要素の最初の行です。 */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

注: 擬似要素とは対照的に、{{CSSxRef("pseudo-classes", "擬似クラス")}}は要素の状態に基づいてスタイル付けを行うことができます。

+
+ +

構文

+ +
selector::pseudo-element {
+  property: value;
+}
+ +

擬似要素は1つのセレクターに1つだけ使用することができます。文内の単純セレクターの後に置く必要があります。

+ +
+

注: 規則として、単一コロン (:) の代わりに二重コロン (::) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の文法に対応しています。

+
+ +

標準の擬似要素の索引

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザー対応開始バージョン対応内容
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS1")}}{{Spec2("CSS1")}}擬似クラスと擬似要素を定義した。
+ +

関連情報

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