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

やあ。今日はフロントエンド開発において、最も軽視されがちでありながら、実はアクセシビリティとUXの根幹を担っている `:focus` 擬似クラスについて話をしよう。

中級レベルになると、`div`に`outline: none`を当てるような「事故」は卒業していると思う。だが、「ブラウザ標準のフォーカスリングを消した後の代替案」を、デザインの整合性を保ちながら完璧に実装できているエンジニアは意外と少ない。

CSSの仕様書をなぞるだけなら誰でもできる。現場で求められるのは、「キーボードユーザーを疎外せず、かつブランドの世界観を損なわない」という、相反する要件の高度なバランス調整だ。

—

そもそも、なぜブラウザはデフォルトで「青い枠（アウトライン）」を付けるのか？それは、OSやブラウザが「今、キーボードの操作対象はここですよ」とユーザーに伝えるための、極めて重要な「視覚的フィードバック」だからだ。

ブラウザのレンダリングエンジンは、要素がフォーカスを得た瞬間、DOMのスタックとは別に「フォーカスリング」を描画する。この挙動を安易に `outline: none` で消し去ることは、いわば「目隠しをして迷路を歩かせる」ようなものだ。

プロとして意識すべきは、「フォーカスリングを消すこと」ではなく「フォーカスリングを上書きすること」だ。

—

現場でそのまま使える、アクセシビリティを担保したスタイルの実装例だ。単なる色変えではなく、`box-shadow` を活用することで、CSSのレイアウトを崩さずにリッチなフィードバックを実装する。

/
.button-primary {
padding: 10px 20px;
border: 1px solid #333;
border-radius: 4px;
transition: box-shadow 0.2s ease; / 変化を滑らかに /
}

/
.button-primary:focus {
outline: none; / デフォルトの醜い枠を消す /
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6); / ブランドカラーの影を落とす /
}

/
.button-primary:focus:not(:focus-visible) {
box-shadow: none; / マウス操作時はリングを非表示に /
}

.button-primary:focus-visible {
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6); / キーボード操作時のみ有効 /
}

—

中級から上級へステップアップするなら、必ず `:focus-visible` を覚えておいてほしい。

今のWeb開発では、マウスユーザーとキーボードユーザーの境界線が曖昧だ。クリックしたときにまで派手なフォーカスリングが残っていると、デザインが台無しだと感じるUXデザイナーは多い。しかし、キーボードユーザーにとっては死活問題だ。

`:focus-visible` は、ブラウザが「ユーザーはこの操作をキーボードで行っているか？」を推測し、必要な時だけスタイルを適用してくれる賢い擬似クラスだ。これを活用しない手はない。

CSSにおいて `:focus` は、単なる装飾ではなく「Webのバリアフリー」そのものだ。

もしあなたが今、何気なく `outline: 0` をコードに書こうとしているなら、一度立ち止まって考えてみてほしい。「もし自分が、マウスを使えない状況でこのサイトを操作したら、どこにフォーカスがあるか分かるだろうか？」と。

コードは、常に使う人のためにある。CSSのアーキテクチャを語る以前に、この「誰のための実装か」という視点を忘れないこと。それこそが、現場で愛されるフロントエンドエンジニアの条件だ。

さあ、エディタに戻って、君のプロジェクトのアクセシビリティを少しだけ高めてみてくれ。期待しているよ。