ようこそ、CSSの世界へ。フロントエンドの現場で長年コードを書き続けてきた私から、これからCSSを学ぶあなたへ、一番大切な「対話」の話をさせてください。
CSSって、ただ色を塗ったり形を作ったりするだけの道具だと思っていませんか？ 実は、ウェブサイトを作るということは、「ブラウザを通したユーザーとのコミュニケーション」そのものなんです。
特に、今回お話しする `:hover` や `:focus` といった「擬似クラス」は、ウェブサイトに「呼吸」や「返事」をさせるための魔法のスパイスです。肩の力を抜いて、一緒に見ていきましょう。
—
ユーザーの気持ちに寄り添う「3つの合図」
想像してみてください。あなたは今、大きなお店に入りました。
店員さんが「いらっしゃいませ」と微笑んでくれたり（ホバー）、商品を手に取ったときに「これ、持ってるな」という感触があったり（アクティブ）、選んだ棚にスポットライトが当たったり（フォーカス）。
ウェブサイトでも、これと同じことをCSSで行います。
1. :hover（マウスが乗ったときの「こんにちは」）
ユーザーがマウスカーソルをボタンやリンクの上に置いたとき、少しだけ見た目を変えることで「ここ、押せますよ！」と教えてあげる合図です。
/ ボタンにマウスが乗った瞬間に色を変える /
.button:hover {
background-color: #ffcc00; / 温かい黄色に変えて、反応を見せる /
cursor: pointer; / マウスカーソルを指の形にして「クリック可能」をアピール /
}
2. :active（クリックした瞬間の「押してるよ！」）
マウスのボタンをグッと押し込んでいる、その一瞬の「沈み込み」を表現します。おもちゃのボタンを押したときの「カチッ」という手応えを視覚的に再現するイメージですね。
/ クリックした瞬間に少しだけボタンを沈ませる /
.button:active {
transform: translateY(2px); / 少し下に動かして、押した感触を出す /
background-color: #e6b800; / さっきより少し濃い色にして、沈んだ影っぽさを演出 /
}
3. :focus（「私を選んでくれてありがとう」）
これは意外と忘れられがちですが、一番大切な「配慮」です。キーボードでタブキーを押して移動したり、スマホで入力欄をタップしたりしたときに「今、ここを選んでますよ！」と枠線などで強調します。これがないと、目の不自由な方やキーボードで操作する方はどこにいるか分からなくなってしまいます。
/ キーボード操作などで選ばれた時に、青い枠線で囲む /
.input-field:focus {
outline: 3px solid #007bff; / どこにいるかハッキリわかるように強調 /
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); / ぼんやり光らせて、優しく知らせる /
}
—
なぜ、これらを使い分けるのが大事なの？
「全部同じ色じゃダメなの？」と聞かれることがあります。でも、考えてみてください。お買い物をしているときに、どの商品に手を伸ばしているのか、今どの棚を見ているのかが分からないお店で、快適に買い物なんてできませんよね。
これらの擬似クラスを適切に設定するだけで、あなたのサイトは「使いやすい」から「心地いい」サイトへと進化します。
つまずきやすいポイント：順番に気をつけて
CSSには「カスケード」というルールがあって、書く順番がとても大事です。特に `:hover` と `:active` を同時に使うときは、少しだけ気をつけてください。
/ 良い例：順番を守ることで、ホバーした上でクリックもできる /
.link:hover { / 1. ホバーした時 / }
.link:active { / 2. クリックした時 / }
もし順番を逆にしたり、書き方を間違えると、反応しなくなってしまうことがあります。最初は「あれ？動かないな」と焦るかもしれませんが、大丈夫。それはあなたが一つ賢くなるための通過儀礼です。
—
最後に：完璧を目指さなくていい
最初はコードが思い通りに動かなくて、イライラすることもあるかもしれません。でも、CSSは「こうなったらいいな」を直接ブラウザに伝える言語です。
まずはボタンの色を変えてみる。次に、押した時に少し動かしてみる。その小さな「返事」が積み重なって、ユーザーが「このサイト、使いやすい！」と感じてくれるようになります。
まずは難しく考えず、今日から一つだけ、ボタンに `:hover` を足してみてください。それだけで、あなたのサイトはもう、以前よりもずっと優しくなっているはずです。
何か困ったことがあったら、いつでもまた聞きに来てくださいね。あなたのその一歩を、心から応援しています。
コメント