どうも HIDEで~~す(^^)
ついにセブへ来て2か月が経過!! 早い早い!!

HTMLやCSSの課題を一人でこなせるようになったことと、タイピングがちょっとだけ早くなったのがこの2か月間での成長の証です(笑)
まあそんな話はさておき,皆さんもよくインターネットは利用されると思いますが何気なくボタンをクリックしたり、矢印を押して前のページに戻ったっり「ここクリックしたら何が出るのかな?」と思ってクリックしようとしたら、そこはクリックできないとこだったり(笑)

ここはクリックできる場所だとかスマートフォンならここをタップすれば文字色が変わって別のリンクへ飛べるとか意識しないで行っていることがほとんどだと思います。

そこで今回は「hover」というものについていろいろと調べてみました。

まずはhoverという単語を辞書で調べてみると「空中に停止する、浮遊する」といった意味が出てきました。

hoverとは?

PC用語としてのhoverの意味は
マウスオーバーしたとき、すなわちマウスポインタを動かして、そのポインタがリンクの上などに乗っかった状態
を指します。
矢印のポインタを動かして、たとえば「続きを読む」みたいなリンクの上に乗っけるとします。そこで何も変化がないと本当に続きページのへ飛べるのかどうか不安になりますよね。

そこで、ポインタがリンクの上に乗っかるとそのリンクの文字色が変わったり、何かしらの変化が現れます。
そうすることで、ちゃんと続きのページへ行けるよ! という印になります。

ではhoverしたときにどんな変化が現れるか、それはCSSでコーティングすることによって簡単に設定ができます。

HTMLで<button>タグを使ってリンクのようなボタンを作ってみます。
※実際にリンクは貼っていないのでクリックしても何も起こりません。

そこにCSSでコーティングをかけていきます。今回は疑似クラスというものを使います。
この疑似クラスとても便利なんです。

擬似クラスとは?

疑似クラスとは、要素内のある特定の文字や行に対してスタイルを指定できるのでたとえば見出しの最初の文字だけ色を変えたり<table>タグを使って複数行の表を作成した際に、偶数行と奇数行で色を変えたりそんなことができるわけです。

では早速CSSを書いてみます。

ボタンに見やすく色を付けたりしてみます。
今はまだ疑似クラスを書いていないのでポインタをボタン上に乗っけても何も変化は現れません。

   ⇒  

疑似クラスの書き方はa:hover{ }
これでhoverしたときにどんな状態になるのかを指定ができます。
※ちなみにこのhoverで指定したスタイルはあくまでもポインタが乗った状態のスタイルを決めるものなのでまだクリックはしていない状態です。
クリックしてから離すまでの状態を指定したいときは:activeというまた別の疑似クラスを使ってコーティングすることができます。

  ⇒  

この記述でホバーしたときにクリックの文字の下に下線が出るように指定しました。これでマウスポインタがクリックボタンの上に乗っかった状態にあることを示しています。

では次に違ったスタイルを指定してみます。
次はopacityプロパティというものを使います。
これは要素の透明度指定することができるプロパティです。数値で0.0~1.0までの値を指定できます。0.0が完全に透明で、数値が上がれば上がるほど不透明になります。
今回はちょうど真ん中の0.5で指定しました。

すると…

ポインタが乗った状態になるとボタンがこのように曇ったような状態になります。

次はもう少し違った変化を与えてみます。
CSSはこんな感じ。

まずはホバーしたときにクリックボタンの色が変わるようにbackground-colorを変えてみます。
次にborder-radiusプロパティですがこちらはbackgroundやimgの要素で指定した要素のボックス型のシェイプの角に丸みを持たせて形に変化をつけることができます。

border-radius: 30px; がイメージ的にはこんな感じです。

このプロパティを使えば様々な形のボックスをCSS でつくることができます。

こうすれば、ホバーしたときに、クリックボタンの色と形を変化させることができます。

続いて<button>以外のタグを使ってホバーのCSSをかけるとどうなるかを試してみます。
まずは一つ<img>タグを使って画像を表示させます。
画像の上にポインタを持っていくと画像が変化したり、文字が出てきたりするのを見たことありますよね?これらもCSSの疑似クラスを使って作ることができます。

例えば画像の上にマウスポインタを持っていくと…

  ⇒  

こんな感じで色付きの枠が出てきたり

  ⇒  

画像が大きくなったり
これらもすべてhoverの疑似クラスで簡単に作れます。

マウスを乗っけたときに自分が思ってたのと違う変化が起こればなんかワクワクしますよね。
そんな読者をハッと驚かせることができるようなデザインを構築できるようにまだまだ勉強が必要ですね。

ネットサーフィンするときにホバーのデザインにもちょっと注目してみるとまた違った楽しみ方ができると思いますよ。