こんにちは。フロントエンドの現場で長年コードを書き続けている者です。
CSSを学び始めたばかりの頃、誰しも一度は「ボタンを押したはずなのに、押している感がない！」というもどかしさを経験するものです。Webサイトにおいて、ボタンはユーザーとサイトが会話するための「握手」のようなもの。その握手の瞬間を、CSSの `:active`（アクティブ擬似クラス）を使って、より心通うものにしてみませんか？
今日は、そんな `:active` の魔法について、専門用語を抜きにしてじっくりとお話ししますね。
—
`:active` って、結局なにもの？
Webサイト上のボタンをマウスで「カチッ」と押したその瞬間。指がマウスを押し込んでいる、その「まさに押している最中」だけに反応するのが `:active` です。
身近な例で言えば、「エレベーターのボタン」をイメージしてください。指でグッと押し込んでいる間だけ、ボタンが少し沈み込んだり、光ったりしますよね。あの「押し込んでいる間」の状態こそが `:active` なんです。
なぜこれが必要なの？
もし `:active` がなかったら、ボタンをクリックしても何も起きません。ユーザーは「あれ？ 今クリックできたのかな？」と不安になってしまいますよね。この「押した手応え」をCSSで表現してあげるだけで、Webサイトの使い心地は劇的に優しくなります。
—
実際に書いてみよう！
まずは、一番シンプルなボタンで試してみましょう。マウスでクリックしている間だけ、ボタンが少し沈み込んだように見える工夫をしてみます。
/ 通常時のボタンのデザイン /
.my-button {
background-color: #3498db;
color: white;
padding: 15px 30px;
border-radius: 8px;
cursor: pointer;
transition: 0.2s; / 変化を滑らかにする魔法の言葉 /
}
/ ★ここがポイント！クリックしている最中のスタイル /
.my-button:active {
background-color: #2980b9; / 少し濃い色にして「沈んだ感」を出す /
transform: translateY(4px); / ボタンを下に少し動かして「押した感」を出す /
}
このコードの「なるほど！」ポイント
- `transform: translateY(4px);`: これが視覚的なトリックです。ボタンを下に4ピクセルだけずらすことで、本当に物理的なボタンを押し込んでいるような錯覚を生みます。
- `transition`: これがないと、パッと瞬時に色が変わってしまい、少し機械的な印象を与えます。0.2秒ほど時間をかけるだけで、指に吸い付くような優しい手触りが生まれるんです。
—
初学者がつまずきやすい「落とし穴」
ここで少しだけ、現場でよくある「あれ、効かない？」というお話をしておきますね。 `:active` を書くときには、順番がとても大切なんです。
CSSには、スタイルを適用する「優先順位」というルールがあります。もしリンクボタンを作るときは、以下の順番で書くのが鉄則です。
1. `:link`（まだ訪れていないリンク）
2. `:visited`（訪れたことがあるリンク）
3. `:hover`（マウスが乗っているとき）
4. `:active`（クリックしているとき）
「あれ？ `:active` を書いたのに動かない！」というときは、この順番が入れ替わっていないか確認してみてください。これ、熟練のエンジニアでもたまにやってしまう「CSSあるある」なので、気にしなくて大丈夫ですよ！
—
最後に：心を通わせるWeb制作を
`:active` は、単なる色の変化かもしれません。でも、この「ちょっとした気遣い」の積み重ねが、使う人にとって「このサイト、なんだか使いやすいな」「押し心地がいいな」という心地よい体験に繋がります。
技術を覚えることも大切ですが、ぜひ「自分がこのボタンを押したとき、どう感じたら嬉しいかな？」という、使う人への想像力を大切にしてみてください。
つまずくことも多いかと思いますが、その分、思い通りの動きが実装できた時の喜びはひとしおです。今日の `:active` が、あなたのWeb制作の引き出しの一つとして、これからたくさん活躍してくれることを願っています。
またいつでも、困ったときはここへ聞きに来てくださいね。応援しています！
コメント