記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【CSS】 hoverの基礎知識・使い方をサンプルコード付きで徹底解説(初心者向け)

「hoverの基礎知識」「hoverと組み合わせて使えるプロパティ」「実践的なhoverの指定方法」の3点を中心に初心者のかた向けに解説。 基礎知識・使用方法に加えて、hoverの実用例をサンプルコード付きで解説。
実際に手を動かして学ぶことができますので、初心者の方も安心して読み進める事ができます。

カテゴリ: HTML/CSS

こんにちは!

「hoverって何・・?」「hoverの基礎知識を理解し使えるようになりたい・・!」「よく使うhoverのサンプルコードが欲しい・・!」

そのように考えている、初心者web制作者の方も多いのではないでしょうか?

hoverを使用する事ができれば、javascriptなしでwebに簡単な動きをつける事ができます!

今回は、初心者の方向けに、「hoverの基礎知識」「hoverと組み合わせて使えるプロパティ」「実践的なhoverの指定方法」を中心に詳しく解説していきます。

hoverとは?

要素の上にカーソルを合わせた時、要素のスタイル変化を指定できる擬似クラスのことです。

この一文ではわかりずらいと思いますので、順番に解説していきます。

hover

まず、下記のボタンにカーソルを合わせてください、ボタンの色が青から赤に変わります。
カーソルが乗った時「要素の変化」を指定できる擬似クラス、これが「:hover」です。

hover↓
ボタン

擬似クラスとは

セレクタに指定しているスタイルを、特定の時(特定の条件時)に変える事ができるクラスを付加できるもの。

上記例であれば、ボタンにカーソルが乗る前は、青色のスタイル指定。
カーソルが乗るという特定条件時にボタンが赤色に変わるという、スタイル変更の為のクラスを付加できるクラスが擬似クラスです。

aタグに使用できる擬似クラス

aタグに使用できる、擬似クラスを紹介します。

①:link(リンクが未訪問である場合を指定してスタイル適用)

②:visited(リンクが訪問済みである場合を指定してスタイル適用)

③:hover(要素にマウスを載せた時にスタイル適用)

④:active(リンクをクリックしてからクリックが終わるまでの状態時にスタイル適用)

同じ要素、セレクタに適用する場合は、上記順番で設定しないと設定が上手く機能されません、理由はCSSは後から記述されたスタイルが優先されるからです。

hoverの書き方

①と②では同じセレクタを指定。
①では変化前のスタイルを指定、②では変化後のスタイルを指定。
サンプルコード付きで解説します。

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
.sampleに変化前スタイル指定、.sample:hoverに変化後のスタイルを記述します。
変化前は「background-color:blue;」青色、変化後、つまりマウスがボタンに乗った時は「background-color:red;」赤色が指定されているという事です。 これが基本記述です。

変化の時間を指定(transition)

hoverでは変化の時間も指定できます。
変化の時間を指定するには「transition」プロパティを使います。

サンプルコード動画

HTMLサンプルコード

CSSサンプルコード

※解説
ボタンの上にマウスを乗せると、hoverを反映(ボタンの色の変化)までに、1秒かけて変化しています。
変化前のセレクタに「transitionプロパティ」「値」を設定する事で変化にかける時間を指定する事ができます。 値0.3であれば(0.3秒)となります。

指定できる値としては、下記となります。

指定できる単位 日本語単位 指定の仕方
s 1s1秒。初期値は0s
ms ミリ秒 1000msで1秒

transitionには、変化にかける時間だけではなく、変化開始までの時間、変化の仕方などを指定できる様々なプロパティが用意されています。
変化を指定する事で、ユーザーにより使いやすさ、リッチ感を与える事ができます。
もっと詳しく知りたい方は下記を参考にしてみてください。

https://webst8.com/blog/css-transition/

transform【移動・縮尺・回転傾斜】

hoverとtransformを組み合わせる事で、hover時に「移動・縮尺・回転傾斜」
などより動きをつける事ができます。
今回はtransformを使いボタンを大きくします。

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
hover時、transform: scale(1.1, 1.1)を指定しました。
scale(X軸の数値、Y軸の数値)となり、今回は「1.1」を指定したので、hover時、元のボタンよりx,y軸が1.1倍大きいボタンに変化させる事ができています。

この他にもhoverとtransformを組み合わせる事で、hover時に「移動・縮小・回転傾斜」などより動きをつけた実装することができます。

