【実務・中級編】フォーカス可視擬似クラス :focus-visible – CSS実践ガイド

「とりあえず `outline: none;` しておけばデザイン崩れないだろ？」……もし後輩がコードレビューでそんなことを言っていたら、私はその場でPCを閉じさせるかもしれない。

フロントエンドの現場において、アクセシビリティとデザインのバランスは永遠の課題だ。デザイナーがこだわった美しいUIに、ブラウザ標準のあの太くて野暮ったい青い枠線（フォーカスリング）が乗っかると、確かに「うわっ」となる気持ちはわかる。しかし、それを単に消すのは「キーボードユーザーを無視する」という、プロとしてあってはならない怠慢だ。

そこで登場するのが `:focus-visible` だ。今日は、この現代CSSの必須知識について、現場の勘所を交えて深掘りしていく。

—

1. なぜ `:focus` ではなく `:focus-visible` なのか？

かつて、僕らは `:focus` を制御するために血眼になっていた。しかし、`:focus` は「マウスでクリックした時」も「キーボードでタブ移動した時」も等しく反応してしまう。

結果として、クリック時に出る不格好な枠線を消すために `outline: none` を書く。すると今度は、キーボードで操作するユーザーが「今どこにフォーカスがあるか」を完全に見失う。これはアクセシビリティの観点からは致命的な欠陥だ。

`:focus-visible` は、ブラウザが「この要素に視覚的なインジケーターを表示すべきかどうか」を推論してくれるという極めて優秀な擬似クラスだ。

ブラウザが裏側でやっていること

ブラウザは、ユーザーの入力モードを常に監視している。

マウス操作: 「意図的にクリックしたんだから、わざわざ枠線で強調しなくてもわかるでしょ？」という判断（インジケーターを非表示）。
キーボード操作: 「タブ移動でここに来たんだな。視覚的な手がかりがないと迷子になるよね」という判断（インジケーターを表示）。

この「空気の読み方」をCSS側で制御できるようになったおかげで、僕らは「マウスユーザーには美しく、キーボードユーザーには親切なUI」を両立できるようになったんだ。

—

2. 現場で使える「最強のデフォルト設定」

実務で私が必ずと言っていいほどグローバルCSS（あるいはリセットCSSの直後）に入れている設定がこれだ。まずはこれをエディタに貼ってほしい。

1. まずブラウザ標準の枠線を一度リセットする。
ただし、ユーザーエージェントスタイルを完全に殺さないよう注意が必要。

/
:focus:not(:focus-visible) {
outline: none;
}

2. キーボード操作によるフォーカス時のみ、
デザイナーが指定した「ブランドカラーの枠線」を適用する。

/
:focus-visible {
outline: 3px solid var(–color-primary);
outline-offset: 2px;
/

outline-offsetを使うのがコツだ。
これで要素から少し離れた位置に枠線が描画されるので、
ボタンのデザインを損なわずに視認性を確保できる。

/
}

このコードのポイントは、`:focus:not(:focus-visible)` というセレクタの使い方にある。「フォーカスはされているが、それが `:focus-visible` ではない時（＝マウス操作時）」という条件で `outline` を消す。これが一番スマートな解決策だ。

—

3. 実践：カスタムボタンでの活用例

例えば、`div` や `span` に `tabindex=”0″` を与えて無理やりボタンにするような、少し複雑なコンポーネントを作る時こそ、このプロパティが真価を発揮する。

.custom-button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
transition: background-color 0.2s;
}

/ マウスホバー時はシンプルに色を変えるだけ /
.custom-button:hover {
background-color: #555;
}

/ キーボードで到達した時だけ、特別なエフェクトを出す /
.custom-button:focus-visible {
outline: 2px solid #000;
outline-offset: 4px;
box-shadow: 0 0 0 2px #fff; / 枠線を二重にして視認性を高めるテクニック /
}

—

4. 最後に：エンジニアとしての矜持

CSSにおいて `:focus-visible` を使いこなすことは、単なるコーディングスキルの向上ではない。「誰がこのサービスを使うのか」という想像力の証明だ。

マウスしか使わないユーザー、画面読み上げソフトを使うユーザー、あるいはマウスが故障してキーボードで操作せざるを得ないユーザー。彼らにとって、あなたの書いたCSSが「迷い」を解決する灯台になる。

「なんとなく `outline: none` で消しておこう」という安直な選択から卒業して、`:focus-visible` という繊細な武器を使いこなしてほしい。それが、フロントエンドのスペシャリストとしての第一歩だ。

何か実装で詰まったら、いつでも聞いてくれ。現場のコードは、綺麗に書くだけじゃなく、使う人に優しくないと意味がないからな。