From a70e79de3a392914ce5aa790ce56295faed73141 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 02:06:45 +0900 Subject: 擬似要素の文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/_doublecolon_-moz-color-swatch/index.html | 62 ------ .../css/_doublecolon_-moz-color-swatch/index.md | 62 ++++++ .../css/_doublecolon_-moz-progress-bar/index.html | 60 ------ .../css/_doublecolon_-moz-progress-bar/index.md | 60 ++++++ .../css/_doublecolon_-moz-range-track/index.html | 74 ------- .../web/css/_doublecolon_-moz-range-track/index.md | 74 +++++++ .../_doublecolon_-webkit-progress-value/index.html | 66 ------ .../_doublecolon_-webkit-progress-value/index.md | 66 ++++++ .../index.html | 45 ---- .../index.md | 45 ++++ .../_doublecolon_-webkit-slider-thumb/index.html | 42 ---- .../css/_doublecolon_-webkit-slider-thumb/index.md | 42 ++++ files/ja/web/css/_doublecolon_after/index.html | 175 ---------------- files/ja/web/css/_doublecolon_after/index.md | 175 ++++++++++++++++ files/ja/web/css/_doublecolon_backdrop/index.html | 80 ------- files/ja/web/css/_doublecolon_backdrop/index.md | 80 +++++++ files/ja/web/css/_doublecolon_before/index.html | 229 --------------------- files/ja/web/css/_doublecolon_before/index.md | 229 +++++++++++++++++++++ files/ja/web/css/_doublecolon_cue/index.html | 91 -------- files/ja/web/css/_doublecolon_cue/index.md | 91 ++++++++ .../web/css/_doublecolon_first-letter/index.html | 164 --------------- .../ja/web/css/_doublecolon_first-letter/index.md | 164 +++++++++++++++ .../ja/web/css/_doublecolon_first-line/index.html | 119 ----------- files/ja/web/css/_doublecolon_first-line/index.md | 119 +++++++++++ .../web/css/_doublecolon_grammar-error/index.html | 85 -------- .../ja/web/css/_doublecolon_grammar-error/index.md | 85 ++++++++ files/ja/web/css/_doublecolon_marker/index.html | 100 --------- files/ja/web/css/_doublecolon_marker/index.md | 100 +++++++++ files/ja/web/css/_doublecolon_part/index.html | 126 ------------ files/ja/web/css/_doublecolon_part/index.md | 126 ++++++++++++ files/ja/web/css/_doublecolon_selection/index.html | 131 ------------ files/ja/web/css/_doublecolon_selection/index.md | 131 ++++++++++++ files/ja/web/css/_doublecolon_slotted/index.html | 111 ---------- files/ja/web/css/_doublecolon_slotted/index.md | 111 ++++++++++ .../web/css/_doublecolon_spelling-error/index.html | 70 ------- .../web/css/_doublecolon_spelling-error/index.md | 70 +++++++ 36 files changed, 1830 insertions(+), 1830 deletions(-) delete mode 100644 files/ja/web/css/_doublecolon_-moz-color-swatch/index.html create mode 100644 files/ja/web/css/_doublecolon_-moz-color-swatch/index.md delete mode 100644 files/ja/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/ja/web/css/_doublecolon_-moz-progress-bar/index.md delete mode 100644 files/ja/web/css/_doublecolon_-moz-range-track/index.html create mode 100644 files/ja/web/css/_doublecolon_-moz-range-track/index.md delete mode 100644 files/ja/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/ja/web/css/_doublecolon_-webkit-progress-value/index.md delete mode 100644 files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.md delete mode 100644 files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.md delete mode 100644 files/ja/web/css/_doublecolon_after/index.html create mode 100644 files/ja/web/css/_doublecolon_after/index.md delete mode 100644 files/ja/web/css/_doublecolon_backdrop/index.html create mode 100644 files/ja/web/css/_doublecolon_backdrop/index.md delete mode 100644 files/ja/web/css/_doublecolon_before/index.html create mode 100644 files/ja/web/css/_doublecolon_before/index.md delete mode 100644 files/ja/web/css/_doublecolon_cue/index.html create mode 100644 files/ja/web/css/_doublecolon_cue/index.md delete mode 100644 files/ja/web/css/_doublecolon_first-letter/index.html create mode 100644 files/ja/web/css/_doublecolon_first-letter/index.md delete mode 100644 files/ja/web/css/_doublecolon_first-line/index.html create mode 100644 files/ja/web/css/_doublecolon_first-line/index.md delete mode 100644 files/ja/web/css/_doublecolon_grammar-error/index.html create mode 100644 files/ja/web/css/_doublecolon_grammar-error/index.md delete mode 100644 files/ja/web/css/_doublecolon_marker/index.html create mode 100644 files/ja/web/css/_doublecolon_marker/index.md delete mode 100644 files/ja/web/css/_doublecolon_part/index.html create mode 100644 files/ja/web/css/_doublecolon_part/index.md delete mode 100644 files/ja/web/css/_doublecolon_selection/index.html create mode 100644 files/ja/web/css/_doublecolon_selection/index.md delete mode 100644 files/ja/web/css/_doublecolon_slotted/index.html create mode 100644 files/ja/web/css/_doublecolon_slotted/index.md delete mode 100644 files/ja/web/css/_doublecolon_spelling-error/index.html create mode 100644 files/ja/web/css/_doublecolon_spelling-error/index.md (limited to 'files') diff --git a/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html b/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html deleted file mode 100644 index 4fcfc75ade..0000000000 --- a/files/ja/web/css/_doublecolon_-moz-color-swatch/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: '::-moz-color-swatch' -slug: 'Web/CSS/::-moz-color-swatch' -tags: - - CSS - - 'CSS:Mozilla Extensions' - - 'CSS:Mozilla 拡張' - - Non-standard - - Pseudo-element - - Reference - - 標準外 - - 疑似要素 -translation_of: 'Web/CSS/::-moz-color-swatch' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

::-moz-color-swatch は CSS の疑似要素であり、 Mozilla 拡張で、 {{HTMLElement("input")}} の type="color" で選択された色を表します。

- -
-

メモ: ::-moz-color-swatch を <input type="color"> 以外に何も一致せず、何も効果がありません。

-
- -

構文

- -{{csssyntax}} - -

例

- -

HTML

- -
<input type="color" value="#de2020" />
-
- -

CSS

- -
input[type=color]::-moz-color-swatch {
-  border-radius: 10px;
-  border-style: none;
-}
-
- -

結果

- -

{{EmbedLiveSample("Example", 300, 50)}}

- -

仕様書

- -

どの仕様書でも定義されていません。これは Gecko に固有の専用の疑似要素です。

- -

ブラウザーの互換性

- -

