CSSのhoverを使ってアニメーションを設定する方法【初心者向け】
初心者向けにCSSのhoverを使ってマウスオーバーした時にアニメーションを設定する方法について解説しています。Webサイトの表現に幅が出るので覚えておくと良いでしょう。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回はCSSのhoverを使ったマウスオーバー時にアニメーションを設定する方法を説明します。
アニメーションを使えばWebサイトの表現に幅が出るので、書き方を覚えておきましょう。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
田島メンター！！よくサイトでボタンにカーソルを合わせたとき、そのボタンが少し拡大されたり動いたりするのがありますよね。あれってどうやってるんですか～？
マウスオーバー時の動作だね。まずはhoverという擬似クラスを使う必要があるのでそれから説明しよう。
擬似クラスというのは何ですか～？
要素の中の特定の状態を指定するときに使うんだ。hoverはマウスカーソルが乗っていて、かつクリックがされていないときを示すよ。
目次
hoverを使った書き方
「hover」を使った書き方は以下の通りです。
p:hover{
/*マウスオーバー時の処理*/
}
「hover」はカーソルが乗っている要素に対して適用されるスタイルの指定です。
「hover」の擬似クラスというのは「カーソルが乗っているがクリックはされていない状態」を指します。
CSSでは後述されたものが優先して適用されるためにCSSの書き方も重要です。
「hover擬似クラス」の記述の後に「link擬似クラス」を書くと「link擬似クラス」が優先されます。
hoverの基本の書き方だね。
{}内に記述された内容が、マウスオーバー時の動作になるわけですね。
そうだね。次はシンプルな例でhoverを実際に見てみよう。
実際に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;
}
表示結果を確認してみましょう。
「マウスオーバーしています。」という文言にマウスオーバーすると指定した色に変わります。
動的な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では初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
