CSSでホバー効果を作る方法と使い方、応用例を徹底解説！

はじめに
【基本的な使い方】
【応用例】
【サンプルコード】

はじめに

CSSでホバー効果を作る方法とその使い方、応用例について詳しく解説します。

ホバー効果とは、マウスカーソルを要素の上に置いた際に、要素に対して設定されたスタイルが適用される仕組みのことです。

例えば、ボタンにホバー効果をつけることで、マウスカーソルがボタンの上に乗った際に、背景色や文字色などが変化するようになります。

CSSの基本的な文法を理解していることを前提に解説を進めていきます。

それでは、まずはホバー効果の基本的な使い方から見ていきましょう。

【基本的な使い方】

ホバー効果は、CSSの:hover擬似クラスを使って設定します。

例えば、ボタンにホバー効果をつける場合は、以下のようなCSSを記述します。

button:hover {
  background-color: #ff0000;
  color: #ffffff;
}

この場合、ボタンにマウスカーソルが乗った際に、背景色が赤色、文字色が白色に変化します。

:hover擬似クラスは、要素にマウスカーソルが乗った際に適用されます。

また、ボタン以外の要素でも同様に:hover擬似クラスを使ってホバー効果をつけることができます。

a:hover {
  text-decoration: underline;
}

この場合、リンクにマウスカーソルが乗った際に、下線がつくようになります。

【応用例】

次に、ホバー効果の応用例をいくつか紹介します。

■画像の拡大表示

画像にホバー効果をつけることで、マウスカーソルを置いた際に拡大表示することができます。

次のようなCSSを使って、画像にホバー効果をつけましょう。

.img-zoom:hover {
  transform: scale(1.1);
}

この場合、img-zoomというクラスを持つ要素にマウスカーソルが乗った際に、1.1倍に拡大されます。

transformプロパティは、要素の形状や位置を変更することができるプロパティです。

scale関数は、要素を拡大縮小するための関数で、引数に倍率を指定します。

■テキストの表示切り替え

テキストにホバー効果をつけることで、表示内容を切り替えることができます。

例えば、次のようなCSSを使って、テキストにホバー効果をつけましょう。

.text-switch .hidden {
  display: none;
}

.text-switch:hover .hidden {
  display: block;
}

この場合、text-switchというクラスを持つ要素にマウスカーソルが乗った際に、hiddenというクラスを持つ要素が表示されます。

hiddenクラスには、display:none;というスタイルが設定されており、初期状態では非表示になっています。

:hover擬似クラスを使って、マウスカーソルが乗った際にdisplay:block;というスタイルを適用することで、hiddenクラスを持つ要素が表示されるようになります。

■ボックスの影付け

ボックスにホバー効果をつけることで、影をつけることができます。

次のようなCSSを使って、ボックスにホバー効果をつけましょう。

.box-shadow {
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.box-shadow:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

この場合、box-shadowというクラスを持つ要素にマウスカーソルが乗った際に、影のぼかしの程度を大きくすることで、より立体的な印象を与えます。

box-shadowプロパティは、要素に影をつけることができるプロパティです。

引数には、水平方向の位置、垂直方向の位置、ぼかしの程度、影の色を指定します。

以上のように、ホバー効果は、様々な場面で利用されます。CSSの基本的な文法を理解していれば、簡単に設定することができます。

次に、ホバー効果を使った実践的なサンプルコードを紹介します。

【サンプルコード】

■ボタンのホバー効果

<button class="btn">ボタン</button>

<style>
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover {
  background-color: #f00;
}
</style>

このコードは、ボタンにホバー効果をつけるサンプルです。

ボタンには、btnというクラスが設定されており、CSSでスタイルが設定されています。

paddingは、ボタンの内側の余白を指定するプロパティで、10px 20pxという値が設定されていることで、上下に10px、左右に20pxの余白が設定されます。

background-colorは、ボタンの背景色を指定するプロパティで、#333という色が設定されています。colorは、文字色を指定するプロパティで、#fffという白色が設定されています。

borderは、ボタンの境界線を指定するプロパティで、noneという値が設定されていることで、ボタンに境界線がつかないようになります。

cursorは、マウスカーソルの形状を指定するプロパティで、pointerという値が設定されていることで、マウスカーソルを指差しの形状にします。

transitionは、CSSアニメーションを指定するプロパティで、all 0.3sという値が設定されていることで、ボタンに何らかのスタイルが適用された際に、0.3秒かけて変化するようになります。

:hover擬似クラスを使って、ボタンにマウスカーソルが乗った際に、背景色が赤色に変化するようになります。

■画像の拡大表示

<div class="img-zoom">
  <img src="sample.jpg" alt="サンプル画像">
</div>

<style>
.img-zoom {
  display: inline-block;
  position: relative;
}

.img-zoom:hover img {
  transform: scale(1.2);
  z-index: 1;
}

.img-zoom img {
  transition: all 0.3s;
}
</style>

このコードは、画像にホバー効果をつけるサンプルです。

img-zoomというクラスを持つ要素に、imgタグを含めています。img-zoomには、position:relative;というスタイルが設定されています。

これは、画像を中心に拡大表示するために必要な準備です。

:hover擬似クラスを使って、画像にマウスカーソルが乗った際に、transform: scale(1.2);というスタイルを適用します。

これにより、画像が1.2倍に拡大されます。

z-index: 1;というスタイルを適用することで、画像が手前に表示されるようになります。

img-zoom imgには、transition: all 0.3s;というスタイルが設定されています。

これにより、画像の拡大表示がアニメーションとして表示されるようになります。

■テキストの表示切り替え

<div class="text-switch">
  <p>デフォルト表示</p>
  <p class="hidden">ホバー時表示</p>
</div>

<style>
.text-switch .hidden {
  display: none;
}

.text-switch:hover .hidden {
  display: block;
}
</style>

このコードは、テキストの表示切り替えにホバー効果をつけるサンプルです。

text-switchというクラスを持つ要素に、2つのpタグを含めています。

1つ目のpタグは、デフォルトで表示されるテキストです。

2つ目のpタグには、hiddenというクラスが設定されており、初期状態では非表示になっています。

:hover擬似クラスを使って、text-switchにマウスカーソルが乗った際に、hiddenというクラスを持つ要素が表示されるようになります。

hiddenクラスには、display:none;というスタイルが設定されており、初期状態では非表示になっています。

以上のように、ホバー効果は、様々な場面で利用されます。CSSを使って、簡単に設定することができますので、ぜひ活用してみてください。