{{Compat("css.selectors.-moz-color-swatch")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_-moz-color-swatch/index.md b/files/ja/web/css/_doublecolon_-moz-color-swatch/index.md new file mode 100644 index 0000000000..4fcfc75ade --- /dev/null +++ b/files/ja/web/css/_doublecolon_-moz-color-swatch/index.md @@ -0,0 +1,62 @@ +--- +title: '::-moz-color-swatch' +slug: 'Web/CSS/::-moz-color-swatch' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - 'CSS:Mozilla 拡張' + - Non-standard + - Pseudo-element + - Reference + - 標準外 + - 疑似要素 +translation_of: 'Web/CSS/::-moz-color-swatch' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-moz-color-swatch は CSS の疑似要素であり、 Mozilla 拡張で、 {{HTMLElement("input")}} の type="color" で選択された色を表します。

+ +
+

メモ: ::-moz-color-swatch を <input type="color"> 以外に何も一致せず、何も効果がありません。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<input type="color" value="#de2020" />
+
+ +

CSS

+ +
input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

仕様書

+ +

どの仕様書でも定義されていません。これは Gecko に固有の専用の疑似要素です。

+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.-moz-color-swatch")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html deleted file mode 100644 index f683b31da8..0000000000 --- a/files/ja/web/css/_doublecolon_-moz-progress-bar/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: '::-moz-progress-bar' -slug: 'Web/CSS/::-moz-progress-bar' -tags: - - CSS - - 'CSS:Mozilla Extensions' - - 'CSS:Mozilla 拡張' - - NeedsCompatTable - - Non-standard - - Pseudo-element - - Reference - - 擬似要素 - - 標準外 -translation_of: 'Web/CSS/::-moz-progress-bar' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

::-moz-progress-bar は CSS の擬似要素で Mozilla 拡張であり、 {{HTMLElement("progress")}} 要素の中のプログレスバーを表します。 (バーは進捗した量を表します。)

- -

{{HTMLElement("progress")}} のまだ終了していない部分を Mozilla で選択したい場合は、 {{HTMLElement("progress")}} で直接選択してください。

- -

構文

- -{{csssyntax}} - -

例

- -

HTML

- -
<progress value="30" max="100">30%</progress>
-<progress max="100">Indeterminate</progress>
- -

CSS

- -
::-moz-progress-bar {
-  background-color: red;
-}
-
-/* 不確実なバーは強制的に幅をゼロにする */
-:indeterminate::-moz-progress-bar {
-  width: 0;
-}
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

上記の最初のバーは次のようになります。

- -

Custom styled progress bar

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_-moz-progress-bar/index.md b/files/ja/web/css/_doublecolon_-moz-progress-bar/index.md new file mode 100644 index 0000000000..f683b31da8 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-moz-progress-bar/index.md @@ -0,0 +1,60 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - 'CSS:Mozilla 拡張' + - NeedsCompatTable + - Non-standard + - Pseudo-element + - Reference + - 擬似要素 + - 標準外 +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-moz-progress-bar は CSS の擬似要素で Mozilla 拡張であり、 {{HTMLElement("progress")}} 要素の中のプログレスバーを表します。 (バーは進捗した量を表します。)

+ +

{{HTMLElement("progress")}} のまだ終了していない部分を Mozilla で選択したい場合は、 {{HTMLElement("progress")}} で直接選択してください。

+ +

構文

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<progress value="30" max="100">30%</progress>
+<progress max="100">Indeterminate</progress>
+ +

CSS

+ +
::-moz-progress-bar {
+  background-color: red;
+}
+
+/* 不確実なバーは強制的に幅をゼロにする */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

上記の最初のバーは次のようになります。

+ +

Custom styled progress bar

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_-moz-range-track/index.html b/files/ja/web/css/_doublecolon_-moz-range-track/index.html deleted file mode 100644 index 3675cfc890..0000000000 --- a/files/ja/web/css/_doublecolon_-moz-range-track/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: '::-moz-range-track' -slug: 'Web/CSS/::-moz-range-track' -tags: - - CSS - - 'CSS:Mozilla Extensions' - - Non-standard - - Pseudo-element - - Reference - - Selector -translation_of: 'Web/CSS/::-moz-range-track' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

::-moz-range-track CSS 疑似要素は、 type="range" の {{HTMLElement("input")}} でインジケーターがスライドする track (例, 溝) を表す Mozilla 拡張機能 です。

- -
-

Note: ::-moz-range-track を <input type="range"> 以外で使用すると、何にも一致せず、効果がありません。

-
- -

構文

- -{{csssyntax}} - -

例

- -

HTML

- -
<input type="range" min="0" max="100" step="5" value="50"/>
-
- -

CSS

- -
input[type=range]::-moz-range-track {
-  background-color: green;
-}
-
- -

結果

- -

{{EmbedLiveSample("Example", 300, 50)}}

- -

このスタイルを使用するプログレスバーは、次のようになります:

- -

A range with the track green.

- -

仕様

- -

標準の一部ではありません。

- -

ブラウザー実装状況

- - - -

{{Compat("css.selectors.-moz-range-track")}}

- -

関連項目

- - diff --git a/files/ja/web/css/_doublecolon_-moz-range-track/index.md b/files/ja/web/css/_doublecolon_-moz-range-track/index.md new file mode 100644 index 0000000000..3675cfc890 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-moz-range-track/index.md @@ -0,0 +1,74 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - 'CSS:Mozilla Extensions' + - Non-standard + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::-moz-range-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-moz-range-track CSS 疑似要素は、 type="range" の {{HTMLElement("input")}} でインジケーターがスライドする track (例, 溝) を表す Mozilla 拡張機能 です。

+ +
+

Note: ::-moz-range-track を <input type="range"> 以外で使用すると、何にも一致せず、効果がありません。

+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-track {
+  background-color: green;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

このスタイルを使用するプログレスバーは、次のようになります:

+ +

A range with the track green.

+ +

仕様

+ +

標準の一部ではありません。

+ +

ブラウザー実装状況

+ + + +

{{Compat("css.selectors.-moz-range-track")}}

+ +

関連項目

+ + diff --git a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html deleted file mode 100644 index 01545f5204..0000000000 --- a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: '::-webkit-progress-value' -slug: 'Web/CSS/::-webkit-progress-value' -tags: - - CSS - - Reference - - Selector - - 疑似要素 - - 非標準 -translation_of: 'Web/CSS/::-webkit-progress-value' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

::-webkit-progress-value CSS 疑似要素 は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。

- -
-

Note: ::-webkit-progress-value を有効にするには {{cssxref("-webkit-appearance")}} を <progress> 要素で none に設定する必要があります。

-
- -

仕様

- -

仕様の一部ではありません。これは、 WebKit/Blink に固有の独自疑似要素です。

- -

例

- -

HTML

- -
<progress value="10" max="50">
-
- -

CSS

- -
progress {
-  -webkit-appearance: none;
-}
-
-::-webkit-progress-value {
-  background-color: orange;
-}
- -

Result

- -

{{EmbedLiveSample("Example", 200, 50)}}

- -

上記のスタイルを使用したプログレスバーは次のようになります:

- -

- -

ブラウザーの実装状況

- - - -

{{Compat("css.selectors.-webkit-progress-value")}}

- -

関連項目

- - diff --git a/files/ja/web/css/_doublecolon_-webkit-progress-value/index.md b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.md new file mode 100644 index 0000000000..01545f5204 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-webkit-progress-value/index.md @@ -0,0 +1,66 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - Reference + - Selector + - 疑似要素 + - 非標準 +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-webkit-progress-value CSS 疑似要素 は、 {{HTMLElement("progress")}} 要素のバーの塗りつぶされた部分を表します。これは、 {{cssxref("::-webkit-progress-bar")}} 疑似要素の子要素です。

+ +
+

Note: ::-webkit-progress-value を有効にするには {{cssxref("-webkit-appearance")}} を <progress> 要素で none に設定する必要があります。

+
+ +

仕様

+ +

仕様の一部ではありません。これは、 WebKit/Blink に固有の独自疑似要素です。

+ +

例

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

上記のスタイルを使用したプログレスバーは次のようになります:

+ +

+ +

ブラウザーの実装状況

+ + + +

{{Compat("css.selectors.-webkit-progress-value")}}

+ +

関連項目

+ + diff --git a/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html deleted file mode 100644 index d181963cbe..0000000000 --- a/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: '::-webkit-slider-runnable-track' -slug: 'Web/CSS/::-webkit-slider-runnable-track' -tags: - - CSS - - 'CSS:WebKit Extensions' - - NeedsBrowserCompatibility - - NeedsCompatTable - - NeedsExample - - NeedsMobileBrowserCompatibility - - Non-standard - - Pseudo-element - - Reference - - Selector -translation_of: 'Web/CSS/::-webkit-slider-runnable-track' ---- -

{{CSSRef}}{{Non-standard_Header}}

- -

::-webkit-slider-runnable-track は CSS の擬似要素で {{HTMLElement("input/range", '<input type="range">')}} "track" (インジケータがスライドする溝) を表します。

- -

構文

- -
::-webkit-slider-runnable-track
- -

仕様書

- -

標準の一部ではありません。

- -

ブラウザーの互換性

- -

{{Compat("css.selectors.-webkit-slider-runnable-track")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.md b/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.md new file mode 100644 index 0000000000..d181963cbe --- /dev/null +++ b/files/ja/web/css/_doublecolon_-webkit-slider-runnable-track/index.md @@ -0,0 +1,45 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - 'CSS:WebKit Extensions' + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +

{{CSSRef}}{{Non-standard_Header}}

+ +

::-webkit-slider-runnable-track は CSS の擬似要素で {{HTMLElement("input/range", '<input type="range">')}} "track" (インジケータがスライドする溝) を表します。

+ +

構文

+ +
::-webkit-slider-runnable-track
+ +

仕様書

+ +

標準の一部ではありません。

+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.-webkit-slider-runnable-track")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html deleted file mode 100644 index 03655e6a79..0000000000 --- a/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: '::-webkit-slider-thumb' -slug: 'Web/CSS/::-webkit-slider-thumb' -tags: - - CSS - - NeedsBrowserCompatibility - - NeedsCompatTable - - NeedsExample - - NeedsMobileBrowserCompatibility - - Non-standard - - Pseudo-element - - Reference - - 擬似要素 - - 標準外 -translation_of: 'Web/CSS/::-webkit-slider-thumb' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

::-webkit-slider-thumb は CSS の擬似要素で、数値の値を変更する {{HTMLElement("input")}} の type="range" でユーザーが「溝」の中を動かすことができる「つまみ」を表します。

- -

仕様書

- -

どの仕様書でも定義されていません。これは WebKit/Blink に固有の私有擬似要素です。

- -

ブラウザーの互換性

- -

{{Compat("css.selectors.-webkit-slider-thumb")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.md b/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.md new file mode 100644 index 0000000000..03655e6a79 --- /dev/null +++ b/files/ja/web/css/_doublecolon_-webkit-slider-thumb/index.md @@ -0,0 +1,42 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudo-element + - Reference + - 擬似要素 + - 標準外 +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-webkit-slider-thumb は CSS の擬似要素で、数値の値を変更する {{HTMLElement("input")}} の type="range" でユーザーが「溝」の中を動かすことができる「つまみ」を表します。

+ +

仕様書

+ +

どの仕様書でも定義されていません。これは WebKit/Blink に固有の私有擬似要素です。

+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.-webkit-slider-thumb")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_after/index.html b/files/ja/web/css/_doublecolon_after/index.html deleted file mode 100644 index 74e3639749..0000000000 --- a/files/ja/web/css/_doublecolon_after/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: '::after (:after)' -slug: 'Web/CSS/::after' -tags: - - CSS - - ウェブ - - リファレンス - - レイアウト - - 疑似要素 -translation_of: 'Web/CSS/::after' ---- -
{{CSSRef}}
- -

CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

- -
/* リンクの後に矢印を追加 */
-a::after {
-  content: "→";
-}
- -
-

メモ: ::before 及び ::after によって作成される疑似要素は要素の整形ボックスに含まれるため、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような置換要素には適用されません。

-
- -

構文

- -{{csssyntax}} - -
-

メモ: CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::after の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :after も使用できます。

-
- -

例

- -

シンプルな使い方

- -

2つのクラスを作成しましょう。1つはつまらない段落で1つは楽しい段落です。これらのクラスを使用して、段落の最後に疑似要素を追加することができます。

- -

HTML

- -
<p class="boring-text">古くつまらないテキストです。</p>
-<p>つまらなくも楽しくもないふつうのテキストです。</p>
-<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p>
- -

CSS

- -
.exciting-text::after {
-  content: " <- 楽しい！";
-  color: green;
-}
-
-.boring-text::after {
-  content: " <- ツマラナイ！";
-  color: red;
-}
- -

結果

- -

{{EmbedLiveSample('Simple_usage', 500, 150)}}

- -

装飾の例

- -

{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。

- -

HTML

- -
<span class="ribbon">このテキストの後のオレンジのボックスを見てください。</span>
- -

CSS

- -
.ribbon {
-  background-color: #5BC8F7;
-}
-
-.ribbon::after {
-  content: "かわいいオレンジのボックスです。";
-  background-color: #FFBA10;
-  border-color: black;
-  border-style: dotted;
-}
- -

結果

- -

{{EmbedLiveSample('Decorative_example', 450, 20)}}

- -

ツールチップ

- -

この例は、 ::after を CSS の attr() 関数と data-descr カスタムデータ属性との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。

- -

HTML

- -
<p>Here we have some
-  <span data-descr="collection of words and punctuation">text</span> with a few
-  <span data-descr="small popups that appear when hovering">tooltips</span>.
-</p>
-
- -

CSS

- -
span[data-descr] {
-  position: relative;
-  text-decoration: underline;
-  color: #00F;
-  cursor: help;
-}
-
-span[data-descr]:hover::after {
-  content: attr(data-descr);
-  position: absolute;
-  left: 0;
-  top: 24px;
-  min-width: 200px;
-  border: 1px #aaaaaa solid;
-  border-radius: 10px;
-  background-color: #ffffcc;
-  padding: 12px;
-  color: #000000;
-  font-size: 14px;
-  z-index: 1;
-}
- -

結果

- -

{{EmbedLiveSample('Tooltips', 450, 120)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}前回の版から重要な変更はなし
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}擬似要素で定義されたプロパティのトランジションを許可
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}擬似要素で定義されたプロパティのアニメーションを許可
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}2重コロンの構文を導入
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}初回定義。コロン1つの構文のみ
- -

ブラウザーの対応

- -
-

{{Compat("css.selectors.after")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_after/index.md b/files/ja/web/css/_doublecolon_after/index.md new file mode 100644 index 0000000000..74e3639749 --- /dev/null +++ b/files/ja/web/css/_doublecolon_after/index.md @@ -0,0 +1,175 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - ウェブ + - リファレンス + - レイアウト + - 疑似要素 +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

+ +
/* リンクの後に矢印を追加 */
+a::after {
+  content: "→";
+}
+ +
+

メモ: ::before 及び ::after によって作成される疑似要素は要素の整形ボックスに含まれるため、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような置換要素には適用されません。

+
+ +

構文

+ +{{csssyntax}} + +
+

メモ: CSS3 では疑似クラスと疑似要素を見分けやすくするために、 ::after の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :after も使用できます。

+
+ +

例

+ +

シンプルな使い方

+ +

2つのクラスを作成しましょう。1つはつまらない段落で1つは楽しい段落です。これらのクラスを使用して、段落の最後に疑似要素を追加することができます。

+ +

HTML

+ +
<p class="boring-text">古くつまらないテキストです。</p>
+<p>つまらなくも楽しくもないふつうのテキストです。</p>
+<p class="exciting-text">MDN への協力は簡単で楽しいものです。</p>
+ +

CSS

+ +
.exciting-text::after {
+  content: " <- 楽しい！";
+  color: green;
+}
+
+.boring-text::after {
+  content: " <- ツマラナイ！";
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Simple_usage', 500, 150)}}

+ +

装飾の例

+ +

{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。

+ +

HTML

+ +
<span class="ribbon">このテキストの後のオレンジのボックスを見てください。</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "かわいいオレンジのボックスです。";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

結果

+ +

{{EmbedLiveSample('Decorative_example', 450, 20)}}

+ +

ツールチップ

+ +

この例は、 ::after を CSS の attr() 関数と data-descr カスタムデータ属性との組み合わせで使用し、ツールチップを作成しています。 JavaScript は必要ありません。

+ +

HTML

+ +
<p>Here we have some
+  <span data-descr="collection of words and punctuation">text</span> with a few
+  <span data-descr="small popups that appear when hovering">tooltips</span>.
+</p>
+
+ +

CSS

+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

結果

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}前回の版から重要な変更はなし
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}擬似要素で定義されたプロパティのトランジションを許可
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}擬似要素で定義されたプロパティのアニメーションを許可
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}2重コロンの構文を導入
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}初回定義。コロン1つの構文のみ
+ +

ブラウザーの対応

+ +
+

{{Compat("css.selectors.after")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_backdrop/index.html b/files/ja/web/css/_doublecolon_backdrop/index.html deleted file mode 100644 index d3f414abf3..0000000000 --- a/files/ja/web/css/_doublecolon_backdrop/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: '::backdrop' -slug: 'Web/CSS/::backdrop' -tags: - - CSS - - Full-screen - - Layout - - NeedsContent - - Pseudo-element - - Reference - - 全画面 - - 疑似要素 -translation_of: 'Web/CSS/::backdrop' ---- -
{{CSSRef}}
- -

CSS の ::backdrop 疑似要素は、何らかの要素が全画面モードで表示される直下に直接表示される {{Glossary("viewport")}} の寸法のボックスです。これは Fullscreen API を使用した全画面モードに配置される要素、および {{HTMLElement("dialog")}} 要素の両方を含みます。

- -

全画面モードで複数の要素が配置されたときは、 backdrop はそのような要素の最上位の直下、より古い全画面要素の上に絵が描かれます。

- -
/* Backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */
-dialog::backdrop {
-  background: rgba(255,0,0,.25);
-}
- -

すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。 ::backdrop 疑似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。

- -

::backdrop 疑似要素はどの要素にも継承せず、どの要素からも継承しません。この疑似要素に適用するプロパティの制限はありません。

- -

構文

- -{{CSSSyntax}} - -

例

- -

この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。

- -
video::backdrop {
-  background-color: #448;
-}
-
- -

結果の画面は以下のようになります。

- -

- -

なお、 backdrop である暗い青灰色の上下のレターボックス効果の場所は可視です。ふつうその領域は黒ですが、上記の CSS によって表示方法が変更されています。

- -

Glitch ですぐに例を見るまたはコードを閲覧またはリミックスすることができます。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.selectors.backdrop")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_backdrop/index.md b/files/ja/web/css/_doublecolon_backdrop/index.md new file mode 100644 index 0000000000..d3f414abf3 --- /dev/null +++ b/files/ja/web/css/_doublecolon_backdrop/index.md @@ -0,0 +1,80 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Full-screen + - Layout + - NeedsContent + - Pseudo-element + - Reference + - 全画面 + - 疑似要素 +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}}
+ +

CSS の ::backdrop 疑似要素は、何らかの要素が全画面モードで表示される直下に直接表示される {{Glossary("viewport")}} の寸法のボックスです。これは Fullscreen API を使用した全画面モードに配置される要素、および {{HTMLElement("dialog")}} 要素の両方を含みます。

+ +

全画面モードで複数の要素が配置されたときは、 backdrop はそのような要素の最上位の直下、より古い全画面要素の上に絵が描かれます。

+ +
/* Backdrop はダイアログが dialog.showModal() が開いている時のみ表示されます */
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}
+ +

すべての全画面要素は、最上位レイヤー、すなわちビューポートで常にコンテンツが画面に描画される前に最後に (すなわち最上位に) 描画される特殊なレイヤーの中で、後入れ先出し (LIFO) で配置されます。 ::backdrop 疑似要素は、最上位レイヤーの一番上に来たときに、その下に位置するものをぼかしたり、スタイル付けしたり、完全に隠したりすることができます。

+ +

::backdrop 疑似要素はどの要素にも継承せず、どの要素からも継承しません。この疑似要素に適用するプロパティの制限はありません。

+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

この例では、動画が全画面モードに移行したときの backdrop スタイルが、多くのブラウザーでの既定値である黒ではなく、青灰色に構成しています。

+ +
video::backdrop {
+  background-color: #448;
+}
+
+ +

結果の画面は以下のようになります。

+ +

+ +

なお、 backdrop である暗い青灰色の上下のレターボックス効果の場所は可視です。ふつうその領域は黒ですが、上記の CSS によって表示方法が変更されています。

+ +

Glitch ですぐに例を見るまたはコードを閲覧またはリミックスすることができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.selectors.backdrop")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_before/index.html b/files/ja/web/css/_doublecolon_before/index.html deleted file mode 100644 index 64c35a440c..0000000000 --- a/files/ja/web/css/_doublecolon_before/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: '::before (:before)' -slug: 'Web/CSS/::before' -tags: - - CSS - - Layout - - Pseudo-element - - Reference - - Selector - - Web -translation_of: 'Web/CSS/::before' ---- -
{{CSSRef}}
- -

CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

- -
/* リンクの前にハートを追加 */
-a::before {
-  content: "♥";
-}
- -
-

注: ::before および ::after によって生成される擬似要素は要素の整形ボックスに含まれるため、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような置換要素には適用されません。

-
- -

構文

- -{{csssyntax}} - -
-

注: CSS3 では擬似クラスと擬似要素を見分けやすくするために、 ::before の表記法 (二重コロン付き) が導入されました。ブラウザーでは CSS2 で導入された :before も使用できます。

-
- -

例

- -

引用符の追加

- -

::before 擬似要素を使用するシンプルな例の1つ目は、引用符を追加するものです。引用符を挿入するために ::before および {{Cssxref("::after")}} の両方を使用しています。

- -

HTML

- -
<q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>
- -

CSS

- -
q::before {
-  content: "«";
-  color: blue;
-}
-
-q::after {
-  content: "»";
-  color: red;
-}
- -

結果

- -

{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}

- -

装飾の例

- -

{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。

- -

HTML

- -
<span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
- -

CSS

- -
.ribbon {
-  background-color: #5BC8F7;
-}
-
-.ribbon::before {
-  content: "このオレンジのボックスを見てください。";
-  background-color: #FFBA10;
-  border-color: black;
-  border-style: dotted;
-}
- -

結果

- -

{{EmbedLiveSample('Decorative_example', 450, 60)}}

- -

やることリスト

- -

この例では、擬似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。

- -

HTML

- -
<ul>
-  <li>牛乳を買う</li>
-  <li>犬の散歩をする</li>
-  <li>エクササイズ</li>
-  <li>コードを書く</li>
-  <li>音楽を演奏する</li>
-  <li>リラックスする</li>
-</ul>
-
- -

CSS

- -
li {
-  list-style-type: none;
-  position: relative;
-  margin: 2px;
-  padding: 0.5em 0.5em 0.5em 2em;
-  background: lightgrey;
-  font-family: sans-serif;
-}
-
-li.done {
-  background: #CCFF99;
-}
-
-li.done::before {
-  content: '';
-  position: absolute;
-  border-color: #009933;
-  border-style: solid;
-  border-width: 0 0.3em 0.25em 0;
-  height: 1em;
-  top: 1.3em;
-  left: 0.6em;
-  margin-top: -1em;
-  transform: rotate(45deg);
-  width: 0.5em;
-}
- -

JavaScript

- -
var list = document.querySelector('ul');
-list.addEventListener('click', function(ev) {
-  if (ev.target.tagName === 'LI') {
-     ev.target.classList.toggle('done');
-  }
-}, false);
-
- -

ここで上記のコードをライブで実行できます。なお、アイコンは使用しておらず、チェックマークは実際に CSS の ::before で整形したものです。先に進んでやってみてください。

- -

結果

- -

{{EmbedLiveSample('To-do_list', 400, 300)}}

- -

特殊文字

- -

これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することはできません。特殊文字を使用する必要がある場合で、 CSS の content の文字列に入力する場合は、 If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

- -

HTML

- -
<ol>
-  <li>Crack Eggs into bowl</li>
-  <li>Add Milk</li>
-  <li>Add Flour</li>
-  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
-  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
-  <li>Fry until the top of the pancake loses its gloss</li>
-  <li>Flip it over and fry for a couple more minutes</li>
-  <li>serve with your favorite topping</li>
-</ol>
-
- -

CSS

- -
li {
-  padding:0.5em;
-}
-
-li[aria-current='step'] {
-  font-weight:bold;
-}
-
-li[aria-current='step']::after {
-  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
-  display: inline;
-}
-
- -

Result

- -

{{EmbedLiveSample('Special_characters', 400, 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}前回の版から重要な変更はなし。
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}擬似要素で定義されたプロパティのアニメーションを許可。
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}2重コロンの構文を導入。
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}初回定義。コロン1つの構文のみ。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.before")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_before/index.md b/files/ja/web/css/_doublecolon_before/index.md new file mode 100644 index 0000000000..64c35a440c --- /dev/null +++ b/files/ja/web/css/_doublecolon_before/index.md @@ -0,0 +1,229 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Selector + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。よく {{cssxref("content")}} プロパティを使用して、要素に装飾的な内容を追加するために用いられます。この要素は既定でインラインです。

+ +
/* リンクの前にハートを追加 */
+a::before {
+  content: "♥";
+}
+ +
+

注: ::before および ::after によって生成される擬似要素は要素の整形ボックスに含まれるため、 {{htmlelement("img")}} 要素や {{htmlelement("br")}} 要素のような置換要素には適用されません。

+
+ +

構文

+ +{{csssyntax}} + +
+

注: CSS3 では擬似クラスと擬似要素を見分けやすくするために、 ::before の表記法 (二重コロン付き) が導入されました。ブラウザーでは CSS2 で導入された :before も使用できます。

+
+ +

例

+ +

引用符の追加

+ +

::before 擬似要素を使用するシンプルな例の1つ目は、引用符を追加するものです。引用符を挿入するために ::before および {{Cssxref("::after")}} の両方を使用しています。

+ +

HTML

+ +
<q>引用があることは、</q>彼は言った、<q>ないよりも良い。</q>
+ +

CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Adding_quotation_marks', '500', '50', '')}}

+ +

装飾の例

+ +

{{cssxref("content")}} プロパティ内の文字列や画像は、大体思う通りに整形することができます。

+ +

HTML

+ +
<span class="ribbon">オレンジのボックスがどこにあるか注意してください。</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "このオレンジのボックスを見てください。";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

結果

+ +

{{EmbedLiveSample('Decorative_example', 450, 60)}}

+ +

やることリスト

+ +

この例では、擬似要素を使用して簡単なやることリストを作成します。この方法は UI に小さな変更を加え、使い勝手を改善するためによく使われます。

+ +

HTML

+ +
<ul>
+  <li>牛乳を買う</li>
+  <li>犬の散歩をする</li>
+  <li>エクササイズ</li>
+  <li>コードを書く</li>
+  <li>音楽を演奏する</li>
+  <li>リラックスする</li>
+</ul>
+
+ +

CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if (ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

ここで上記のコードをライブで実行できます。なお、アイコンは使用しておらず、チェックマークは実際に CSS の ::before で整形したものです。先に進んでやってみてください。

+ +

結果

+ +

{{EmbedLiveSample('To-do_list', 400, 300)}}

+ +

特殊文字

+ +

これは CSS であり HTML ではないので、 content の値の中でエンティティのマークアップを使用することはできません。特殊文字を使用する必要がある場合で、 CSS の content の文字列に入力する場合は、 If you need to use a special character, and can not enter it literally into your CSS content string, use a unicode escape sequence, consisting of a backslash followed by the hexadecimal unicode value.

+ +

HTML

+ +
<ol>
+  <li>Crack Eggs into bowl</li>
+  <li>Add Milk</li>
+  <li>Add Flour</li>
+  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
+  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
+  <li>Fry until the top of the pancake loses its gloss</li>
+  <li>Flip it over and fry for a couple more minutes</li>
+  <li>serve with your favorite topping</li>
+</ol>
+
+ +

CSS

+ +
li {
+  padding:0.5em;
+}
+
+li[aria-current='step'] {
+  font-weight:bold;
+}
+
+li[aria-current='step']::after {
+  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
+  display: inline;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Special_characters', 400, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}前回の版から重要な変更はなし。
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}擬似要素で定義されたプロパティのアニメーションを許可。
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}2重コロンの構文を導入。
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}初回定義。コロン1つの構文のみ。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.before")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_cue/index.html b/files/ja/web/css/_doublecolon_cue/index.html deleted file mode 100644 index de824dd4c8..0000000000 --- a/files/ja/web/css/_doublecolon_cue/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: '::cue' -slug: 'Web/CSS/::cue' -tags: - - '::cue' - - CSS - - Media - - Pseudo-element - - Reference - - Selector - - WebVTT - - Webビデオテキストトラック - - cue - - ウェブ動画テキストトラック - - セレクター - - メディア - - 擬似要素 -translation_of: 'Web/CSS/::cue' ---- -
{{CSSRef}}
- -

::cue は CSS の擬似要素で、選択された要素内の WebVTT キューに一致します。これにより、 VTT トラック付きのメディアでキャプションや他のキューをスタイル付けすることができます。

- -
::cue {
-  color: yellow;
-  font-weight: bold;
-}
- -

利用可能なプロパティ

- -

セレクターにこの要素を含む規則では、以下の CSS プロパティしか使用することができません。

- - - -

プロパティは、あたかも1つの部品であるかのように、一連のキュー全体に適用されます。 background とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。

- -

構文

- -{{CSSSyntax}} - -

例

- -

次の CSS はキューのスタイルを設定し、テキストが白に、背景が半透明の黒い矩形になります。

- -
::cue {
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.6);
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.cue")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_cue/index.md b/files/ja/web/css/_doublecolon_cue/index.md new file mode 100644 index 0000000000..de824dd4c8 --- /dev/null +++ b/files/ja/web/css/_doublecolon_cue/index.md @@ -0,0 +1,91 @@ +--- +title: '::cue' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - CSS + - Media + - Pseudo-element + - Reference + - Selector + - WebVTT + - Webビデオテキストトラック + - cue + - ウェブ動画テキストトラック + - セレクター + - メディア + - 擬似要素 +translation_of: 'Web/CSS/::cue' +--- +
{{CSSRef}}
+ +

::cue は CSS の擬似要素で、選択された要素内の WebVTT キューに一致します。これにより、 VTT トラック付きのメディアでキャプションや他のキューをスタイル付けすることができます。

+ +
::cue {
+  color: yellow;
+  font-weight: bold;
+}
+ +

利用可能なプロパティ

+ +

セレクターにこの要素を含む規則では、以下の CSS プロパティしか使用することができません。

+ + + +

プロパティは、あたかも1つの部品であるかのように、一連のキュー全体に適用されます。 background とその個別指定だけは例外で、各キューに個別に適用されます。これは、ボックスが生成されて予期せずメディアの大きな領域を占めることを避けるためです。

+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

次の CSS はキューのスタイルを設定し、テキストが白に、背景が半透明の黒い矩形になります。

+ +
::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.cue")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_first-letter/index.html b/files/ja/web/css/_doublecolon_first-letter/index.html deleted file mode 100644 index f08af09373..0000000000 --- a/files/ja/web/css/_doublecolon_first-letter/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: '::first-letter (:first-letter)' -slug: 'Web/CSS/::first-letter' -tags: - - CSS - - Layout - - Pseudo-element - - Reference - - Selector -translation_of: 'Web/CSS/::first-letter' ---- -
{{CSSRef}}
- -

::first-letter は CSS の擬似要素で、ブロックレベル要素の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。

- -
/* <p> の最初の文字を選択します */
-p::first-letter {
-  font-size: 130%;
-}
- -

要素の最初の文字は、常に単純に識別できるとは限りません。

- - - -
-

CSS3 では擬似クラスと擬似要素を見分けやすくするために、 ::first-letter の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :first-letter も使用できます。

-
- -

利用可能なプロパティ

- -

::first-letter 擬似要素では、一部の CSS プロパティのみが利用できます。

- - - -

構文

- -{{csssyntax}} - -

例

- -

単純なドロップキャップ

- -

この例では、 ::first-letter 疑似要素を使用して、 <h2> の直後の段落の最初の文字にドロップキャップ効果を作成します。

- -

HTML

- -
<h2>My heading</h2>
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
-  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
-<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
- -

CSS

- -
p {
-  width: 500px;
-  line-height: 1.5;
-}
-
-h2 + p::first-letter {
-  color: white;
-  background-color: black;
-  border-radius: 2px;
-  box-shadow: 3px 3px 0 red;
-  font-size: 250%;
-  padding: 6px 3px;
-  margin-right: 6px;
-  float: left;
-}
- -

結果

- -

{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}

- -

特殊な区切り文字と非ラテン文字への効果

- -

この例では、特殊な区切り文字や非ラテン文字に対する ::first-letter の効果を説明しています。

- -

HTML

- -
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
-<p>-The beginning of a special punctuation mark.</p>
-<p>_The beginning of a special punctuation mark.</p>
-<p>"The beginning of a special punctuation mark.</p>
-<p>'The beginning of a special punctuation mark.</p>
-<p>*The beginning of a special punctuation mark.</p>
-<p>#The beginning of a special punctuation mark.</p>
-<p>「先頭の特殊区切り記号です。</p>
-<p>《先頭の特殊区切り記号です。</p>
-<p>“先頭の特殊区切り記号です。</p>
- -

CSS

- -
p::first-letter {
-  color: red;
-  font-size: 150%;
-}
- -

結果

- -

{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}利用できるプロパティを組版、文字装飾、インライン配置、 {{ cssxref("opacity") }}、 {{ cssxref("box-shadow") }} に一般化。
{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}::first-letter で {{cssxref("text-shadow")}} が使用できるようになった。
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}擬似要素用の二重コロン構文の導入。リスト項目での使用時やや特定言語向け（例えばオランダ語の連字 IJ）など、特殊な場合の挙動の定義。
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}変更なし。
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}初回定義、単一コロン構文を使用。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.first-letter")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_first-letter/index.md b/files/ja/web/css/_doublecolon_first-letter/index.md new file mode 100644 index 0000000000..f08af09373 --- /dev/null +++ b/files/ja/web/css/_doublecolon_first-letter/index.md @@ -0,0 +1,164 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::first-letter' +--- +
{{CSSRef}}
+ +

::first-letter は CSS の擬似要素で、ブロックレベル要素の最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ (画像やインラインテーブルなど) がないときに限ります。

+ +
/* <p> の最初の文字を選択します */
+p::first-letter {
+  font-size: 130%;
+}
+ +

要素の最初の文字は、常に単純に識別できるとは限りません。

+ + + +
+

CSS3 では擬似クラスと擬似要素を見分けやすくするために、 ::first-letter の表記法（二重コロン付き）が導入されました。ブラウザーでは CSS2 で導入された :first-letter も使用できます。

+
+ +

利用可能なプロパティ

+ +

::first-letter 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +{{csssyntax}} + +

例

+ +

単純なドロップキャップ

+ +

この例では、 ::first-letter 疑似要素を使用して、 <h2> の直後の段落の最初の文字にドロップキャップ効果を作成します。

+ +

HTML

+ +
<h2>My heading</h2>
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+ +

CSS

+ +
p {
+  width: 500px;
+  line-height: 1.5;
+}
+
+h2 + p::first-letter {
+  color: white;
+  background-color: black;
+  border-radius: 2px;
+  box-shadow: 3px 3px 0 red;
+  font-size: 250%;
+  padding: 6px 3px;
+  margin-right: 6px;
+  float: left;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Simple_drop_cap', '100%', 350) }}

+ +

特殊な区切り文字と非ラテン文字への効果

+ +

この例では、特殊な区切り文字や非ラテン文字に対する ::first-letter の効果を説明しています。

+ +

HTML

+ +
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>-The beginning of a special punctuation mark.</p>
+<p>_The beginning of a special punctuation mark.</p>
+<p>"The beginning of a special punctuation mark.</p>
+<p>'The beginning of a special punctuation mark.</p>
+<p>*The beginning of a special punctuation mark.</p>
+<p>#The beginning of a special punctuation mark.</p>
+<p>「先頭の特殊区切り記号です。</p>
+<p>《先頭の特殊区切り記号です。</p>
+<p>“先頭の特殊区切り記号です。</p>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 150%;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}利用できるプロパティを組版、文字装飾、インライン配置、 {{ cssxref("opacity") }}、 {{ cssxref("box-shadow") }} に一般化。
{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}::first-letter で {{cssxref("text-shadow")}} が使用できるようになった。
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}擬似要素用の二重コロン構文の導入。リスト項目での使用時やや特定言語向け（例えばオランダ語の連字 IJ）など、特殊な場合の挙動の定義。
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}変更なし。
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}初回定義、単一コロン構文を使用。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.first-letter")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_first-line/index.html b/files/ja/web/css/_doublecolon_first-line/index.html deleted file mode 100644 index b9477f4b31..0000000000 --- a/files/ja/web/css/_doublecolon_first-line/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: '::first-line (:first-line)' -slug: 'Web/CSS/::first-line' -tags: - - CSS - - Layout - - Pseudo-element - - Reference - - Selector -translation_of: 'Web/CSS/::first-line' ---- -
{{CSSRef}}
- -

