From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_focus/index.html | 119 +++++++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/ja/web/css/_colon_focus/index.html (limited to 'files/ja/web/css/_colon_focus') diff --git a/files/ja/web/css/_colon_focus/index.html b/files/ja/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..a363d17db2 --- /dev/null +++ b/files/ja/web/css/_colon_focus/index.html @@ -0,0 +1,119 @@ +--- +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