From 0c68616aa46f09d03108f47b71490a4a87517005 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 26 Oct 2021 22:33:59 +0900 Subject: :focus 系の擬似クラスを更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_focus-visible/index.html | 136 ----------------------- files/ja/web/css/_colon_focus-visible/index.md | 136 +++++++++++++++++++++++ files/ja/web/css/_colon_focus-within/index.html | 97 ---------------- files/ja/web/css/_colon_focus-within/index.md | 97 ++++++++++++++++ files/ja/web/css/_colon_focus/index.html | 117 ------------------- files/ja/web/css/_colon_focus/index.md | 117 +++++++++++++++++++ 6 files changed, 350 insertions(+), 350 deletions(-) delete mode 100644 files/ja/web/css/_colon_focus-visible/index.html create mode 100644 files/ja/web/css/_colon_focus-visible/index.md delete mode 100644 files/ja/web/css/_colon_focus-within/index.html create mode 100644 files/ja/web/css/_colon_focus-within/index.md delete mode 100644 files/ja/web/css/_colon_focus/index.html create mode 100644 files/ja/web/css/_colon_focus/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/_colon_focus-visible/index.html b/files/ja/web/css/_colon_focus-visible/index.html deleted file mode 100644 index b0ade4e723..0000000000 --- a/files/ja/web/css/_colon_focus-visible/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: ':focus-visible' -slug: 'Web/CSS/:focus-visible' -tags: - - ':focus' - - ':focus-visible' - - CSS - - Experimental - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:focus-visible' ---- -
{{CSSRef}}
- -

:focus-visible 擬似クラスは、要素が {{CSSxRef(":focus")}} 擬似クラスに一致している時で、{{glossary("User Agent", "ユーザーエージェント")}}が要素にフォーカスを明示するべきであると発見的に指定した場合 (多くのブラウザーではこの場合、「フォーカスリング」を表示します) に適用されます。

- -

このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。

- -

なお、 Firefox は似た機能をより古い接頭辞付きの擬似クラス、 {{CSSxRef(":-moz-focusring")}} で対応しています。

- -

構文

- -{{CSSSyntax}} - -

例

- -

基本的な例

- -

この例では、 :focus-visible セレクターはユーザーエージェントの動作を使用して一致するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、 :focus でスタイル付けされた要素との動作の違いに注意してください。

- -
<input value="Default styles"><br>
-<button>Default styles</button><br>
-<input class="focus-only" value=":focus only"><br>
-<button class="focus-only">:focus only</button><br>
-<input class="focus-visible-only" value=":focus-visible only"><br>
-<button class="focus-visible-only">:focus-visible only</button>
- -
input, button {
-  margin: 10px;
-}
-
-.focus-only:focus {
-  outline: 2px solid black;
-}
-
-.focus-visible-only:focus-visible {
-  outline: 4px dashed darkorange;
-}
-
- -

{{EmbedLiveSample("Basic_example", "100%", 300)}}

- -

フォーカスインジケーターの選択的な表示

- -

カスタムコントロール、例えば カスタム要素ボタンなどは、 :focus-visible を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは {{htmlelement("button")}} のようなコントロールのネイティブのフォーカスの動作に一致します。

- -
<custom-button tabindex="0" role="button">Click Me</custom-button>
- -
custom-button {
-  display: inline-block;
-  margin: 10px;
-}
-
-custom-button:focus {
-  /* Provide a fallback style for browsers
-     that don't support :focus-visible */
-  outline: none;
-  background: lightgrey;
-}
-
-custom-button:focus:not(:focus-visible) {
-  /* Remove the focus indicator on mouse-focus for browsers
-     that do support :focus-visible */
-  background: transparent;
-}
-
-custom-button:focus-visible {
-  /* Draw a very noticeable focus style for
-     keyboard-focus on browsers that do support
-     :focus-visible */
-  outline: 4px dashed darkorange;
-  background: transparent;
-}
- -

{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}

- -

ポリフィル

- -

focus-visible.js を使用して :focus-visible のポリフィルにすることができます。

- -

アクセシビリティの考慮

- -

弱視

- -

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

- - - -

認知障碍

- -