::first-line は CSS の擬似要素で、ブロックレベル要素の最初の行にスタイルを適用します。なお、最初の行の長さは要素の幅、文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。

- -
/* <p> の最初の行を選択 */
-p::first-line {
-  color: red;
-}
- -
-

CSS3 では ::first-line という (二重コロン付き) 表記が、 擬似クラスと擬似要素を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された :first-line も使用できます。

-
- -

利用可能なプロパティ

- -

::first-line 擬似要素では、一部の CSS プロパティのみが利用できます。

- - - -

構文

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>スタイルはこの段落の最初の行にのみ適用されます。
-その後のすべての文字列は普通のスタイルになります。分かりますか？</p>
-
-<span>ブロックレベル要素ではないので、この文字列の最初の行は、
-特殊なスタイルになりません。</span>
- -

CSS

- -
::first-line {
-  color: blue;
-  text-transform: uppercase;
-
-
-  /* 警告: これらを使用しないでください */
-  /* ::first-line 擬似要素では多くのプロパティが無効になります */
-  margin-left: 20px;
-  text-indent: 20px;
-}
- -

結果

- -

{{EmbedLiveSample('Examples', 350, 160)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}}::first-letter を利用できる場所をもっと厳密に定義。
- 利用できるプロパティを組版、文字装飾、インライン配置、 {{cssxref("opacity")}} に一般化。
- ::first-letter の継承を定義。
{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}::first-letter で {{cssxref("text-shadow")}} が使用できるようになった。
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}擬似要素用の二重コロン構文の導入。
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}初回定義、単一コロン構文を使用。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.first-line")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_first-line/index.md b/files/ja/web/css/_doublecolon_first-line/index.md new file mode 100644 index 0000000000..b9477f4b31 --- /dev/null +++ b/files/ja/web/css/_doublecolon_first-line/index.md @@ -0,0 +1,119 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

