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

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

CSSでホバー効果を作る方法と使い方、応用例の画像に適切なテキストを設定!CSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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;というスタイルが設定されており、初期状態では非表示になっています。

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

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