人が形式が混在した入力フィールドを使用している場合、フォーカスインジケーターが表示されたり消えたりする理由が明確に分からないかもしれません。認知的な懸念のあるユーザーや技術的なリテラシーの低いユーザーにとっては、対話的要素が一貫した動作をしていないと、混乱を招くかもしれません。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.focus-visible")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_focus-visible/index.md b/files/ja/web/css/_colon_focus-visible/index.md new file mode 100644 index 0000000000..b0ade4e723 --- /dev/null +++ b/files/ja/web/css/_colon_focus-visible/index.md @@ -0,0 +1,136 @@ +--- +title: ':focus-visible' +slug: 'Web/CSS/:focus-visible' +tags: + - ':focus' + - ':focus-visible' + - CSS + - Experimental + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus-visible' +--- +
{{CSSRef}}
+ +

:focus-visible 擬似クラスは、要素が {{CSSxRef(":focus")}} 擬似クラスに一致している時で、{{glossary("User Agent", "ユーザーエージェント")}}が要素にフォーカスを明示するべきであると発見的に指定した場合 (多くのブラウザーではこの場合、「フォーカスリング」を表示します) に適用されます。

+ +

このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。

+ +

なお、 Firefox は似た機能をより古い接頭辞付きの擬似クラス、 {{CSSxRef(":-moz-focusring")}} で対応しています。

+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

基本的な例

+ +

この例では、 :focus-visible セレクターはユーザーエージェントの動作を使用して一致するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、 :focus でスタイル付けされた要素との動作の違いに注意してください。

+ +
<input value="Default styles"><br>
+<button>Default styles</button><br>
+<input class="focus-only" value=":focus only"><br>
+<button class="focus-only">:focus only</button><br>
+<input class="focus-visible-only" value=":focus-visible only"><br>
+<button class="focus-visible-only">:focus-visible only</button>
+ +
input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+
+ +

{{EmbedLiveSample("Basic_example", "100%", 300)}}

+ +

フォーカスインジケーターの選択的な表示

+ +

カスタムコントロール、例えば カスタム要素ボタンなどは、 :focus-visible を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは {{htmlelement("button")}} のようなコントロールのネイティブのフォーカスの動作に一致します。

+ +
<custom-button tabindex="0" role="button">Click Me</custom-button>
+ +
custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Provide a fallback style for browsers
+     that don't support :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}
+ +

{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}

+ +

ポリフィル

+ +

focus-visible.js を使用して :focus-visible のポリフィルにすることができます。

+ +

アクセシビリティの考慮

+ +

弱視

+ +

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

+ + + +

認知障碍

+ +

人が形式が混在した入力フィールドを使用している場合、フォーカスインジケーターが表示されたり消えたりする理由が明確に分からないかもしれません。認知的な懸念のあるユーザーや技術的なリテラシーの低いユーザーにとっては、対話的要素が一貫した動作をしていないと、混乱を招くかもしれません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.focus-visible")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_focus-within/index.html b/files/ja/web/css/_colon_focus-within/index.html deleted file mode 100644 index c3c4b07970..0000000000 --- a/files/ja/web/css/_colon_focus-within/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: ':focus-within' -slug: 'Web/CSS/:focus-within' -tags: - - ':focus' - - ':focus-within' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -translation_of: 'Web/CSS/:focus-within' ---- -
{{CSSRef}}
- -

CSS の :focus-within 擬似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。 (これはシャドウツリーにおける子孫も含みます。)

- -
/* 子孫要素の一つにフォーカスがある <div> を選択 */
-div:focus-within {
-  background: cyan;
-}
- -

このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} を強調する場合に便利です。

- -

構文

- -{{CSSSyntax}} - -

例

- -

この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

- -

HTML

- -
<p>このフォームに入力してみてください。</p>
-
-<form>
-  <label for="given_name">名前:</label>
-  <input id="given_name" type="text">
-  <br>
-  <label for="family_name">苗字:</label>
-  <input id="family_name" type="text">
-</form>
- -

CSS

- -
form {
-  border: 1px solid;
-  color: gray;
-  padding: 4px;
-}
-
-form:focus-within {
-  background: #ff8;
-  color: black;
-}
-
-input {
-  margin: 4px;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples", 500, 150)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.selectors.focus-within")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_focus-within/index.md b/files/ja/web/css/_colon_focus-within/index.md new file mode 100644 index 0000000000..c3c4b07970 --- /dev/null +++ b/files/ja/web/css/_colon_focus-within/index.md @@ -0,0 +1,97 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - ':focus' + - ':focus-within' + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

CSS の :focus-within 擬似クラスは、フォーカスを持っているか、フォーカスを持った要素を含む要素を表します。言い換えれば、それ自身が {{CSSxRef(":focus")}} 擬似クラスに該当するか、子孫に :focus に該当する要素がある要素を表します。 (これはシャドウツリーにおける子孫も含みます。)

