こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトです。

CSSを書き始めたばかりの頃って、覚えることがたくさんあって目が回っちゃいますよね。「あれもこれも動かしたい！」とワクワクする反面、「なんか思ってた動きと違う……」って頭を抱える夜もあるはず。大丈夫、みんな最初はそこを通って一人前になっていますから、安心してくださいね。

さて、今回はCSSのなかでも、「アクセシビリティ（みんなに優しいWebサイト作り）」の超・重要人物である `:focus-visible`（フォーカス・ビジブル）という疑似クラスについて、おしゃべりするようにじっくり解説していこうと思います。

なんだか名前からして難しそう？ いやいや、身近な例えですぐに腑に落ちるように説明しますから、肩の力を抜いてコーヒーでも飲みながら読んでいってください。

—

1. まずは「フォーカス」ってなに？ お店のレジに例えてみよう

Webサイトを作っていると、ボタンや入力フォーム（テキストボックス）など、私たちが「カチッとクリックしたり、文字を打ち込んだりできる場所」がたくさん出てきますよね。

この「今、私が操作しようとしてますよ！」とパソコンに選ばれている状態のことを、専門用語で「フォーカスが当たっている」と言います。

身近な例えで考えてみましょう。大きなお買い物施設で、セルフレジの画面を思い浮かべてください。
画面にいろんなボタンがありますが、今どのボタンが選ばれているのか分からないと困っちゃいますよね。だから、今選ばれているボタンの周りがピカッと光ったり、枠で囲まれたりして、「あ、ここを押せるんだな」と分かるようになっています。

Webの世界でも同じです。キーボードの「Tab（タブ）キー」をペタペタと押していくと、リンクやボタンの上を順番に移動できますよね。あの時、今どこにいるかを教えてくれる「青い枠線（アウトライン）」の正体が、まさにフォーカスなんです。

—

2. これまでの悩み：マウス派には「あの枠」、ちょっとジャマじゃない？

ここで、長年Webデザイナーやエンジニアを悩ませてきた「ちょっとしたモヤモヤ」のお話をします。

昔のCSSには、フォーカスされた時の見た目を整えるために、こんな書き方をしていました。

/ ボタンがフォーカスされたら、赤い太枠をつけるよ！ /
button:focus {
outline: 3px solid red;
}

これを書くと、キーボードで操作している人には「今ここにいるよ！」と優しく教えてあげられます。これは大正解。

でも、問題は「マウスやスマホのタッチでカチッとクリックする人」です。
マウスでボタンを押した瞬間にも、この「赤い太枠」がブワッと出てきちゃうんです。マウス派の人からすれば、「いや、今マウスで自分で選んでクリックしたんだから、そんな赤い枠で主張しなくても見れば分かるよ……デザインが崩れてダサいな」って思っちゃいますよね。

だからといって、CSSで `outline: none;` と書いてこの枠を完全に消してしまうと、今度はキーボードだけで画面を操作している目の不自由な方やご高齢の方が、「今、自分はどこを操作しているんだ！？」と完全に迷子になってしまいます。これはアクセシビリティの観点から絶対にやっちゃいけない御法度なんです。

「マウスの人は枠なしでスッキリさせたい！ でも、キーボードの人はしっかり枠で案内したい！」
このワガママをスッと解決してくれる救世主こそが、今回主役の `:focus-visible` なんです。

—

3. `:focus-visible` の魔法：空気を読むスマートな子

`:focus-visible` は、一言でいうと「空気を読んで、本当に枠線が必要な時にだけ現れる忍者」です。

• マウスや指でクリックした時：

「おっ、自分で見て選んだんだな！」と判断して、ジャマな枠線を出しません（スッキリ！）。

• キーボードのTabキーで移動してきた時：

「おっと、画面が見えないかもしれないから、私が場所を教えてあげるね！」と、自動でピカッと枠線を出してくれます（親切！）。

ブラウザ自身が「このユーザーは今、どんな方法で操作しているかな？」と賢く見極めて、必要な時だけに効かせてくれる。それが `:focus-visible` のすごさと優しさです。

—

4. 実践！ 今すぐ使えるやさしいコード例

百聞は一見に如かず。実際にエディタに貼り付けて試せるサンプルコードを見てみましょう。
今回は、とってもシンプルな「検索ボタン」を用意しました。

コードのここがポイント！

1. `.search-btn:focus-visible` と書くことで、キーボード操作の時だけにこのスタイルが適用されます。
2. `outline-offset: 2px;` は、ボタンのフチから少しだけ外側に枠を離すテクニックです。これを入れておくと、デザインがグッとプロっぽくなって見やすくなります。ぜひ真似してみてくださいね。

—

5. チーフからのまとめ ＆ つまずいた時の処方箋

ここまで読んでくれてありがとうございます！
`:focus-visible` の魅力、少しは伝わったでしょうか？

「デザインの美しさ（見た目のスッキリ感）」と「アクセシビリティ（誰でも迷わず使える優しさ）」は、Web制作において永遠のテーマであり、両立させるのが腕の見せどころです。昔の私たち先輩エンジニアは、JavaScriptをわざわざ書いて「今キーボードが押されたかどうか」を判定したりして、それはもう大変な苦労をしていました。

それが今や、CSSを書くだけでブラウザがスマートにやってくれるんです。本当に良い時代になりましたよね。

もし、「あれ？思った通りに枠が出ないぞ？」という時は、ブラウザが古かったり、親要素で思わぬ `outline` の打ち消しが入っていないか確認してみてください。大抵は少しの記述ミスの調整でスルスルと動くようになります。

あなたが作るWebサイトが、デザインも美しく、そしてどんな人にとっても使いやすい優しい場所になりますように。
それでは、次のCSSの旅でお会いしましょう！チーフアーキテクトでした。