:focus-visible

擬似クラス

要素がキーボードからフォーカスされた場合にのみ適用される擬似クラスです。マウスクリックによるフォーカスには適用されないため、アクセシビリティを向上させながら不要なフォーカスリングを避けられます。

構文

Syntax
:focus-visible { ... }

コード例

1

button:focus-visible { outline: 2px solid #3b82f6; }
実行結果
キーボードフォーカス時のみアウトライン表示
💡 左ボタン:Tabキーでフォーカス時のみアウトライン表示、右ボタン:アウトライン非表示

キーボードフォーカス時のみアウトラインを表示

2

.input:focus-visible { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
実行結果
フォーム入力フィールドのキーボードフォーカス
💡 マウスクリックでは境界線変化なし、Tabキーでフォーカス時のみ色変化

フォーム入力フィールドのキーボードフォーカス

💡 TIPS

アクセシビリティの向上に重要。:focusの代わりに使用することで、マウス操作時の不要なアウトラインを避けながら、キーボード操作時の視認性を確保。

⚠️ よくある間違い

:focusと同じと思い込む。マウスクリックでは適用されないことを理解する。古いブラウザでは動作しないため、フォールバックとして:focusも併用する。

関連プロパティ

ブラウザサポート

Chrome 86+, Firefox 85+, Safari 15.4+