【入門編】 フォーカス擬似クラス :focus – CSS実践ガイド

こんにちは！フロントエンドの世界へようこそ。
CSSを触り始めたばかりの頃って、まるで魔法使いになったようなワクワク感がある反面、「あれ？なんで動かないの？」なんて壁にぶつかって、ちょっと自信をなくす瞬間もありますよね。

でも、大丈夫。CSSの道はみんなそこから始まっています。今日は、Webサイトの「優しさ」を司る大切な魔法、`:focus`（フォーカス擬似クラス）について、一緒に紐解いていきましょう。

—

そもそも「フォーカス」って何？

Webの世界における「フォーカス」とは、言い換えるなら「今、この要素が主役ですよ！」という合図のことです。

想像してみてください。あなたは今、大きなショッピングモールの案内板の前に立っています。たくさんのボタンがある中で、あなたが「ここを押そうかな」と指を近づけたとき、そのボタンがポッと光ったり、枠が太くなったりしたら、「あ、これなら押せるんだな」って安心して操作できますよね。

この「安心感」をWebサイトに持たせてくれるのが、`:focus`の役割なんです。

なぜ `:focus` が必要なの？

もし、あなたがマウスを使えない状況だったとしたらどうでしょう？ キーボードの「Tabキー」を使って、Webサイトのリンクや入力欄を移動していくはずです。

そのとき、もしどこにフォーカスがあるのか分からなかったら……。どこにいるのか迷子になってしまいますよね。`:focus` を使って「今、ここにいますよ！」と明示してあげることは、アクセシビリティ（誰にとっても使いやすいこと）の第一歩なんです。

実践！ `:focus` で「主役」を際立たせよう

まずは、一番シンプルな入力欄（input）で試してみましょう。

/ 普段の状態 /
input {
border: 2px solid #ccc;
padding: 10px;
border-radius: 5px;
}

/ ここが魔法のポイント！ /
/ フォーカスされた瞬間に枠線を青く、少し太くします /
input:focus {
outline: none; / ブラウザ標準の青い枠を一度消す /
border-color: #3498db; / 枠線を青色に /
box-shadow: 0 0 8px rgba(52, 152, 219, 0.5); / ふわっと光る影を追加 /
}

このコードをエディタに貼り付けて、ブラウザで入力欄をクリックしてみてください。「おっ、反応した！」と実感できるはずです。

覚えておいてほしい「落とし穴」

ここで一つだけ、現場でよくある失敗談をシェアしますね。

「`outline: none;` を適当に使いすぎないこと」

よくネットの記事で「デフォルトの青い枠がダサいから消そう！」と紹介されていますが、何も対策せずに消してしまうと、キーボード操作でサイトを見ている人が「今どこを操作しているか」全く分からなくなります。

`outline: none;` でデフォルトを消したら、必ず `box-shadow` や `border` で「代わりの光り方」を用意してあげてくださいね。それがプロの気遣いというものです。

応用編：リンクだって「主役」になれる

ボタンや入力欄だけでなく、リンク（``タグ）にも `:focus` を使うと、サイトの操作性がグッと上がります。