カテゴリ一覧から記事を探す

CSSのhover(ホバー)の使い方とサンプルまとめ

CSSのhoverの使い方とサンプルまとめ

今回はCSSのホバーについて解説していきます。

前回すこし触れたのですが、今回はより詳しく解説していきますね。

この記事で解説するのは以下の3点です。

解説すること

  • hoverの使い方
  • transitionの使い方と例
  • hoverのサンプル色々

ホバーを覚えることで、デザインの幅が広がるだけでなく、ユーザにとって分かりやすいデザインにすることが可能です!

1.hover(ホバー)の使い方

そもそもhoverは、マウスのポインタ(アイコン)を要素の上に置いた時に実行されるものです。

リンクやボタンと一緒に使われることがほとんどで、マウスカーソルを合わせたときに何かしらの反応があることで、(ここは押せる部分なんだな)と思わせることができます。

そんなhoverは、「疑似クラス」と呼ばれています。

疑似クラスとは?

疑似クラスとは、要素が特定の状態になっている時だけ実行されるクラスのことです。

:○○と書きます。

:before,:after,:visited,そして今回紹介する:hoverなど、様々な疑似クラスがあります。

実際のhoverの使い方を見てみよう

疑似クラスがどうこう言われてもイメージが湧かないと思いますので、実際にどのような使い方をするのか見ていきましょう!

HTML
<div class="sample1">マウスホバーで背景色が変わります。</div>
CSS
.sample1{
  width: 100%;
  box-sizing: border-box;
  padding: 2rem;
  background-color: #c8e6c9;
  text-align: center;
}

.sample1:hover{/*ホバーしたとき*/
  background-color: #4caf50;
}

このように、sample1というクラスに対してhoverを指定することで、ホバー時に背景色を#c8e6c9から#4caf50に変化させることができます。

マウスホバーで背景色が変わります。


実際にこのようなものが出来上がります。
(スマホの場合、実際にタップしていただければわかります!)

2.ホバーの時に重要なtransitionについて

先ほどの例では、背景色が一瞬で変わってしまいました。

何秒かかけて状態を変化させることで、より分かりやすいデザインになります。

そのためには、transitionというプロパティを使用します。

transitionの基本的な使い方

transition: 0.3s;という風に書くことで、0.3秒かけて変化させるという意味になります。

これは、疑似要素内(:hover内)に書いてはダメです。
実際の例は以下の通りです。分かりやすいよう、1秒かけることにします。

HTML
<div class="sample1">マウスホバーで背景色が変わります。</div>
CSS
.sample1{
  width: 100%;
  box-sizing: border-box;
  padding: 2rem;
  background-color: #c8e6c9;
  text-align: center;
  transiton: 1.0s;/*1.0秒かける*/
}

.sample1:hover{/*ホバーしたとき*/
  background-color: #4caf50;
}
マウスホバーで1.0秒かけて背景色が変わります。


色が一瞬で切り替わるのではなく、じんわり変わったのが分かると思います。

transitonで要素を指定する

先ほどのように指定した場合、もし:hover内に文字色も背景色も変えるようにしていた場合、どちらも同じ秒数かけて色が変わっていきます。

transition: background-color 1.0s;のように書くことで、「background-color(背景色)のみを1秒かけて変化させる」という意味にすることもできます。

要素ごとに使い分けることで、文字色は一瞬で変わって、背景色だけ後から変化してくる。

といったデザインにすることも可能です。

また、これはtransition: background-color 1.0s,color 2.0s;ようにコンマ区切りで書くこともできます。

変化の度合いを指定する方法

transitionには、変化の度合いを指定することもできます。

変化の度合いは5種類あります。

変化の度合いについて

  1. ease 開始と完了を滑らかにする(初期状態)
  2. linear 一定
  3. ease-in ゆっくり始まる
  4. ease-out ゆっくり終わる
  5. ease-in-out ゆっくり始まってゆっくり終わる

使い方は、transiton: ease-in-out 1.0s;のように使います。

実際の例を見てみます。(分かりやすいように3秒かけます)

ease
linear
ease-in
ease-out
ease-in-out


何回か試して違いを確認してみてください!

種類が多くて何を使ったらいいのか・・・という感じですが、初期状態か、ease-in-outを使っておけば大丈夫かなと思います。

3.基本のホバーサンプル

ここまでのおさらいを含め、サンプルを見ながら解説していきます。

特定のCSS以外の部分で分からないところがあれば、以下の記事をチェックすればわかるかなと思います。

ホバーで文字に下線を付ける

ホバーしたときに文字に下線をつけるのは、文字だけのリンクでよく使います。

トップページに戻ります

CSS
a{
  color: #009ee9;
}

a:hover{
  color: #ff9d5a;
  text-decoration: underline;
}

リンクはaタグなので、aタグに関して設定していきます。

text-decoration: underline;の部分が、文字に下線をつけるという意味になります。

リンクについては以下の記事で詳しく解説しています!

ホバーしたら浮いたように見せる

影をつけることで、ボタンが浮いたように見せることもできます。

ホバーで浮いたように見せる


影については、前回の記事で書いています。

CSSのbox-shadowの部分が分からないという人は、参考にしてみてください。

HTML
<div class="sample2">ホバーで浮いたように見せる</div>
CSS
.sample2{
  width: 100%;
  box-sizing: border-box;
  border-rasius: 10px;
  color: #fff;
  padding: 2rem;
  background-color: #03a9f4;
  text-align: center; 
  transition 0.3s;
}

.sample2:hover{
  box-shadow: 0 14px 20px -4px rgba(0,0,0,.25);
}

ホバーで要素を少し動かす

先ほどのボタンを少し上に動かすこともできます。

ホバーで浮いたように見せる

HTML
<div class="sample3">ホバーで浮いたように見せる</div>
CSS
.sample3{
  width: 100%;
  box-sizing: border-box;
  border-rasius: 10px;
  color: #fff;
  padding: 2rem;
  background-color: #03a9f4;
  text-align: center; 
  transition 0.3s;
}

.sample3:hover{
  box-shadow: 0 14px 20px -4px rgba(0,0,0,.25);
  transform: translateY(-2px);/*ここを追加しただけです*/
}

transformというプロパティを使用することで、要素を動かすことができます。

translateYでY軸方向、translateXでX軸方向に動かすことができます。

(説明は割愛しますが)ブラウザによってはtransformが使えない(対応していない)場合がありますので、CSSのベンダープレフィックスを再確認してみるを参考にしてみてください。

ホバーで要素を拡大する

要素を拡大するときも、transformを使用します。

ホバーで拡大する

HTML
<div class="sample3">ホバーで拡大する</div>
CSS
.sample4{
  width: 100%;
  box-sizing: border-box;
  border-rasius: 10px;
  color: #fff;
  padding: 2rem;
  background-color: #03a9f4;
  text-align: center; 
  transition 0.3s;
}

.sample4:hover{
  transform: scale(1.1);/*1.1倍に拡大します*/
}

4.まとめ

今回紹介したサンプルは、hover時によく使うプロパティです。

クリックしてほしい部分なのに、なかなかクリックしてくれない・・・
そんな原因が、ホバーしたときに何も変化がないから「リンクとして認識されていなかった」なんてこともあります。

色や影だけでなく、要素を動かしたり拡大させたりを組み合わせることで、より分かりやすいデザインにしていきましょう!

次のステップ:デベロッパーツールを使えるようになろう