CSS Tips | 超実務コアCSSテクニック：基本文法・セレクタ － 疑似クラス :hover

Web APP CSS
スポンサーリンク

疑似クラス :hover を“気持ちよく使いこなす”ための基礎と実践

:hover は CSS の中でも特に「動き」を感じられる楽しいセレクタです。
マウスカーソルを乗せたときにスタイルを変えるための疑似クラスで、
ボタン・リンク・カードなど UI の印象を大きく左右します。

ここでは、初心者でも直感的に理解できるように、
CSS と Tailwind CSS の両方で丁寧に解説します。

:hover の基本文法を理解する

CSS の基本形

.button {
  background: #3490dc;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
}

.button:hover {
  background: #2779bd;
}
CSS

HTML

<a class="button">ボタン</a>
HTML

マウスを乗せると背景色が変わります。

深掘り：:hover は「状態」を表す

:hover は「マウスが乗っている状態」を表す疑似クラスです。

  • 通常状態（default）
  • ホバー状態（hover）
  • フォーカス状態（focus）
  • アクティブ状態（active）

このように、UI の状態を CSS で表現できるのが疑似クラスの魅力です。

Tailwind では、疑似クラスを プレフィックス で表現します。

<a class="bg-blue-500 text-white px-5 py-3 rounded hover:bg-blue-600">
  ボタン
</a>
HTML

hover: を付けるだけでホバー時のスタイルを指定できます。

:hover を使ったよくある UI パターン

ボタンの色を変える

CSS版

.btn {
  background: #38a169;
  color: white;
  padding: 10px 16px;
  border-radius: 6px;
}

.btn:hover {
  background: #2f855a;
}
CSS

Tailwind版

<button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
  決定
</button>
HTML

リンクに下線を付ける

CSS版

a {
  text-decoration: none;
  color: #1a202c;
}

a:hover {
  text-decoration: underline;
}
CSS

Tailwind版

<a class="no-underline text-gray-900 hover:underline">
  詳しく見る
</a>
HTML

カードをふわっと浮かせる

CSS版

.card {
  padding: 20px;
  background: white;
  border-radius: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
CSS

Tailwind版

<div class="p-5 bg-white rounded-xl transition hover:-translate-y-1 hover:shadow-lg">
  カード内容
</div>
HTML

Tailwind の transition や hover:shadow-lg を組み合わせると、
CSS と同じように自然なアニメーションが作れます。

:hover を使うときの重要ポイント（深掘り）

1. スマホでは hover が効かない

スマホには「マウスを乗せる」という概念がないため、
:hover は基本的に発動しません。

そのため、重要な操作（例：メニュー開閉）を hover だけで実装するのは NG です。

Tailwind でも同じで、hover: はスマホでは発動しません。

2. transition と組み合わせると UI が一気に洗練される

CSS版

.button {
  background: #3182ce;
  transition: background 0.3s;
}

.button:hover {
  background: #2b6cb0;
}
CSS

Tailwind版

<button class="bg-blue-500 transition hover:bg-blue-600">
  ホバーで色が滑らかに変わる
</button>
HTML

hover の変化は “急に変わる” より “滑らかに変わる” 方が圧倒的に心地よい
これは UI デザインの基本です。

3. hover の対象は「触れる要素」に限定する

例えば、div:hover を乱用すると、
意図しない場所で hover が発動してしまうことがあります。

改善案：クラスを付けて限定する

.card:hover { … }
CSS

Tailwind版

<div class="card hover:shadow-lg">…</div>
HTML

hover は「ユーザーが触れる要素」にだけ付けるのが鉄則です。

例題で理解を深める

例題：ニュース一覧のタイトルに hover を付ける

CSS版

.news-title {
  color: #2d3748;
  transition: color 0.2s;
}

.news-title:hover {
  color: #1a202c;
}
CSS

HTML

<h3 class="news-title">新サービス開始のお知らせ</h3>
HTML

Tailwind版

<h3 class="text-gray-700 transition hover:text-gray-900">
  新サービス開始のお知らせ
</h3>
HTML

まとめ：:hover を使いこなすコツ

hover の本質

  • 「マウスが乗った状態」を表す疑似クラス
  • ボタン・リンク・カードなど UI の質を大きく向上させる

実務で大切なポイント

  • スマホでは hover が効かない
  • transition と組み合わせると洗練される
  • hover は「触れる要素」にだけ付ける

Tailwind での hover

  • hover: プレフィックスで簡単に指定できる
  • transition と組み合わせると CSS と同等の表現が可能
スポンサーリンク
タイトルとURLをコピーしました