::first-line は CSS の擬似要素で、ブロックレベル要素の最初の行にスタイルを適用します。なお、最初の行の長さは要素の幅、文書の幅、文字列のフォントの大きさなど、様々な要因に左右されます。

+ +
/* <p> の最初の行を選択 */
+p::first-line {
+  color: red;
+}
+ +
+

CSS3 では ::first-line という (二重コロン付き) 表記が、 擬似クラスと擬似要素を見分けやすくするために導入されました。ブラウザーでは CSS2 で導入された :first-line も使用できます。

+
+ +

利用可能なプロパティ

+ +

::first-line 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p>スタイルはこの段落の最初の行にのみ適用されます。
+その後のすべての文字列は普通のスタイルになります。分かりますか？</p>
+
+<span>ブロックレベル要素ではないので、この文字列の最初の行は、
+特殊なスタイルになりません。</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* 警告: これらを使用しないでください */
+  /* ::first-line 擬似要素では多くのプロパティが無効になります */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 350, 160)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}}::first-letter を利用できる場所をもっと厳密に定義。
+ 利用できるプロパティを組版、文字装飾、インライン配置、 {{cssxref("opacity")}} に一般化。
+ ::first-letter の継承を定義。
{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}::first-letter で {{cssxref("text-shadow")}} が使用できるようになった。
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}擬似要素用の二重コロン構文の導入。
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}変更なし。
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}初回定義、単一コロン構文を使用。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.first-line")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_grammar-error/index.html b/files/ja/web/css/_doublecolon_grammar-error/index.html deleted file mode 100644 index 94d0b33805..0000000000 --- a/files/ja/web/css/_doublecolon_grammar-error/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: '::grammar-error' -slug: 'Web/CSS/::grammar-error' -tags: - - CSS - - Experimental - - Pseudo-element - - Reference - - Selector -translation_of: 'Web/CSS/::grammar-error' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

