# :focus-visible

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

- カテゴリ: 擬似クラス
- URL: https://www.css-dictionary.com/property/pseudo-focus-visible/

## 構文

```css
:focus-visible { ... }
```

## Tailwindでは

- バリアント: `focus-visible:` を先頭に付けて使う
- `focus-visible:outline-2` → :focus-visible { outline-width: 2px }
- 補足: 単なるfocus:よりfocus-visible:推奨（マウスクリックではリングを出さない）。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 86+ / Firefox 85+ / Safari 15.4+ / Edge 86+

## コード例

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

```css
button:focus-visible { outline: 2px solid #3b82f6; }
```

### 例2: フォーム入力フィールドのキーボードフォーカス

```css
.input:focus-visible { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
```

## TIPS

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

## よくある間違い

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

## AIがよく間違えるポイント

AIは今でも「フォーカスの枠を消す」ためにoutline: noneを単独提案することがありますが、キーボード利用者への重大なアクセシビリティ破壊です。正解は:focus-visibleで「キーボード操作時だけ」表示する使い分け。マウスクリックでは出ず、Tab移動では出る、という理想の挙動がJSなしで手に入ります。

## AIへの依頼文例

- このoutline: noneだらけのCSSを:focus-visibleベースの安全なフォーカス管理に書き換えて

## 関連プロパティ

- [outline](https://www.css-dictionary.com/property/outline.md)
- [box-shadow](https://www.css-dictionary.com/property/box-shadow.md)
- [pseudo-has](https://www.css-dictionary.com/property/pseudo-has.md)
- [pseudo-focus-within](https://www.css-dictionary.com/property/pseudo-focus-within.md)
- [pseudo-user-valid](https://www.css-dictionary.com/property/pseudo-user-valid.md)