【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アプリ

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

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

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

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

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

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を使ってボタンデザインを作成する方法について説明します。

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

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

枠と背景色の設定

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

これにはborderbackground-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秒かけてスムーズにするものです。

さらに学ぼう:プログラミングスキル向上のコツ

プログラミングスキルを向上させるためのヒントとおすすめのリソースについて説明します。

  • 挫折せず継続学習する方法
  • おすすめリソースと参考資料

挫折せず継続学習する方法

プログラミングを学ぶには、定期的かつ持続的な学習が不可欠です。

しかし、学習の途中で挫折することは珍しくありません。

挫折を避け、継続的に学び続けるためには、自分のペースを理解し、無理なく進めましょう。

また、具体的な目標を設定し、それを達成するためのステップバイステップの計画を立てることも助けになります。

おすすめリソースと参考資料

インターネット上には、CSSと:hover擬似クラスについて学ぶための多くのリソースが存在します。

公式のMDN Web DocsやW3Schoolsは、基本的な情報を確認するのに最適な場所です。

YouTubeやCodePenには、実際の例を見つけることができ、自分で試すことも可能。

まとめ

当記事では、CSS Hover効果とその使い方について説明しました。

  • CSSの:hover擬似クラスは、ユーザーエクスペリエンスを向上させるための重要なツール
  • :hover擬似クラスは、さまざまな要素で設定できる
  • リンク要素には、:hover疑似クラス以外にも特別疑似クラスが用意されている

この知識を活用して、魅力的なウェブデザインを作成し、ユーザーにとってわかりやすいウェブページを作りましょう。

継続的な学習と実践を通じて、自身のウェブデザインスキルをさらに磨き上げてください。

タイトルとURLをコピーしました