次の項から、「hoverを使うと便利な場面」をサンプルコードで紹介します。
hover、transformを使用した「移動・縮尺・回転傾斜」にも触れますが、transformについてより詳しく知りたい方は下記を参考にしてみてください。

https://creive.me/archives/16145/

hoverを使うと便利な場面

ボタンが半透明

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
hover時「opacity: 0.6;」を指定することにより、
マウスがボタンに乗った時、半透明になるように実装されています。
透明度を高めたい場合は、値「0.6」を0に近づける事により指定。
透明度を低くしたい場合は、値「0.6」を1に近づける事により調整ができます。

ボタンの背景・文字色の変化

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
hover時に、colorとbackground-colorの色を入れ替えて、よりボタンを目だ立たせています。

マウスカーソルを変化

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
要素にカーソルが当たった時、カーソルポインターの形を指マークに変えています。
hover時に 「cursor: pointer;」を指定し実装する事ができます。

ボタンの角を丸める

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
hover時にボタンの角がなくなり、丸いボタンを実装できています。
hover時に「border-radius」を指定します、今回値は、50%を使用しましたが、px、%、emも使用できお好みの値を指定できます。

動くボタン

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
hover時、transform: scale(0, 20px)を指定しました。
scale(X軸の数値、Y軸の数値)となり、今回は「0, 20px」を指定したので、hover時、元のボタン位置よりy軸が20px分移動させる事ができています。

縮小するボタン

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
hover時、transform: scale(.8, .8)を指定しました。
scale(X軸の数値、Y軸の数値)となり、今回は「.8, .8」を指定したので、hover時、元のボタンよりx,y軸が0.8倍の大きさに縮小されました。

凹むボタン

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
box-shadow: 0 5px black;でボタン下に黒い影(5pxの黒い線)をつけておく。
hover時に、box-shadow: none;でつけておいた影を消す、
transform: translate(0, 5px);で、5px分ボタン要素がy方向に移動、(消えた影分)する事で凹んだボタンの実装を実現できています。

浮かび上がるボタン

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
hover時に、box-shadow: 0 5px 10px black;で影を作成。
transform: translate(0, -5px);でy軸にマイナス5px移動(上)に移動させ、影が付き浮いたボタンを表示する事ができています。

傾くボタン

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
hover時に、transform: rotate(30deg);を指定し30度傾けています。
rotateは、transformプロパティであり、rotate(回転角度)で変化を表示する事ができます。

要素のY回転

サンプルコード表示結果↓
Y回転

HTMLサンプルコード

CSSサンプルコード

※解説
rotateY(360deg)と、transition: 1s;(変化にかける時間)をセットで指定する事で、
Y方向への回転を実装する事ができています。

要素のX回転

サンプルコード表示結果↓
X回転

HTMLサンプルコード

CSSサンプルコード

※解説
rotateX(360deg)と、transition: 1s;(変化にかける時間)をセットで指定する事で、
X方向への回転を実装する事ができています。

要素のZ回転

サンプルコード表示結果↓
Z回転

HTMLサンプルコード

CSSサンプルコード

※解説
rotateZ(360deg)と、transition: 1s;(変化にかける時間)をセットで指定する事で、
Z方向への回転を実装する事ができています。

文字間隔を広げる

サンプルコード表示結果↓
文字間隔

HTMLサンプルコード

CSSサンプルコード

※解説
hover時に、「letter-spacing: 8px;」を指定し文字幅を広げています。

アンダーラインを入れる

サンプルコード表示結果↓
ボタン

HTMLサンプルコード

CSSサンプルコード

※解説
after擬似要素とhoverを組みあせてアンダーラインを作成しています。
アンダーラインの色を変更したい場合は、background-colorの色、
アンダーライン長さを変えたい場合は、widthの%を変えてください。

まとめ

今回は初心者の方向けに、「hoverの基礎知識」「hoverと組み合わせて使えるプロパティ」「実践的なhoverの指定方法」を中心に詳しく解説してきました。

最後にポイントをまとめます。


1.hoverとは
要素の上にカーソルを合わせた時、要素のスタイル変化を指定できる擬似クラス。


2.hoverの基本記述方法は
セレクタ {
プロパティ:値;
}
セレクタ:hover {
プロパティ:値;
}


3.hoverに変化の時間を指定するには
「transition」プロパティを合わせて使用。


4.hoverに「移動・縮尺・回転傾斜」などの動きをつけるには
「transform」プロパティを合わせて使用。


いかがだったでしょうか?

hoverを使用する事ができれば、javascriptなしでwebに簡単な動きをつける事ができます!
ぜひ活用してみてください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。