::grammar-error は CSS の擬似要素で、{{glossary("user agent", "ユーザーエージェント")}}が文法的に正しくないとしたテキストの区間を示します。

- -

利用できるプロパティ

- -

::grammar-error 擬似要素では、一部の CSS プロパティのみが利用できます。

- - - -

構文

- -
::grammar-error
- -

例

- -

単純な文書の構文チェック

- -

この例では、最終的に対応しているブラウザーでは、フラグの立った文法エラーがあれば、示したスタイルで強調表示されます。

- -

HTML

- -
<p>My friends is coming to the party tonight.</p>
- -

CSS

- -
::grammar-error  {
-  text-decoration: underline red;
-  color: red;
-}
- -

結果

- -

{{EmbedLiveSample('Simple_document_grammar_check', '100%', 60)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.grammar-error")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_grammar-error/index.md b/files/ja/web/css/_doublecolon_grammar-error/index.md new file mode 100644 index 0000000000..94d0b33805 --- /dev/null +++ b/files/ja/web/css/_doublecolon_grammar-error/index.md @@ -0,0 +1,85 @@ +--- +title: '::grammar-error' +slug: 'Web/CSS/::grammar-error' +tags: + - CSS + - Experimental + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::grammar-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

::grammar-error は CSS の擬似要素で、{{glossary("user agent", "ユーザーエージェント")}}が文法的に正しくないとしたテキストの区間を示します。

+ +

利用できるプロパティ

+ +

::grammar-error 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +
::grammar-error
+ +

例

+ +

単純な文書の構文チェック

+ +

この例では、最終的に対応しているブラウザーでは、フラグの立った文法エラーがあれば、示したスタイルで強調表示されます。

+ +

HTML

+ +
<p>My friends is coming to the party tonight.</p>
+ +

CSS

+ +
::grammar-error  {
+  text-decoration: underline red;
+  color: red;
+}
+ +

結果

+ +

{{EmbedLiveSample('Simple_document_grammar_check', '100%', 60)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.grammar-error")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_marker/index.html b/files/ja/web/css/_doublecolon_marker/index.html deleted file mode 100644 index c0b0b9356f..0000000000 --- a/files/ja/web/css/_doublecolon_marker/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: '::marker' -slug: 'Web/CSS/::marker' -tags: - - CSS - - CSS Lists - - CSS リスト - - Experimental - - Layout - - Pseudo-element - - Reference - - 疑似要素 -translation_of: 'Web/CSS/::marker' ---- -
{{CSSRef}}
- -

::marker は CSS の擬似要素で、リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択します。これは display: list-item が設定された要素や擬似要素、例えば {{HTMLElement("li")}} 要素や {{HTMLElement("summary")}} 要素で利用できます。

- -
::marker {
-  color: blue;
-  font-size: 1.2em;
-}
- -

利用できるプロパティ

- -

::marker 擬似要素では、一部の CSS プロパティのみが利用できます。

- - - -
-

この仕様書は、将来追加の CSS プロパティに対応する可能性があることを示しています。

-
- -

構文

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<ul>
-  <li>Peaches</li>
-  <li>Apples</li>
-  <li>Plums</li>
-</ul>
- -

CSS

- -
ul li::marker {
-  color: red;
-  font-size: 1.5em;
-}
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}重要な変更はなし。
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}初回定義。
- -

ブラウザーの互換性

- -
-

{{Compat("css.selectors.marker")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_marker/index.md b/files/ja/web/css/_doublecolon_marker/index.md new file mode 100644 index 0000000000..c0b0b9356f --- /dev/null +++ b/files/ja/web/css/_doublecolon_marker/index.md @@ -0,0 +1,100 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +tags: + - CSS + - CSS Lists + - CSS リスト + - Experimental + - Layout + - Pseudo-element + - Reference + - 疑似要素 +translation_of: 'Web/CSS/::marker' +--- +
{{CSSRef}}
+ +

::marker は CSS の擬似要素で、リスト項目の箇条書き記号ボックス (ふつうは黒丸や番号) を選択します。これは display: list-item が設定された要素や擬似要素、例えば {{HTMLElement("li")}} 要素や {{HTMLElement("summary")}} 要素で利用できます。

+ +
::marker {
+  color: blue;
+  font-size: 1.2em;
+}
+ +

利用できるプロパティ

+ +

::marker 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +
+

この仕様書は、将来追加の CSS プロパティに対応する可能性があることを示しています。

+
+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<ul>
+  <li>Peaches</li>
+  <li>Apples</li>
+  <li>Plums</li>
+</ul>
+ +

CSS

+ +
ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}重要な変更はなし。
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}初回定義。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.selectors.marker")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_part/index.html b/files/ja/web/css/_doublecolon_part/index.html deleted file mode 100644 index dc56b9e9b9..0000000000 --- a/files/ja/web/css/_doublecolon_part/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: '::part()' -slug: 'Web/CSS/::part' -tags: - - '::part' - - CSS - - Draft - - Experimental - - NeedsBrowserCompatibility - - NeedsExample - - Pseudo-element - - Reference - - Selector - - セレクター - - 擬似要素 -translation_of: 'Web/CSS/::part' ---- -
{{CSSRef}}
- -

::part は CSS の擬似要素で、一致する {{HTMLAttrxRef("part")}} 属性を持つシャドウツリー内の要素を表します。

- -
custom-element::part(foo) {
-  /* Styles to apply to the `foo` part */
-}
-
- -

構文

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<template id="tabbed-custom-element">
-<style type="text/css">
-*, ::before, ::after {
-  box-sizing: border-box;
-  padding: 1rem;
-}
-:host {
-  display: flex;
-}
-</style>
-<div part="tab active">Tab 1</div>
-<div part="tab">Tab 2</div>
-<div part="tab">Tab 3</div>
-</template>
-
-<tabbed-custom-element></tabbed-custom-element>
- -

CSS

- -
tabbed-custom-element::part(tab) {
-  color: #0c0c0dcc;
-  border-bottom: transparent solid 2px;
-}
-
-tabbed-custom-element::part(tab):hover {
-  background-color: #0c0c0d19;
-  border-color: #0c0c0d33;
-}
-
-tabbed-custom-element::part(tab):hover:active {
-  background-color: #0c0c0d33;
-}
-
-tabbed-custom-element::part(tab):focus {
-  box-shadow:
-    0 0 0 1px #0a84ff inset,
-    0 0 0 1px #0a84ff,
-    0 0 0 4px rgba(10, 132, 255, 0.3);
-}
-
-tabbed-custom-element::part(active) {
-  color: #0060df;
-  border-color: #0a84ff !important;
-}
-
- -

JavaScript

- -
let template = document.querySelector("#tabbed-custom-element");
-globalThis.customElements.define(template.id, class extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.appendChild(template.content);
-  }
-});
-
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Shadow Parts", "#part", "::part")}}{{Spec2("CSS Shadow Parts")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.part")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_part/index.md b/files/ja/web/css/_doublecolon_part/index.md new file mode 100644 index 0000000000..dc56b9e9b9 --- /dev/null +++ b/files/ja/web/css/_doublecolon_part/index.md @@ -0,0 +1,126 @@ +--- +title: '::part()' +slug: 'Web/CSS/::part' +tags: + - '::part' + - CSS + - Draft + - Experimental + - NeedsBrowserCompatibility + - NeedsExample + - Pseudo-element + - Reference + - Selector + - セレクター + - 擬似要素 +translation_of: 'Web/CSS/::part' +--- +
{{CSSRef}}
+ +

