From 8f1b010351afa9197c5448c62df7d67db28f27fb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 14:50:49 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/pseudo-elements/index.md | 219 ++++++++++++++++-------------- 1 file changed, 116 insertions(+), 103 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/pseudo-elements/index.md b/files/ja/web/css/pseudo-elements/index.md index d46d32bce6..e4f2a8b611 100644 --- a/files/ja/web/css/pseudo-elements/index.md +++ b/files/ja/web/css/pseudo-elements/index.md @@ -1,125 +1,138 @@ --- -title: 擬似要素 (Pseudo-elements) +title: 擬似要素 slug: Web/CSS/Pseudo-elements tags: - CSS - - Guide - - Overview - - Pseudo-element - - Reference - - Selectors + - ガイド + - 概要 + - 擬似要素 + - リファレンス + - セレクター translation_of: Web/CSS/Pseudo-elements --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

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

構文

+## 構文 -
selector::pseudo-element {
+```css
+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
+擬似要素は 1 つのセレクターに 1 つだけ使用することができます。文内の単純セレクターの後に置く必要があります。 + +> **Note:** ルールとして、単一コロン (`:`) の代わりに二重コロン (`::`) を使用してください。これで擬似要素と擬似クラスを区別します。但し、この区別は W3C の古いバージョンの仕様書には存在しなかったため、多くのブラウザーは元々の擬似要素に対して両方の構文に対応しています。 + +## 索引 + +CSS の一連の仕様で定義される擬似要素には、以下のようなものがあります。 + +A + +- {{CSSxRef("::after", "::after (:after)")}} + +B + +- {{CSSxRef("::backdrop")}} {{Experimental_Inline}} +- {{CSSxRef("::before", "::before (:before)")}} + +C + +- {{CSSxRef("::cue")}} +- {{CSSxRef("::cue-region")}} + +F + +- {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}} +- {{CSSxRef("::first-line", "::first-line (:first-line)")}} +- {{CSSxRef("::file-selector-button")}} + +G + +- {{CSSxRef("::grammar-error")}} {{Experimental_Inline}} + +M + +- {{CSSxRef("::marker")}} {{Experimental_Inline}} + +P + +- {{CSSxRef("::part", "::part()")}} {{Experimental_Inline}} +- {{CSSxRef("::placeholder")}} {{Experimental_Inline}} + +S + +- {{CSSxRef("::selection")}} +- {{CSSxRef("::slotted", "::slotted()")}} +- {{CSSxRef("::spelling-error")}} {{Experimental_Inline}} + +T + +- {{CSSxRef("::target-text")}} {{Experimental_Inline}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------- | ----------------- | ---------------------------- | +| {{SpecName("CSS1")}} | {{Spec2("CSS1")}} | 擬似クラスと擬似要素を定義。 | -

仕様書

+## ブラウザーの互換性 - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS1")}}{{Spec2("CSS1")}}擬似クラスと擬似要素を定義した。
ブラウザー対応開始バージョン対応内容
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
-

関連情報

+## 関連情報 - +- [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes) -- cgit v1.2.3-54-g00ecf