こんにちは。Webの世界へようこそ！
CSSを学び始めると、「あれもこれも動かしたい！」というワクワク感と同時に、「思うように色がついてくれない…」という小さな挫折もセットでやってきますよね。大丈夫、それはみんな通る道です。
今日は、そんな皆さんのモヤモヤを魔法のように解決してくれる、ちょっと頼もしいCSSの機能「`:focus-within`（フォーカス・ウィズイン）」についてお話しします。
—
「お父さん、誰か来たよ！」と教えてくれる合図
CSSには、ボタンや入力欄にカーソルが当たった（フォーカスした）ときにスタイルを変える `:focus` という便利なものがあります。でも、これだけだと「そのボタンそのもの」しか見てくれません。
ここで登場するのが `:focus-within` です。
これは、「自分自身、もしくは自分の子分（子要素）がフォーカスされたら、自分（親）の見た目も変えるよ！」という、いわば「親分気質なセレクタ」なんです。
たとえば、こんなお買い物のシーンを想像してみて
皆さんがネットショッピングで住所を入力しているときを思い浮かべてください。
入力欄（フォーム）をクリックすると、周りの枠線がパッと光ったり、背景色が少し変わったりして「今、ここを入力中ですよ！」と教えてくれるサイト、ありますよね。
あれを `:focus` だけで作ろうとすると、入力欄（input）にしか色がつきません。でも、`:focus-within` を使えば、「入力欄を囲んでいる箱（親要素）」全体を光らせることができるんです。
「中身が何かに集中しているなら、親である自分も一緒に背筋を伸ばして目立とう！」という感じですね。
—
実際にコードを書いてみよう
百聞は一見にしかず。まずは、一番よくある「入力フォームのグループ化」で試してみましょう。
/ 親となるボックス（フォームの枠組み） /
.form-group {
padding: 10px;
border: 2px solid #ccc; / 最初は控えめなグレー /
border-radius: 8px;
transition: all 0.3s; / スッと色がつくようにアニメーション /
}
/ ★ここがポイント！ /
/ .form-group の中にあるどれか（inputなど）がフォーカスされたら /
.form-group:focus-within {
border-color: #ff9f43; / 鮮やかなオレンジに変化！ /
background-color: #fff9f0; / 背景もほんのり色づけて強調 /
}
/ 中身の入力欄はシンプルに /
input {
border: none;
outline: none; / デフォルトの青い枠線を消す /
}
どうでしょう？ `input` をクリックした瞬間に、外側の `div` が「おっ、うちの部下が忙しくなったな！」と反応して色が変わるはずです。これだけで、一気にプロっぽいUIになりますよね。
—
なぜこれが「神機能」なのか？
初心者の方が一番つまずきやすいのは、「特定の要素だけをスタイリングしようとして、HTMLの構造を無理やり変えてしまうこと」です。
昔は、これと同じことをしようとすると、JavaScriptで「フォーカスされたらクラスを追加して…」といった面倒なプログラムを書く必要がありました。でも、`:focus-within` ならCSSだけで完結します。
- コードが汚れない： 余計なクラス名をHTMLに足さなくていい。
- メンテナンスが楽： CSSファイルに書くだけで、サイト全体をスマートに制御できる。
- アクセシビリティに優しい： キーボードで操作しているユーザーにも、「今どこを触っているか」が視覚的にハッキリ伝わります。
—
最後に：小さな「なるほど！」を積み重ねよう
CSSは、一度にすべてを覚えようとするとパンクしてしまいます。でも、こうやって「あ、これを使えばあのサイトみたいな動きができるかも！」という引き出しを一つずつ増やしていくのが、上達の最短ルートです。
`:focus-within` は、いわば「全体を見守る優しいお父さん」のような存在。ぜひ皆さんのサイトでも、フォームやナビゲーションメニューで使ってみてください。
「あれ？ 動かないな？」と思ったら、それはCSSの書き間違いというより、HTMLの構造（親子関係）が少しズレているだけかもしれません。そんな時は、ブラウザの「検証ツール（デベロッパーツール）」を開いて、どこが親でどこが子なのか、宝探しみたいに確認してみてくださいね。
皆さんのWeb制作が、今日よりも少しだけ楽しくなりますように！応援しています！
コメント