ホバーした時の動きはCSSで簡単に制御できる?誰でもすぐに実装可能

2024.01.03
ホバーした時の動きはCSSで簡単に制御できる

現在のインターネット上にあるWebサイトは、静的なサイトは少なく、なにかしらの動きをつける手法が一般的となりました。

Webサイトの動きの中でも、マウスがホバーしたタイミングでスタイルが変更する方法が一番使われます。

マウスがホバーしたタイミングで表示が変われば、ユーザーが行動に移しやすいからです。

本記事では、マウスがホバーした際の挙動をCSSで制御する方法を初心者にもわかりやすく解説します。

ホバーした際のCSSの実装は簡単ですので、本記事を読んで実際にコードに落とし込んでみてください。

CSSでホバーを制御する擬似クラス

マウスがボタンやリンクをホバーしたタイミングで表示を変えるためには、CSSの擬似クラスである:hoverを使用します。

特定の要素やクラスに対して:hoverを指定し、ホバーした時のスタイルを記述することで、簡単に実装可能です。

簡単なコード例を紹介します。

HTML
<a href="#" class="example">ボタン</a>
CSS
.example{
  text-decoration: none;
}
.example:hover{
  color: red;
}
hoverの動きを紹介した画像

指定したクラスの後ろに:hoverを記述して、ホバーした後のスタイルを指定するだけです。

マウスが離れると元のスタイルに戻ります

擬似クラスは特定の状態を指定する

擬似クラスとは、特定の状態になった時のスタイルを決めるための機能です。

今回は、ホバーしたタイミングでスタイルが変わる:hoverを紹介しますが、他にもクリックしている間のスタイルを決める:activeやリンク先へ訪問済みである状態を示す:visitedなどがあります。

aタグやbuttonタグでリンクを作成する際には設定する場合があるので、擬似クラスについては覚えておきましょう。

CSSの:hoverを使うタイミングはリンク

マウスをホバーした際に表示を変更するCSSである:hoverを使用するタイミングは、aタグやbuttonタグなどのリンクであることを知らせる場合が一般的です。

リンクではない場所に:hoverを指定して、動きをつけてしまうとユーザーはクリックできるものだと勘違いしてしまう可能性があるからです。

擬似クラスがリンクに対して使うものばかりですので、注意しておきましょう。

CSSの:hoverを使ったアニメーションの例を紹介

マウスをホバーした時のアニメーションは自由自在です。

ボタンを押すような動きをしたり、ボタンが回転するような動きを再現できたりとオシャレなホバーのアニメーションを作れます。

今回は基本的な下記2つのアニメーションを例に紹介します。

  • ホバーした時に文字色と背景色を変える
  • ホバーした時に形を変える

初心者でも再現できる内容ですので、コピーアンドペーストして色などを変更して動きを再現してみてください。

ホバーした時に文字色と背景色を変える

ホバーした時に文字色や背景色が変わる動きは、様々なWebサイトでも使われています。

まずは、コードを表示します。

HTML
<a href="#" class="btn">ボタン</a>
CSS
.btn{
  display: block;
  width: 100px;
  height: 50px;
  background-color: greenyellow;
  text-align: center;
  line-height: 50px;
  transition: all 0.5s;
  text-decoration: none;
  margin: 50px;
}
.btn:hover{
  background-color: orange;
  color: white;
  transition: all 0.5s;
}
ホバーした時に背景色と文字色が変わる画像

aタグをブロック要素に変換し、ボタン風にデザインしました。

.btnクラスと:hoverした際のスタイルにtransitionプロパティを使用してゆっくりアニメーションするように設定しています。

ホバーした時に形を変える

ホバーした時には、色だけでなく形も一緒に変えられます

HTML
<a href="#" class="btn">ボタン</a>
CSS
.btn{
  display: block;
  width: 100px;
  height: 50px;
  background-color: greenyellow;
  text-align: center;
  line-height: 50px;
  transition: all 0.5s;
  text-decoration: none;
  margin: 50px;
}
.btn:hover{
  background-color: orange;
  color: white;
  transition: all 0.5s;
  border-radius: 50%;
}
ホバーした時にボタンの形も一緒に変わる画像

上記コードでは、:hoverのスタイルにborder-radiusプロパティを追加して形を変更しています。

他にも、transformプロパティなどを使用することで様々な形に変更できるので、実際にコードを打ち込みながら試してみてください。

まとめ

今回は、マウスがホバーした時の挙動を制御する方法を紹介しました。

マウスがホバーした際には、CSSの擬似クラスである:hoverを使用します。

擬似クラスの:hoverにスタイルを記述することでホバーしたタイミングでの装飾の実装が可能です。

基本的には、ホバーはリンクできることを知らせる場合に使用すると覚えておきましょう。

ホバー後のスタイルは自由自在ですので、実際に色々な装飾を試してみてください。

HTMLやCSSの学習が思うように進まず、仕事ができるレベルまで到達できそうになければDMMWebCampの無料相談をご利用ください。

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5