疑似クラス :active を“気持ちよく理解する”
:active は、ユーザーが 「クリックして押している瞬間」 を表す疑似クラスです。
ボタンやリンクを押したときに、少し沈んだり色が変わったりする“押し心地”を作るために使います。
UI の質感を高めるために欠かせないセレクタなので、初心者のうちにしっかり理解しておくと CSS が一段レベルアップします。
CSS と Tailwind CSS の両方で、実務レベルの書き方をかみ砕いて解説します。
:active の基本文法を理解する
CSS の基本形
.button {
background: #3490dc;
color: white;
padding: 12px 20px;
border-radius: 6px;
transition: transform 0.1s;
}
.button:active {
transform: scale(0.96);
}
HTML
<a class="button">ボタン</a>
クリックした瞬間に少し縮んで「押した感」が出ます。
深掘り：:active は“ほんの一瞬”だけ発動する
- マウスを押した瞬間
- スマホでタップした瞬間
- キーボードで Enter を押した瞬間
この短い時間だけスタイルが変わります。
hover → 触ったとき
focus → 選択したとき
active → 押した瞬間
この違いを理解すると、UI の設計が一気に楽になります。
Tailwind では active: プレフィックスで指定します。
<a class="bg-blue-500 text-white px-5 py-3 rounded active:scale-95">
ボタン
</a>
:active を使った UI の基本パターン
ボタンを押したときに沈ませる
CSS版
.btn {
background: #38a169;
color: white;
padding: 10px 16px;
border-radius: 6px;
transition: transform 0.1s;
}
.btn:active {
transform: translateY(2px);
}
Tailwind版
<button class="bg-green-500 text-white px-4 py-2 rounded transition active:translate-y-0.5">
決定
</button>
ボタンの色を押した瞬間だけ濃くする
CSS版
.btn {
background: #3182ce;
}
.btn:active {
background: #2b6cb0;
}
Tailwind版
<button class="bg-blue-500 active:bg-blue-600 text-white px-4 py-2 rounded">
送信
</button>
カードをタップしたときに軽く縮ませる（スマホ向け）
CSS版
.card {
transition: transform 0.1s;
}
.card:active {
transform: scale(0.97);
}
Tailwind版
<div class="p-5 bg-white rounded-xl transition active:scale-95">
カード内容
</div>
:active の重要ポイント（深掘り）
1. :active は hover より短い
:hover はカーソルを乗せている間ずっと発動しますが、:active は 押している間だけ です。
- hover → 触っている間
- active → 押している間（離したらすぐ戻る）
この違いを意識すると、UI の動きが自然になります。
2. transition と組み合わせると“押し心地”が出る
CSS版
.button {
transition: transform 0.1s;
}
Tailwind版
<button class="transition active:scale-95">…</button>
active の変化は「急に変わる」より「滑らかに変わる」方が圧倒的に気持ちいい。
3. active はスマホでも発動する
hover はスマホで効きませんが、
active はタップ時に発動します。
スマホ UI の質感を上げるためにとても重要です。
4. active は「押せる要素」にだけ付ける
div:active を乱用すると、
押せない場所でも反応してしまい UX が悪化します。
改善案：押せる要素に限定する
button:active { … }
a:active { … }
Tailwind版
<button class="active:scale-95">…</button>
例題で理解を深める
例題：ニュース一覧のタイトルを押したときに軽く縮ませる
CSS版
.news-title {
color: #2d3748;
transition: transform 0.1s;
}
.news-title:active {
transform: scale(0.97);
}
HTML
<h3 class="news-title">新サービス開始のお知らせ</h3>
Tailwind版
<h3 class="text-gray-700 transition active:scale-95">
新サービス開始のお知らせ
</h3>
まとめ：:active を使いこなすコツ
:active の本質
- 「押している瞬間」を表す疑似クラス
- ボタンやカードの“押し心地”を作るのに必須
実務で大切なポイント
- hover より短く、押している間だけ発動する
- transition と組み合わせると質感が上がる
- スマホでも発動するため UI に重要
- 押せる要素にだけ付ける
Tailwind の強み
active:プレフィックスで簡単に指定できるactive:scale-*やactive:bg-*で自然な押し感を作れる
