現場で差がつく `:active` の極意：ただ「色を変える」だけで満足していないか？
やあ。今日もフロントエンドの戦場でお疲れ様。
今日は、CSSの基本中の基本、しかし「適当に扱われがち」な `:active` 擬似クラスについて深掘りしようと思う。
「クリックした時に色が変わるやつでしょ？」
そう思った君、もしそうなら、今日でその認識をアップデートしてくれ。`:active` は単なる装飾ではなく、ユーザーの操作に対する「手応え（フィードバック）」を制御する、UXの最前線なんだ。
1. `:active` の正体と、ブラウザの裏側の動き
`:active` は、ユーザーが要素を「押し下げている間」に適用されるスタイルだ。マウスのボタンを押した瞬間から、指を離すまでの、あの刹那の時間を支配する。
ブラウザの内部的な挙動として、`:active` はマウスイベントの `mousedown` と `mouseup` の間で生きている。ここで重要なのは、「`:active` は、フォーカスが外れても、あるいはマウスが要素の上から外れても、押し下げ状態が継続していれば発火し続ける」という仕様だ。
この仕様は、意図しないとバグの温床になる。例えば、ボタンを押したままマウスを少しドラッグして要素の外へ外すと、`:active` が解除される。ユーザーは「まだ押しっぱなし」なのに表示が元に戻る。この「違和感」をどうハンドリングするか。それがプロの腕の見せ所だ。
2. 実務で叩き込まれる「触感」のデザイン
ただ色を変えるだけでは、ボタンの「押し込み感」は伝わらない。現場で重宝されるのは、`transform: scale()` や `box-shadow` を組み合わせた、物理的なフィードバックだ。
以下のコードを見てくれ。これが、僕が実務で「標準」として使っている、少しだけリッチなボタンの定義だ。
.btn {
/ 普段の状態 /
display: inline-block;
padding: 12px 24px;
background-color: #007bff;
color: #fff;
transition: transform 0.1s ease, box-shadow 0.1s ease;
border-radius: 8px;
border: none;
cursor: pointer;
}
/
- 肝心なのはここ。
- 押し込んだ瞬間に少し沈み込み、影を消すことで
- 「物理的に凹んだ」という錯覚を脳に与える。
/
.btn:active {
transform: translateY(2px) scale(0.98);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #0056b3; / ほんの少し暗くして押し込みを強調 /
}
3. 「落とし穴」を避けるためのベストプラクティス
現場で `:active` を扱う際、絶対に注意すべき点が2つある。
① `:active` の順序は「LVHA」の最後尾
CSSの擬似クラスには優先順位がある。`:link`, `:visited`, `:hover`, `:active` の順に記述しないと、ブラウザのキャッシュや仕様によってスタイルが競合する。古い知識かもしれないが、今でもこの「LVHA」の鉄則はデバッグの手間を省くための必須スキルだ。
② モバイル環境での `:active` (タップの瞬間のハイライト)
スマホでボタンをタップした時、デフォルトで青いハイライト（タップハイライト）が出るのを知っているか？ あれはUXを阻害することが多い。以下のプロパティで無効化し、自前の `:active` で制御するのが通のやり方だ。
/ モバイルでのデフォルトのハイライトを殺す /
html {
-webkit-tap-highlight-color: transparent;
}
4. 最後に：CSSは「対話」である
`:active` を設計する時、僕は常に「この要素は、いまユーザーの指の下でどう感じているか？」を想像する。
ボタンがクリックされたことをユーザーが視覚的に確信できること。これが高速なUIの第一歩だ。`:active` を適当に書くエンジニアは「機能」しか作れないが、`:active` を丁寧に作り込むエンジニアは「体験」を作れる。
君が書いたその一行の `:active` が、誰かの操作を少しだけ気持ちよくする。そのこだわりを、これからも忘れないでいてほしい。
何かあればいつでも聞いてくれ。コードの海で、また会おう。
コメント