+ +
/* 子孫要素の一つにフォーカスがある <div> を選択 */
+div:focus-within {
+  background: cyan;
+}
+ +

このセレクターは、よくある例のように、 {{HTMLElement("input")}} 欄の一つにユーザーがフォーカスを置いたときに、それを含む {{HTMLElement("form")}} を強調する場合に便利です。

+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

この例では、何れかの入力欄にフォーカスが当たった時、特殊な色のスタイルにします。

+ +

HTML

+ +
<p>このフォームに入力してみてください。</p>
+
+<form>
+  <label for="given_name">名前:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">苗字:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", 500, 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.selectors.focus-within")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/_colon_focus/index.html b/files/ja/web/css/_colon_focus/index.html deleted file mode 100644 index 01c4077455..0000000000 --- a/files/ja/web/css/_colon_focus/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: ':focus' -slug: 'Web/CSS/:focus' -tags: - - CSS - - Layout - - Reference - - Web - - ウェブ - - セレクター - - レイアウト - - 擬似クラス - - 疑似クラス -translation_of: 'Web/CSS/:focus' ---- -
{{CSSRef}}
- -

:focus は CSS の 擬似クラスで、フォーカスを持っている (フォームの入力のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの［タブ］キーで選択したりしたときです。

- -
/* フォーカスを持つ <input> 要素を選択 */
-input:focus {
-  color: red;
-}
- -
-

メモ: この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を含む要素を選択したい場合は、 {{CSSxRef(":focus-within")}} を使用してください。

-
- -

構文

- -{{CSSSyntax}} - -

例

- -

HTML

- -
<input class="red-input" value="I'll be red when focused."><br>
-<input class="blue-input" value="I'll be blue when focused.">
- -

CSS

- -
.red-input:focus {
-  background: yellow;
-  color: red;
-}
-
-.blue-input:focus {
-  background: yellow;
-  color: blue;
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

アクセシビリティの考慮事項

- -

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

- - - -

:focus { outline: none; }

- -

WCAG 2.1 SC 1.4.11 Non-Text Contrast を満たすフォーカスの輪郭線で置き換えることなく、フォーカスの輪郭線 (視覚的なフォーカスインジケーター) を単に削除しないでください。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}HTML に依存した意味論を定義。
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}変更なし。
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}変更なし。
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}初回定義。
- -

ブラウザーの互換性

- -
-

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

-
- -

関連情報

- - diff --git a/files/ja/web/css/_colon_focus/index.md b/files/ja/web/css/_colon_focus/index.md new file mode 100644 index 0000000000..01c4077455 --- /dev/null +++ b/files/ja/web/css/_colon_focus/index.md @@ -0,0 +1,117 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Reference + - Web + - ウェブ + - セレクター + - レイアウト + - 擬似クラス + - 疑似クラス +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

:focus は CSS の 擬似クラスで、フォーカスを持っている (フォームの入力のような) 要素を表します。普通はユーザーが要素をクリックやタップをしたり、キーボードの［タブ］キーで選択したりしたときです。

+ +
/* フォーカスを持つ <input> 要素を選択 */
+input:focus {
+  color: red;
+}
+ +
+

メモ: この擬似クラスはフォーカスを持つ要素に対してのみ適用されます。フォーカスを持つ要素を含む要素を選択したい場合は、 {{CSSxRef(":focus-within")}} を使用してください。

+
+ +

構文

+ +{{CSSSyntax}} + +

例

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

アクセシビリティの考慮事項

+ +

視覚的なフォーカスインジケーターが、弱視の人々からも見えるように確認してください。これは外光が明るい場所 (太陽の下の屋外など) で画面を使用するすべての人にも利益になります。 WCAG 2.1 SC 1.4.11 Non-Text Contrast は、視覚的なフォーカスインジケーターを少なくとも 3:1 にすることを要求しています。

+ + + +

:focus { outline: none; }

+ +

WCAG 2.1 SC 1.4.11 Non-Text Contrast を満たすフォーカスの輪郭線で置き換えることなく、フォーカスの輪郭線 (視覚的なフォーカスインジケーター) を単に削除しないでください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}HTML に依存した意味論を定義。
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}変更なし。
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}変更なし。
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}初回定義。
+ +

ブラウザーの互換性

+ +
+

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

+
+ +

関連情報

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