【CSS】セレクター番外編 :hoverと:active

チャッピー

セレクター編って終わったんじゃ…

こばゆた

おっと、細かい事は気にしない

擬似クラスとは要素が特定の状態の時にスタイルを変更することができるものです

こばゆた

例をあげると、以下のようにボタンの上にマウスカーソルが乗ると色が少し薄くなるものなどがあげられます

こばゆた

ヘッダーのナビリンクなどで見られるアレですね

きなこ

これが要素に「マウスカーソルが乗る」という特定の状態ね

こばゆた

そうそう

今回はその中でもよく使う”:hover”と”:active”を解説していこうと思います。

こばゆた

“:hover”と”:active”は無理して使う必要はありませんが使えるとWebページがグッとお洒落になりますし何よりも動く感動が味わえるので、できて損はないと思います！

チャッピー

お洒落になるなら頑張ろう！

1.:hover

セレクターに対して”hover”を使うことでマウスカーソルが乗るとスタイルを変えることができます。

使い方はセレクターの後ろに：(コロン)とhoverを書きます。

セレクター:hover{
  プロパティ: 値;
}

<a>こんにちは</a>

a{
  background-color: #ddd;
  color: #000;
}
/*ボタンぽくするために他のスタイルもつけてありますが割愛します*/

a:hover{
  color: #ddd;
  background-color: #000;
}
/*a要素にカーソルが乗ると色が反転する*/

a要素にカーソルが乗ると色が反転しています。

これはシンプルなものですのでもう一つサンプルを

こばゆた

イラストのラーメンが実写に！

このようにhoverは画像に対しても使うことができます。

1-2.:hoverの注意点

しかし一つ注意点があります。下の例は二つとも同じように見えますがカーソルが反応する範囲が異なると思います。

タネを明かすと、上がdiv要素で下がspan要素になっています。

<div>こんにちは</div>
<span>こんにちは</span>

ここで思い出して欲しいのが”block要素”と”inline要素”です。

block要素とinline要素とinline-block要素の解説と使い方【CSS】

webデザインで最初に躓く壁である、block要素とinline要素について詳細に解説しています。これをマスターすれば思いのままレイアウトが出来ると思います。

kbyt-programming.com

2021年12月02日

div,span{
  border: solid #000 1px;
}
/*それぞれに枠をつける*/

つまりdivは”block要素”なので横幅を指定しないと横幅いっぱいに広がり、spanは”inline要素”であるため文字の幅分しかないことになります。

そのためカーソルが乗っても反応する範囲が異なっていました。

「hoverの範囲がおかしい！」となったらその辺りもチェックしてみるのも良いと思います。

2.:active

こちらは対象が押されている状態でなんらかの変化を与えたい時に使います。

セレクター:active{
  プロパティ: 値;
}

a:active{
  color: #ddd;
  background-color: #000;
}
/*a要素を押している間だけ色が反転する*/

ボタンを押し込むと色が反転しましたね。

またコチラも画像に対しても使えます。

実用的なものとしては他のプロパティと組み合わせてボタンを押した時の動きを出せます。

こばゆた

:activeは使い所がなかなか限られますが覚えておきましょう。

3.まとめ

セレクター:hover{
  プロパティ: 値;
}

セレクター:active{
  プロパティ: 値;
}

a:hover{
  color: #ddd;
  background-color: #000;
}
/*a要素にカーソルが乗ると色が反転する*/

a:active{
  color: #ddd;
  background-color: #000;
}
/*a要素を押している間だけ色が反転する*/