【例付き】CSSでホバーを作成する方法について解説！

はじめに

この記事では、CSSを使用してホバーエフェクトを作成する方法を実用的なチュートリアルとして解説していきます。

【この記事の目的】 この記事の目的は、CSSを使用してホバーエフェクトを作成する方法を実践的に学ぶことです。ホバーエフェクトは、ウェブサイトやアプリケーションのデザインに欠かせない要素の1つであり、この記事を通じて、初心者の読者がホバーエフェクトの基礎から応用まで幅広く学ぶことができます。

【前提条件】 この記事を理解するためには、HTMLおよびCSSの基礎的な知識が必要です。HTMLの基礎的な構造やタグ、CSSの基本的な構文やセレクター、プロパティ、値などについてはある程度理解していることを前提としています。

ホバーエフェクトとは？

ホバーエフェクトの作成方法

CSSの基本的な構造

CSS（Cascading Style Sheets）は、HTML文書にスタイルを適用するための言語です。CSSは、セレクタとプロパティのペアを使ってスタイルを適用します。

セレクタは、スタイルを適用する要素を指定する方法です。セレクタの後に波括弧{}を記述し、中括弧の中にスタイルのプロパティと値を記述します。

例えば、以下のように書くことで、IDが”myDiv”の要素の背景色を赤にすることができます。

#myDiv {
  background-color: red;
}

マウスオーバーとマウスアウトの設定方法

ホバーエフェクトは、マウスオーバー（要素にマウスポインタが乗った状態）とマウスアウト（要素からマウスポインタが離れた状態）の2つの状態で設定されます。

マウスオーバー時に適用するスタイルは、セレクタの後にコロン(:)をつけて:hoverを追加することで指定できます。

例えば、以下のように書くことで、IDが”myDiv”の要素の背景色をマウスオーバー時に青にすることができます。

#myDiv:hover {
  background-color: blue;
}

See the Pen Untitled by supuky (@supuky) on CodePen.

代表的なホバーエフェクトの作成方法

1. テキストの変化 テキストの変化を加えることで、ホバーエフェクトをより魅力的にすることができます。例えば、以下のように書くことで、IDが”myText”のテキストをマウスオーバー時に赤くすることができます。

#myDiv:hover {
  color: red;
  background-color: blue;
}

See the Pen Untitled by supuky (@supuky) on CodePen.

2. 背景色やボーダーの変化 背景色やボーダーの変化を加えることで、要素を目立たせることができます。例えば、以下のように書くことで、IDが”myDiv”の要素の背景色をマウスオーバー時に青にし、ボーダーを追加することができます。

#myDiv:hover {
  background-color: blue;
  border: 2px solid black;
}

See the Pen Untitled by supuky (@supuky) on CodePen.

3. アニメーションの追加 ホバーエフェクトにアニメーションを追加することで、より目立つエフェクトを作ることができます。アニメーションはCSSのtransitionプロパティやanimationプロパティを使用して設定することができます。

例えば、下記のCSSコードは、ボタンをホバーした時にボタンが上に移動するアニメーションを追加する例です。

.button {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #333;
  background-color: #fff;
  color: #333;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #333;
  color: #fff;
  transform: translateY(-5px);
}

See the Pen Untitled by supuky (@supuky) on CodePen.

この例では、ホバーエフェクトの前に、全体のトランジションを設定しています。そして、ボタンをホバーした時には、背景色や文字色を変えるだけでなく、transform: translateY(-5px)によって、ボタンが上に5px移動するアニメーションを設定しています。

また、CSSのanimationプロパティを使用することで、より複雑なアニメーションを作ることもできます。

例えば、下記のCSSコードは、マウスオーバーした時に円が拡大し、マウスアウトした時に元のサイズに戻るアニメーションを設定する例です。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333;
  transition: all 0.3s ease;
}

.circle:hover {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

See the Pen Untitled by supuky (@supuky) on CodePen.

この例では、マウスオーバーした時にanimation: pulse 1s ease-in-out infinite;によって、pulseという名前のアニメーションを適用しています。そして、@keyframes pulseによって、pulseアニメーションの詳細を設定しています。50%の時に、円が1.2倍に拡大され、100%の時に元のサイズに戻るアニメーションが設定されています。これによって、マウスオーバーした時に、円が拡大して目立つエフェクトが作られます。

ホバーエフェクトの応用

まとめ

この記事のまとめ この記事では、ホバーエフェクトについて解説し、代表的なホバーエフェクトの作成方法や実用的なチュートリアルを紹介しました。また、ホバーエフェクトの応用についても紹介しました。

次に読むべき資料

ホバーエフェクトに関する情報やチュートリアルは、インターネット上に豊富に存在しています。

これらの資料を参考にしながら、自分なりのホバーエフェクトを作成してみると、より魅力的なWebページを作ることができます。