CSSのhoverを使ってアニメーションを設定する方法【初心者向け】

初心者向けにCSSのhoverを使ってマウスオーバーした時にアニメーションを設定する方法について解説しています。Webサイトの表現に幅が出るので覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

今回はCSSのhoverを使ったマウスオーバー時にアニメーションを設定する方法を説明します。

アニメーションを使えばWebサイトの表現に幅が出るので、書き方を覚えておきましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

大石ゆかり

田島メンター!!よくサイトでボタンにカーソルを合わせたとき、そのボタンが少し拡大されたり動いたりするのがありますよね。あれってどうやってるんですか~?

田島悠介

マウスオーバー時の動作だね。まずはhoverという擬似クラスを使う必要があるのでそれから説明しよう。

大石ゆかり

擬似クラスというのは何ですか~?

田島悠介

要素の中の特定の状態を指定するときに使うんだ。hoverはマウスカーソルが乗っていて、かつクリックがされていないときを示すよ。

 

目次

 

hoverを使った書き方

「hover」を使った書き方は以下の通りです。

p:hover{
  /*マウスオーバー時の処理*/
}

「hover」はカーソルが乗っている要素に対して適用されるスタイルの指定です。

「hover」の擬似クラスというのは「カーソルが乗っているがクリックはされていない状態」を指します。

CSSでは後述されたものが優先して適用されるためにCSSの書き方も重要です。

「hover擬似クラス」の記述の後に「link擬似クラス」を書くと「link擬似クラス」が優先されます。

 

田島悠介

hoverの基本の書き方だね。

大石ゆかり

{}内に記述された内容が、マウスオーバー時の動作になるわけですね。

田島悠介

そうだね。次はシンプルな例でhoverを実際に見てみよう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際にhoverを使ってみよう

実際にコードを書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS hover</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

    <a class="001">マウスオーバーしています。</a>
    <p class="002">マウスオーバーしていません。</p>

  </body>
</html>

 

CSS

a:hover{
  background-color: #5bc0de;
}

 

表示結果を確認してみましょう。

スクリーンショット 2016-08-30 22.05.18

 

「マウスオーバーしています。」という文言にマウスオーバーすると指定した色に変わります。

スクリーンショット 2016-08-30 22.05.28

 

動的なWebページを作っていくうえでは必須のコーディングとなります。

「a:hover」とあればカーソルの乗っているクリックがされていない<a>要素のことを言います。

 

よくあるおすすめマウスオーバー時のアニメーション5つ

Hover.css」と呼ばれるCSSライブラリは手軽にマウスオーバー時のエフェクトをサポートしてくれます。ここでは100種類以上のエフェクトを手軽に使えるようになります。

そんな中でもお勧めできるのは次の5つです。

  • 「Radial Out」 ・・・ 中心から円状に広がるアニメーション
  • 「Icon Down」 ・・・ 設定したアイコンが下がるアニメーション
  • 「Underline From Center」 ・・・ 真ん中からアンダーラインがでるアニメーション
  • 「Box Shadow Inset」 ・・・ ボタンがへこんだようなアニメーション
  • 「Curl Bottom Right」 ・・・ 右下がめくれるアニメーション

 

どれも「Hover.css」で使用することができるので、Webページのコーディングに使用してみてください。

 

以上、hoverを使ったアニメーションの設定方法について紹介しました。

「hover擬似クラス」はWebページコーディングの幅を広げ、動的ページのコーディングを実現します。

 

田島悠介

Hover.cssのサイトで、各ボタンをマウスオーバーしてみよう。

大石ゆかり

色々なアニメーションが確認できますね。

田島悠介

例えばユーザーが入力間違いをしたときは左右に振るなど、そのときの状況に応じたものを使ってみるといいね。

大石ゆかり

色々な表現に挑戦してみます。ありがとうございました!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。