こんにちは！フロントエンドの現場を長年フラフラと……もとい、渡り歩いてきたチーフアーキテクトの私です。
CSSを書き始めたばかりの頃って、次から次へと出てくる呪文のようなセレクタに「うわ、また新しいの覚えなきゃいけないの……？」って、めまいがしそうになりますよね。すごくよく分かります。私も昔は、ブラウザの向こう側にいる見えない仕様と毎晩ひとりで格闘していました。
でも、安心してください。今日お話しする `:focus`（フォーカス）疑似クラス は、私たちが普段の生活で何気なくやっている「あ、今ここに意識が向いてるな」という感覚を、そのままそっくりWebの世界に持ち込んでくれる、すごく優しくて頼れるやつなんです。
難しく考えず、まずは身近なところからおしゃべりする感覚で紐解いていきましょうか。
—
1. `:focus` って、そもそも何をしているの？
身の回りのものを思い浮かべてみてください。
例えば、会社のデスクにあるホチキスや、スマホの画面、あるいはスーパーのレジ待ちで「ここに並んでね」と足元に貼ってある黄色いテープ。
人間は、何かに意識を向けたり、これからアクションを起こそうとするとき、そこに「スポットライト」を当てますよね。
Webの世界でもまったく同じです。
今、マウスでクリックした入力欄や、キーボードの「Tab」キーをポチポチ押しながら「あ、今ここにカーソルが当たってるな」とシステムが認識している、まさにその「今、注目されている状態」のこと。それをピンポイントで捉えて、お化粧（スタイル）を施してくれるのが `:focus` なんです。
よく初心者の頃にやりがちなのが、「ボタンや入力欄は、ただHTMLタグを書けばいいや」という思い込み。もちろんそれでも動くには動くんですが、マウスを使わない人（例えば、目の不自由な方や、キーボード操作のほうが得意なパワーユーザーなど）にとって、「今、画面のどこに自分がいるのか」が分からないWebサイトは、まるで真っ暗闇の中を手探りで歩かされているようなものなんです。
だからこそ、`:focus` を使って「私、ここにいまっせ！」と優しく教えてあげることは、デザインのおしゃれさ云々の前に、Webの優しさ（アクセシビリティ）そのものなんですね。
—
2. 実践！ `:focus` で「ここにいるよ」を教えてあげよう
百聞は一見にしかず。実際にコードを見てみましょう。
今回は、Webサイトで一番よく見かける「お問い合わせ用の入力フォーム（input）」を例に取りますね。
まずは、そのままコピペしてエディタで動かせる完全なサンプルコードを用意しました。
このコードをブラウザで開いて、入力欄をマウスでカチッとクリックしてみてください。
どうですか？ 枠線の色がキリッと変わり、背景がふんわりと色づき、さらにまわりに優しい光（シャドウ）が広がったはずです。
これが `:focus` の魔法です。「あ、今この箱に文字が書けるんだな」ということが、視覚的にひと目で分かるようになりますよね。
—
3. 現場でよくある「つまずきポイント」と、プロの小言
さて、ここまで読んで「よし、さっそく自分のサイトにも書いてみよう！」と思ったあなたへ。現場のシニアから、ほんの少しだけ大切なアドバイス（というか、初心者が絶対ハマる罠の回避策）をさせてください。
その1：「`outline: none;`」の呪縛に気をつけて！
先ほどのコードの中に、こんな記述があったのを覚えていますか？
outline: none; / ブラウザ標準の青い枠線をいったん消す /
実は、多くのブラウザ（ChromeやSafariなど）は、要素がフォーカスされると、デフォルトで「ぶっとい青やオレンジの枠線」を勝手につけてくれます。デザイナーさんから「このダサい青い枠、消して！」と頼まれるのは、フロントエンドあるあるの日常茶飯事です。
だからといって、何も考えずに `outline: none;` で消すだけ消して、代わりのスタイルを用意しないのは、アクセシビリティの観点から大NG！
キーボードだけで操作しているユーザーが、今どこにいるのか分からなくなって迷子になってしまいます。
> ★プロの合言葉：
> 「消すなら、必ず自分の手で、もっと可愛い（分かりやすい）代わりの枠線を作ってあげること！」
> さきほどのサンプルコードのように、`border` の色を変えたり、`box-shadow` で光らせたりして、「代わりの目印」を必ず用意してあげてくださいね。
その2：マウス派とキーボード派の両方を想う
最近は、 `:focus-visible` という、さらに進化版の疑似クラスもよく使われます。
「マウスでクリックした時は枠線を出さなくていいけど、キーボードのTabキーで移動してきた時だけに枠線を出したい！」という、ちょっとわがままだけどすごく親切な願いを叶えてくれるスーパーマンです。
もしCSSに少し慣れてきたら、`:focus` の代わりに `:focus-visible` も調べてみてください。世界がもっと広がりますよ。
—
4. おわりに
CSSの疑似クラスって、最初は英単語ばかりで難しく感じるかもしれません。
でも、`:focus` は、画面の向こう側にいる「ユーザーの居場所」をそっと照らしてあげる、優しさのスイッチです。
「ここに注目してほしいな」
「今、私を操作してくれてありがとう」
そんな作り手の温かい気持ちをコードに乗せるだけで、ただの無機質なWebサイトが、ぐっと人間味のある、使い心地のいい場所に生まれ変わります。
最初はうまくいかなくても大丈夫。少しずつ、自分の手で動かしながら感覚をつかんでいってくださいね。あなたのコーディングライフを、心から応援しています！
コメント