::part は CSS の擬似要素で、一致する {{HTMLAttrxRef("part")}} 属性を持つシャドウツリー内の要素を表します。

+ +
custom-element::part(foo) {
+  /* Styles to apply to the `foo` part */
+}
+
+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<template id="tabbed-custom-element">
+<style type="text/css">
+*, ::before, ::after {
+  box-sizing: border-box;
+  padding: 1rem;
+}
+:host {
+  display: flex;
+}
+</style>
+<div part="tab active">Tab 1</div>
+<div part="tab">Tab 2</div>
+<div part="tab">Tab 3</div>
+</template>
+
+<tabbed-custom-element></tabbed-custom-element>
+ +

CSS

+ +
tabbed-custom-element::part(tab) {
+  color: #0c0c0dcc;
+  border-bottom: transparent solid 2px;
+}
+
+tabbed-custom-element::part(tab):hover {
+  background-color: #0c0c0d19;
+  border-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):hover:active {
+  background-color: #0c0c0d33;
+}
+
+tabbed-custom-element::part(tab):focus {
+  box-shadow:
+    0 0 0 1px #0a84ff inset,
+    0 0 0 1px #0a84ff,
+    0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+tabbed-custom-element::part(active) {
+  color: #0060df;
+  border-color: #0a84ff !important;
+}
+
+ +

JavaScript

+ +
let template = document.querySelector("#tabbed-custom-element");
+globalThis.customElements.define(template.id, class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content);
+  }
+});
+
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Shadow Parts", "#part", "::part")}}{{Spec2("CSS Shadow Parts")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.part")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_selection/index.html b/files/ja/web/css/_doublecolon_selection/index.html deleted file mode 100644 index 08e101b907..0000000000 --- a/files/ja/web/css/_doublecolon_selection/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: '::selection' -slug: 'Web/CSS/::selection' -tags: - - CSS - - Experimental - - リファレンス - - レイアウト - - 疑似要素 -translation_of: 'Web/CSS/::selection' ---- -
{{CSSRef}}
- -

