【CSS】:hover疑似クラスの書き方｜要素別サンプルも提供

（最終更新日：2023年6月）

✔このような方へ向けて書かれた記事となります

「CSS Hoverエフェクトの機能を知りたい」
「CSS Hoverエフェクトの実装方法を学びたい」
「実践的なCSS Hoverエフェクトの例を見てみたい」

✔当記事を通じてお伝えすること

CSS Hoverエフェクトの基本理解
CSS Hoverエフェクトの実装方法と応用
具体的なCSS Hoverエフェクトの実例

当記事では、CSS Hoverエフェクトの基本から応用まで、実際の例を交えてわかりやすく解説していきます。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

CSS Hover効果とは

こちらでは、CSS hover効果とは何か、そしてそれがどのように使用されるかについて説明します。

まずは基本からおさえましょう。

CSS hoverの重要性
擬似クラスの役割と特徴
「:hover」擬似クラスの概要と用途

CSS hoverの重要性

CSSのHover効果は、マウスカーソルが特定の要素の上にあるときにスタイルを変更するものです。

ユーザーのインタラクションに対する反応を表現できます。

これはとくにリンクやボタンなどのクリック可能な要素にとって重要です。

擬似クラスの役割と特徴

CSSの擬似クラスは、特定の状態のHTML要素を選択するためのものです。

これらは要素の状態（例えばリンクが既に訪れられているかどうか）や、要素の特定の部分（例えば最初の行）を選択するために使われます。

擬似クラスはコロン（:）に続くキーワードで表されます。

以下は、主要な疑似クラスの一覧表です。

疑似クラス名	説明	例
:hover	マウスが要素上にホバーしている時に適用	a:hover
:active	要素がアクティブ（クリックされている）時に適用	button:active
:focus	要素がフォーカスされている時に適用	input:focus
:visited	リンクが既に訪れた状態の時に適用	a:visited
:first-child	要素の最初の子要素に適用	li:first-child
:last-child	要素の最後の子要素に適用	li:last-child
:nth-child(n)	要素のn番目の子要素に適用	li:nth-child(2)
:nth-of-type(n)	同じタイプの要素のn番目に適用	p:nth-of-type(odd)
:not(selector)	指定したセレクタに一致しない要素に適用	:not(.class)
:before	要素の前に内容を追加する	p:before { content: “::before”; }
:after	要素の後ろに内容を追加する	p:after { content: “::after”; }

「:hover」擬似クラスの概要と用途

「:hover」は、マウスカーソルが要素の上にあるときのスタイルを定義するもの。

:hoverでスタイルを指定することで、ユーザーは、要素がクリックできることをすぐに理解できます。

リンクやボタンのようなインタラクティブな要素に対するフィードバックを提供するために一般的に使用されます。

<style>
  /* マウスが要素上にホバーした際のスタイル */
  a:hover {
    color: red;
    text-decoration: underline;
  }
</style>

<a href="#">ホバーしてみてください</a>

基本的な「:hover」の使い方

こちらでは、「:hover」の基本的な使い方を学びます。

具体的には、HTML要素の準備、CSSスタイルの適用、そして完成したサンプルデザインについて説明します。

HTML要素の準備
CSSスタイルの適用
完成したサンプルデザイン

HTML要素の準備

まず、HTML要素を準備します。

この例では、単純なdiv要素を使用します。

これに対してクラス名を指定し、そのクラスに対して後でCSSを適用します。

例えば、次のようなHTMLコードを書くことができます：

<div class="hover-effect">Hover over me!</div>。

CSSスタイルの適用

次に、CSSを適用します。

この例では、背景色とテキスト色を変更する単純なホバーエフェクトを作成します。

CSSは以下のようになります。

.hover-effect {
  background-color: white;
  color: black;
}
.hover-effect:hover {
  background-color: black;
  color: white;
}

ここでは、マウスがdiv要素の上にあるときに、背景色が黒に、テキスト色が白に変わるようにしています。

完成したサンプルデザイン

以上のHTMLとCSSを適用すると、マウスカーソルが上に来ると色が反転する単純なデザインが完成します。

:hover 擬似クラスがどのように機能するかを実感してみましょう。

aタグと「:hover」の組み合わせ

こちらでは、HTMLのaタグ（リンク）と「:hover」をどのように組み合わせて使用するかについて説明します。

リンクに適用される擬似クラス
リンクデザインのカスタマイズ

リンクに適用される擬似クラス

HTMLのaタグ（リンク）には、いくつかの特別な擬似クラスが適用されます。

なぜならクリック可能かどうかだけでなく、過去にリンクを訪れたかどうかなどがわかると便利だからです。

疑似クラスにより以下の設定が可能です。

:link（リンクがまだクリックされていない状態）
:visited（リンクがすでに訪れられた状態）
:hover（マウスがリンクの上にある状態）
:active（リンクが現在クリックされている状態）

リンクデザインのカスタマイズ

これらの擬似クラスを使用すると、リンクの見た目を状態によって変化させられます。

たとえば、以下のCSSでは、通常のリンクは青色、訪れたリンクは紫色、ホバーされているリンクは赤色になります。

a:link {
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: red;
}

:hover 擬似クラスは、リンクに対するユーザーのインタラクションを視覚的に示す強力なツールです。

「:hover」を使ったボタンデザインの作成

こちらでは、:hoverを使ってボタンデザインを作成する方法について説明します。

具体的には、枠と背景色の設定、そしてホバー時のアニメーション効果について見ていきましょう。

枠と背景色の設定
ホバー時のアニメーション効果

枠と背景色の設定

ボタンのデザインを作成するためには、まず枠と背景色を設定します。

これにはborderとbackground-colorプロパティを使用します。

.button {
  border: 1px solid black;
  background-color: white;
  padding: 10px 20px;
}

ここでは、ボタンに黒い枠を設定し、背景色を白にしています。

また、パディングを設定してボタンのサイズを調整しましょう。

ホバー時のアニメーション効果

ホバー時のアニメーション効果を追加します。

transitionプロパティと:hover擬似クラスを使用してください。

.button {
  border: 1px solid black;
  background-color: white;
  padding: 10px 20px;
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: black;
  color: white;
}

ボタンの背景色をマウスカーソルが上に来たときに黒に変更し、テキストの色を白に変更しています。

transitionプロパティの設定は、背景色の変更が0.5秒かけてスムーズにするものです。