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 --- files/ja/web/css/_doublecolon_selection/index.html | 131 --------------------- 1 file changed, 131 deletions(-) delete mode 100644 files/ja/web/css/_doublecolon_selection/index.html (limited to 'files/ja/web/css/_doublecolon_selection/index.html') 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")}}

- -

関連情報

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