CSS の ::selection 擬似要素は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。

- -
::selection {
-  background-color: cyan;
-}
- -

利用できるプロパティ

- -

::selection 擬似要素では、特定の CSS プロパティのみが利用できます。

- - - -
-

特に、 {{CSSxRef("background-image")}} は無視されます。

-
- -

構文

- -
/* 従来の Firefox の構文 (バージョン 61 以前) */
-::-moz-selection
-
-{{CSSSyntax}}
-
- -

例

- -

HTML

- -
この文字列は選択すると特殊なスタイルになります。
-<p>こちらの段落も文字列を選択してみてください。</p>
- -

CSS

- - - -
/* 選択されたテキストを赤の背景に金色とする */
-::selection {
-  color: gold;
-  background-color: red;
-}
-
-/* 選択されたテキストを青の背景に白とする */
-p::selection {
-  color: white;
-  background-color: blue;
-}
- -

結果

- -

{{EmbedLiveSample('Examples')}}

- -

アクセシビリティの考慮

- -

純粋に美的な理由により、選択されたテキストのスタイルを上書きしないでください。 — ユーザーは必要に応じてカスタマイズすることができます。認知の問題を抱えている人や、技術的な知識に弱い人にとって、予期せず選択のスタイルが変更されると、機能の理解が妨げられる可能性があります。

- -

上書きする場合は、選択部分のテキストと背景の色のコントラスト比が、弱視の人でも読める程度に高いことを確認することが重要です。

- -

色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義しています。)

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義。
- -
-

注: ::selection は CSS Selectors Level 3 の草稿にはありましたが、 (特に要素がネストされた場合の) 振る舞いの仕様化が途中であることや相互運用性が確保されなかったこと (W3C Style mailing list での議論に基づく) から、勧告の過程で削除されました。これは Pseudo-Elements Level 4 で再導入されています。

-
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.selection")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_selection/index.md b/files/ja/web/css/_doublecolon_selection/index.md new file mode 100644 index 0000000000..08e101b907 --- /dev/null +++ b/files/ja/web/css/_doublecolon_selection/index.md @@ -0,0 +1,131 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - Experimental + - リファレンス + - レイアウト + - 疑似要素 +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

CSS の ::selection 擬似要素は、ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用します。

+ +
::selection {
+  background-color: cyan;
+}
+ +

利用できるプロパティ

+ +

