CSSホバー効果

css ホバーエフェクト

CSSホバー効果

説明

この記事では、CSSの:hover擬似クラスを使用して、Webページの要素にインタラクティブなホバー効果を追加する方法について説明します。基本的な概念から始めて、徐々に掘り下げていき、:hoverを使用して背景色、テキストの色、フォントサイズ、境界線のスタイルを変更したり、アニメーションを追加したりする方法について説明します。また、豊富なサンプルコードとオンラインデモも提供しています。

1. CSSホバー効果とは？

:hover擬似クラスは、マウスポインタが要素上に置かれたときにスタイルを適用するために使用されます。これは、ユーザーが要素を操作しようとしていることを視覚的に示すために使用できるため、Webページのユーザビリティとインタラクティブ性を向上させることができます。

ホバー効果は、リンク、ボタン、画像、div要素など、さまざまなHTML要素に適用できます。

2. 背景色の変更

:hover擬似クラスとbackground-colorプロパティを使用すると、マウスが要素上に置かれたときに要素の背景色を変更できます。

サンプルコード:


<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.box:hover {
  background-color: yellow;
}
</style>

<div class="box"></div>

オンラインデモ:

3. テキスト色の変更

:hover擬似クラスとcolorプロパティを使用すると、マウスが要素上に置かれたときに要素のテキストの色を変更できます。

サンプルコード:


<style>
.text {
  color: blue;
}

.text:hover {
  color: red;
}
</style>

<p class="text">これはテキストです。</p>

オンラインデモ:

これはテキストです。

4. フォントサイズの変更

:hover擬似クラスとfont-sizeプロパティを使用すると、マウスが要素上に置かれたときに要素のフォントサイズを変更できます。

サンプルコード:


<style>
.text {
  font-size: 16px;
}

.text:hover {
  font-size: 20px;
}
</style>

<p class="text">これはテキストです。</p>

オンラインデモ:

これはテキストです。

5. 境界線スタイルの変更

:hover擬似クラスとborderプロパティを使用すると、マウスが要素上に置かれたときに要素の境界線の色、幅、スタイルを変更できます。

サンプルコード:


<style>
.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.box:hover {
  border: 3px dashed red;
}
</style>

<div class="box"></div>

オンラインデモ:

6. アニメーション効果の追加

:hover擬似クラスとtransitionプロパティを使用すると、ホバー効果にスムーズなトランジションアニメーションを追加できます。

サンプルコード:


<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: background-color 0.5s ease;
}

.box:hover {
  background-color: yellow;
}
</style>

<div class="box"></div>

オンラインデモ:

まとめ

このチュートリアルでは、CSS :hover 擬似クラスを使用してさまざまなホバー効果を作成する方法を段階的に説明し、豊富な例とオンラインデモを提供して、読者がよりよく理解して適用できるようにしました。