CSSのhoverの使い方を知りたいなぁ。
サンプルアリで、transitionについても値の意味を知りたい・・・。
こんな悩みに答える記事になっています。
今回はCSSのホバーについて解説していきます。
前回の記事↓でちょっと触れたのですが、より詳しく解説していきます。
この記事で解説するのは以下の3点です。
- hoverの使い方
- transitionの使い方と例
- hoverのサンプル色々
ホバーを覚えることで、デザインの幅が広がるだけでなく、ユーザにとって分かりやすいデザインにすることが可能です！
合わせて読みたいポートフォリオを公開するならConoHa WINGで30分で完了！【HTMLやWordPressも】
hover(ホバー）のCSSの書き方
そもそもhoverは、マウスのポインタ（アイコン）を要素の上に置いた時に実行されるものです。
リンクやボタンと一緒に使われることがほとんどで、マウスカーソルを合わせたときに何かしらの反応があることで、（ここは押せる部分なんだな）と思わせることができます。
そんなhoverは、「疑似クラス」と呼ばれています。
疑似クラスとは？
疑似クラスとは、要素が特定の状態になっている時だけ実行されるクラスのことです。
:○○と書きます。
:before,:after,:visited,そして今回紹介する:hoverなど、様々な疑似クラスがあります。
実際のhoverの使い方やCSSを見てみよう
疑似クラスがどうこう言われてもイメージが湧かないと思いますので、実際にどのような使い方をするのか見ていきましょう！
<div class="sample1">マウスホバーで背景色が変わります。</div>.sample1{
width: 100%;
box-sizing: border-box;
padding: 2rem;
background-color: #c8e6c9;
text-align: center;
}
.sample1:hover{/*ホバーしたとき*/
background-color: #4caf50;
}このように、sample1というクラスに対してhoverを指定することで、ホバー時に背景色を#c8e6c9から#4caf50に変化させることができます。
実際にこのようなものが出来上がります。
(スマホの場合、実際にタップしていただければわかります！）
ホバーの時に重要なtransitionについて
先ほどの例では、背景色が一瞬で変わってしまいました。
何秒かかけて状態を変化させることで、より分かりやすいデザインになります。
そのためには、transitionというプロパティを使用します。
transitionの基本的な使い方
transition: 0.3s;という風に書くことで、0.3秒かけて変化させるという意味になります。
これは、疑似要素内（:hover内)に書いてはダメです。
実際の例は以下の通りです。分かりやすいよう、1秒かけることにします。
<div class="sample2">マウスホバーで背景色が変わります。</div>.sample2{
width: 100%;
box-sizing: border-box;
padding: 2rem;
background-color: #c8e6c9;
text-align: center;
transiton: 1.0s;/*1.0秒かける*/
}
.sample2:hover{/*ホバーしたとき*/
background-color: #4caf50;
}色が一瞬で切り替わるのではなく、じんわり変わったのが分かると思います。
transitonで要素を指定する
先ほどのように指定した場合、もし:hover内に文字色も背景色も変えるようにしていた場合、どちらも同じ秒数かけて色が変わっていきます。
transition: background-color 1.0s;のように書くことで、「background-color(背景色)のみを1秒かけて変化させる」という意味にすることもできます。
要素ごとに使い分けることで、文字色は一瞬で変わって、背景色だけ後から変化してくる。
といったデザインにすることも可能です。
また、これはtransition: background-color 1.0s,color 2.0s;ようにコンマ区切りで書くこともできます。
変化の度合いを指定する方法
transitionには、変化の度合いを指定することもできます。
変化の度合いは5種類あります。
- ease 開始と完了を滑らかにする（初期状態）
- linear 一定
- ease-in ゆっくり始まる
- ease-out ゆっくり終わる
- ease-in-out ゆっくり始まってゆっくり終わる
使い方は、transiton: ease-in-out 1.0s;のように使います。
実際の例を見てみます。(分かりやすいように3秒かけます)
基本のホバーサンプルHTML+CSS
ここまでのおさらいを含め、サンプルを見ながら解説していきます。
特定のCSS以外の部分で分からないところがあれば、以下の記事をチェックすればわかるかなと思います。
ホバーで文字に下線を付けるCSS
ホバーしたときに文字に下線をつけるのは、文字だけのリンクでよく使います。
例
トップページに戻りますa{
color: #009ee9;
}
a:hover{
color: #ff9d5a;
text-decoration: underline;
}リンクはaタグなので、aタグに関して設定していきます。
text-decoration: underline;の部分が、文字に下線をつけるという意味になります。
ホバーしたら浮いたように見せるCSS
影をつけることで、ボタンが浮いたように見せることもできます。
<div class="sample2">ホバーで浮いたように見せる</div>.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);
}ホバーで要素を少し動かすCSS
先ほどのボタンを少し上に動かすこともできます。
<div class="sample3">ホバーで浮いたように見せる</div>.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のベンダープレフィックスを再確認してみるを参考にしてみてください。
ホバーで要素を拡大するCSS
要素を拡大するときも、transformを使用します。
<div class="sample3">ホバーで拡大する</div>.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倍に拡大します*/
}hoverの使い方まとめ
今回紹介したサンプルは、hover時によく使うプロパティです。
クリックしてほしい部分なのに、なかなかクリックしてくれない・・・
そんな原因が、ホバーしたときに何も変化がないから「リンクとして認識されていなかった」なんてこともあります。
色や影だけでなく、要素を動かしたり拡大させたりを組み合わせることで、より分かりやすいデザインにしていきましょう！