::selection 擬似要素では、特定の CSS プロパティのみが利用できます。

+ + + +
+

特に、 {{CSSxRef("background-image")}} は無視されます。

+
+ +

構文

+ +
/* 従来の Firefox の構文 (バージョン 61 以前) */
+::-moz-selection
+
+{{CSSSyntax}}
+
+ +

例

+ +

HTML

+ +
この文字列は選択すると特殊なスタイルになります。
+<p>こちらの段落も文字列を選択してみてください。</p>
+ +

CSS

+ + + +
/* 選択されたテキストを赤の背景に金色とする */
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/* 選択されたテキストを青の背景に白とする */
+p::selection {
+  color: white;
+  background-color: blue;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

アクセシビリティの考慮

+ +

純粋に美的な理由により、選択されたテキストのスタイルを上書きしないでください。 — ユーザーは必要に応じてカスタマイズすることができます。認知の問題を抱えている人や、技術的な知識に弱い人にとって、予期せず選択のスタイルが変更されると、機能の理解が妨げられる可能性があります。

+ +

上書きする場合は、選択部分のテキストと背景の色のコントラスト比が、弱視の人でも読める程度に高いことを確認することが重要です。

+ +

色のコントラスト比は、プレイスホルダーの文字列と入力欄の背景色の値とを比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。 (WCAG は、大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義しています。)

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義。
+ +
+

注: ::selection は CSS Selectors Level 3 の草稿にはありましたが、 (特に要素がネストされた場合の) 振る舞いの仕様化が途中であることや相互運用性が確保されなかったこと (W3C Style mailing list での議論に基づく) から、勧告の過程で削除されました。これは Pseudo-Elements Level 4 で再導入されています。

+
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.selection")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_slotted/index.html b/files/ja/web/css/_doublecolon_slotted/index.html deleted file mode 100644 index dab52cf344..0000000000 --- a/files/ja/web/css/_doublecolon_slotted/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: '::slotted()' -slug: 'Web/CSS/::slotted' -tags: - - '::slotted' - - CSS - - Reference - - ウェブ - - レイアウト - - 疑似要素 -translation_of: 'Web/CSS/::slotted' ---- -
{{ CSSRef }}
- -

::slotted() は CSS の 疑似要素で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくはテンプレートとスロットの利用をご覧ください)。

- -

これは shadow DOM 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。

- -
/* スロット内に配置された任意の要素を選択 */
-::slotted(*) {
-  font-weight: bold;
-}
-
-/* スロット内に配置された <span> 要素を選択 */
-::slotted(span) {
-  font-weight: bold;
-}
-
- -

構文

- -{{csssyntax}} - -

例

- -

以下のコードの断片は slotted-pseudo-element デモから取られたものです (ライブでもご覧ください)。

- -

このデモでは、３つのスロットを持つ単純なテンプレートを使用します。

- -
<template id="person-template">
-  <div>
-    <h2>Personal ID Card</h2>
-    <slot name="person-name">NAME MISSING</slot>
-    <ul>
-      <li><slot name="person-age">AGE MISSING</slot></li>
-      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
-    </ul>
-  </div>
-</template>
- -

カスタム要素 — <person-details> — は以下のように定義されています。

- -
customElements.define('person-details',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      let template = document.getElementById('person-template');
-      let templateContent = template.content;
-
-      const shadowRoot = this.attachShadow({mode: 'open'});
-
-      let style = document.createElement('style');
-      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
-                           'h2 { margin: 0 0 10px; }' +
-                           'ul { margin: 0; }' +
-                           'p { margin: 10px 0; }' +
-                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
-
-      shadowRoot.appendChild(style);
-      shadowRoot.appendChild(templateContent.cloneNode(true));
-  }
-})
- -

style 要素のコンテンツを埋めると、スロットになるすべての要素を選択し (::slotted(*))、それぞれに異なるフォントと色を与えているのが分かるでしょう。これにより、隣のコンテンツが埋まらなかったスロットよりも目立たせることができます。

- -

この要素がページに挿入されると、以下のように見えます。

- -
<person-details>
-  <p slot="person-name">Dr. Shazaam</p>
-  <span slot="person-age">Immortal</span>
-  <span slot="person-occupation">Superhero</span>
-</person-details>
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}{{ Spec2('CSS Scope') }}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.selectors.slotted")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_slotted/index.md b/files/ja/web/css/_doublecolon_slotted/index.md new file mode 100644 index 0000000000..dab52cf344 --- /dev/null +++ b/files/ja/web/css/_doublecolon_slotted/index.md @@ -0,0 +1,111 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +tags: + - '::slotted' + - CSS + - Reference + - ウェブ + - レイアウト + - 疑似要素 +translation_of: 'Web/CSS/::slotted' +--- +
{{ CSSRef }}
+ +

::slotted() は CSS の 疑似要素で、 HTML テンプレート内にあるスロットに配置された任意の要素を表します (詳しくはテンプレートとスロットの利用をご覧ください)。

+ +

これは shadow DOM 内に配置された CSS の中で使われた時のみ機能します。なお、このセレクターはスロット内に配置されたテキストノードは選択しません。実際の要素のみを対象にします。

+ +
/* スロット内に配置された任意の要素を選択 */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* スロット内に配置された <span> 要素を選択 */
+::slotted(span) {
+  font-weight: bold;
+}
+
+ +

構文

+ +{{csssyntax}} + +

例

+ +

以下のコードの断片は slotted-pseudo-element デモから取られたものです (ライブでもご覧ください)。

+ +

このデモでは、３つのスロットを持つ単純なテンプレートを使用します。

+ +
<template id="person-template">
+  <div>
+    <h2>Personal ID Card</h2>
+    <slot name="person-name">NAME MISSING</slot>
+    <ul>
+      <li><slot name="person-age">AGE MISSING</slot></li>
+      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
+    </ul>
+  </div>
+</template>
+ +

カスタム要素 — <person-details> — は以下のように定義されています。

+ +
customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})
+ +

style 要素のコンテンツを埋めると、スロットになるすべての要素を選択し (::slotted(*))、それぞれに異なるフォントと色を与えているのが分かるでしょう。これにより、隣のコンテンツが埋まらなかったスロットよりも目立たせることができます。

+ +

この要素がページに挿入されると、以下のように見えます。

+ +
<person-details>
+  <p slot="person-name">Dr. Shazaam</p>
+  <span slot="person-age">Immortal</span>
+  <span slot="person-occupation">Superhero</span>
+</person-details>
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}{{ Spec2('CSS Scope') }}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.selectors.slotted")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_doublecolon_spelling-error/index.html b/files/ja/web/css/_doublecolon_spelling-error/index.html deleted file mode 100644 index b602c7d4b3..0000000000 --- a/files/ja/web/css/_doublecolon_spelling-error/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: '::spelling-error' -slug: 'Web/CSS/::spelling-error' -tags: - - CSS - - Experimental - - NeedsExample - - Pseudo-element - - Reference - - Web - - 疑似要素 -translation_of: 'Web/CSS/::spelling-error' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の ::spelling-error 疑似要素は、綴りが正しくないと{{glossary("user agent", "ユーザーエージェント")}}が判断したテキスト区間を示します。

- -
::spelling-error {
-  color: red;
-}
- -

利用できるプロパティ

- -

::spelling-error 擬似要素では、一部の CSS プロパティのみが利用できます。

- - - -

構文

- -
::spelling-error
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義。
- -

ブラウザー実装状況

- -
-

{{Compat("css.selectors.spelling-error")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/_doublecolon_spelling-error/index.md b/files/ja/web/css/_doublecolon_spelling-error/index.md new file mode 100644 index 0000000000..b602c7d4b3 --- /dev/null +++ b/files/ja/web/css/_doublecolon_spelling-error/index.md @@ -0,0 +1,70 @@ +--- +title: '::spelling-error' +slug: 'Web/CSS/::spelling-error' +tags: + - CSS + - Experimental + - NeedsExample + - Pseudo-element + - Reference + - Web + - 疑似要素 +translation_of: 'Web/CSS/::spelling-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の ::spelling-error 疑似要素は、綴りが正しくないと{{glossary("user agent", "ユーザーエージェント")}}が判断したテキスト区間を示します。

+ +
::spelling-error {
+  color: red;
+}
+ +

利用できるプロパティ

+ +

::spelling-error 擬似要素では、一部の CSS プロパティのみが利用できます。

+ + + +

構文

+ +
::spelling-error
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}{{Spec2('CSS4 Pseudo-Elements')}}初回定義。
+ +

ブラウザー実装状況

+ +
+

{{Compat("css.selectors.spelling-error")}}

+
+ +

関連情報

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