こんにちは。CSSという広大な森へようこそ。
Webサイトを作っていると、ボタンや入力フォームを作った時に「あれ？なんか変な枠線が出てるな…」と邪魔に感じたことはありませんか？ まるで、せっかく綺麗にデザインしたお店の入り口に、突然ド派手な黄色いテープが貼られたような気分になる、あの現象です。
今回は、その「邪魔者」だと思っていた枠線を、実は「最高の心遣い」に変身させてしまう魔法、CSSの `:focus-visible` についてお話しします。
—
あの「青い枠線」の正体を知っていますか？
Webサイト上のボタンや入力欄をクリック（またはタブキーで移動）したとき、周りに青い線が出るのを見たことがあるはずです。あれは「アウトライン」と呼ばれるもので、ブラウザが「今、ここが選ばれていますよ！」と教えてくれている親切なサインなんです。
目の不自由な方や、マウスを使わずにキーボードだけで操作する方にとっては、この線がないと「今どこを操作しているのか」が全く分からなくなってしまいます。いわば、暗闇の中で手探りでスイッチを探すようなものですね。
だからといって、デザインにこだわりたい私たちは「この枠線、消したいな…」と思ってしまう。そこで昔からよく使われてきたのが、`outline: none;` という「枠線を消す呪文」です。でも、これをやると、アクセシビリティ（使いやすさ）という大切な橋を焼き払うことになってしまうんです。
—
そこで登場！ `:focus-visible` という「空気の読める」相棒
ここで登場するのが、今日の本題 `:focus-visible` です。
これは、ただの `:focus`（フォーカスされている状態）とは一味違います。
- `:focus`：とにかく「今選ばれている」なら、どんな時でも枠線を出す。
- `:focus-visible`：「キーボードで操作している時」だけ、枠線を出す。
そう、マウスでクリックした時はあえて枠線を消してスッキリさせ、キーボードで操作している時だけ「ここですよ！」と主張してくれる。まさに、状況に合わせて空気を読んでくれる最高の相棒なんです。
実際にコードで見てみましょう
まずは、エディタを開いて、こんなふうに書いてみてください。
/ ボタンのデフォルトの枠線を消す（デザインを壊さないため） /
button {
outline: none;
}
/
キーボードでフォーカスが当たった時だけ、
少しお洒落な枠線を表示する設定です！
/
button:focus-visible {
/ 枠線を太めにして、色を強調してみましょう /
outline: 3px solid #ff6b6b;
/ 枠線とボタンの間に少し隙間を作ると、よりプロっぽい見栄えになります /
outline-offset: 2px;
}
たったこれだけで、マウスでクリックした時はスマートに、キーボードで操作する人には優しく、という両立が可能になります。
—
なぜ、これを使うことが大切なの？
Webの世界は、みんなのための場所です。
「デザインが綺麗だから」という理由で枠線を全部消してしまうと、キーボードでしか操作できない人にとっては、途端に使いにくいサイトになってしまいます。
`:focus-visible` を使うことは、「こだわり」と「優しさ」の両方を手に入れることです。
- デザインへのこだわり：マウス操作時のノイズを消し、ブランドの世界観を守る。
- ユーザーへの優しさ：必要な人にだけ、操作のヒントを届ける。
このバランスこそが、世界最高峰のフロントエンド・スペシャリストたちが常に大切にしている「プロフェッショナリズム」の第一歩なんです。
—
最後に：小さな工夫が、大きな安心を作る
最初からすべてを完璧にする必要はありません。まずは、あなたが作ったボタンの一つにこの `:focus-visible` を当てはめてみてください。そして、一度マウスを置いて、キーボードの「Tab」キーだけでそのボタンまで移動してみてください。
「あ、ちゃんと自分に教えてくれている！」
そう感じられた時、きっとあなたはCSSの本当の面白さに一歩近づいたはずです。
もしコードがうまく動かなかったり、迷ったりしても大丈夫。Web制作は、そんな小さな試行錯誤の積み重ねです。いつでもまた、ここへ聞きに来てくださいね。あなたのコードが、誰かにとっての「使いやすい場所」になりますように。応援しています！
コメント