• 更新日: 2020年09月23日

【CSS】hoverで作る簡単アニメーションとおすすめプロパティ6選

【CSS】hoverで作る簡単アニメーションとおすすめプロパティ6選

この記事では、簡単なアニメーションを作れるhoverについて解説しています。

  • 「ログインボタンが透けるのってどう書いてるの？」
  • 「カーソルを合わせるだけで動きだすようにしたい」
  • 「CSSでいろいろ試してみたい」

動きのあるおもしろい効果をCSSで手軽に作れたら便利ですよね。

そう思っている方のために、今回は以下の3つをご紹介します。

  • hoverの特徴と使い方
  • hoverとセットで使えるプロパティ6選
  • hoverを使ったCSSアニメーション2選

また、記事で紹介しているコードはコピー可能です。

難しいところはコピペして、まずは感覚的に遊んでみてください！

目次
  1. hoverができること
  2. 1.マウスを乗せると動く！
  3. 2.hoverの書き方
  4. hoverとセットで使えるCSSプロパティ6選
  5. 1.【透けさせる】opacity
  6. 2.【マウスカーソルを変える】cursor
  7. 3.【角を丸める】border-radius
  8. 4.【影を出す】box-shadow
  9. 5.【移動・回転・拡大&縮小など】transform
  10. 6.transition
  11. hoverを使ったCSSアニメーション2選
  12. 1.コーナー&カラーチェンジ
  13. 2.文字だけ回転
  14. まとめ

hoverができること

image

まずはhoverの特徴と使い方を解説していきます！


1.マウスを乗せると動く！

hover(=ホバー)とは、 "マウスカーソルが要素に重なったときのアニメーション"です。

……とムズかしく言うより、体験してもらった方が早いかもしれませんね。

以下ブラウザ画面内の色付きボックスに、マウスカーソルを合わせてみてください。


ブラウザ画面
こちらに カーソルを 乗せてね


よく”新規登録はこちら”とか”ログイン”のように、カーソルを乗せると半透明になるボタンなど見たことがあると思います。

このようにhoverはリンクを作るときに出番が多いです。


2.hoverの書き方

まずはhoverの書き方を見ていきましょう。

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

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

hoverに関するポイントは2つ。

  • セレクタ + :(=半角コロン) + hover
  • "セレクタ"と"セレクタ:hover"には、全く同一のセレクタを指定

カンタンな例を用意したので、以下ブラウザ画面でホバーしてみてください。

■使用例


HTML
  • <a>20pxから40pxへ</a>
    • CSS
  • a {
    　font-size: 20px;
    }

  • a:hover {
    　font-size: 40px;
    }

    • ブラウザ画面
    20pxから40pxへ

    文字が20pxから40pxにサイズアップする、非常にシンプルな例ですね。

    • [通常時] → 文字サイズ20px
    • [hover時] → 文字サイズ40px

    "セレクタ:hover"の{ }波カッコ内には、"変化後のプロパティを書き込む"と考えればOKです。


    hoverとセットで使えるCSSプロパティ6選

    image

    ここまではシンプルな例ばかりでしたが、できればもっと変化をつけたいですよね。

    そこでここからは、hoverとセットで使えるCSSプロパティを6つご紹介します！


    1.【透けさせる】opacity

    opacityは要素全体を透けさせるプロパティです。

    セレクタ {
opacity: 0〜1の数値;
}

[例]
div {
opacity: 0.5;
}


    opacityの特徴は以下です。

    • 文字や画像などに使える。
    • 0(透明)〜1(不透明)の数値を指定。例えば0.5なら透明度が50%。

    ホバーしたら半透明になったり、逆に浮かび上がったりするリンクボタンを、Webサイトでもよく見かけますよね。

    ■使用例


    HTML
  • <a class="kanari">かなり透明</a>

  • <a class="sukoshi">すこし透明</a>
    • CSS
  • .kanari {
    　background: skyblue;
    　padding: 8px 16px;
    }

  • .kanari:hover {
    　opacity: 0.3;
    　color: white;
    }

  • .sukoshi {
    　background: mediumseagreen;
    　padding: 8px 16px;
    }

  • .sukoshi:hover {
    　opacity: 0.7;
    　color: white;
    }

    • ブラウザ画面
    かなり透明 すこし透明

    2.【マウスカーソルを変える】cursor

    cursorは、要素に触れたときマウスカーソルのカタチを変えるプロパティです。

    セレクタ {
cursor: auto or default or pointer…他多数;
}

[例]
div {
cursor: pointer;
}

    ※左右にスクロールできます。


    cursorの特徴や使い方は以下です。

    • リンクにカーソルを当てても"指"にならないときpointerにする
    • 多数の値があるが、一部のブラウザでは表示できないものもある。その場合は初期値autoになる。


    3.【角を丸める】border-radius

    border-radiusは、要素の角を丸くするプロパティです。

    以下のように様々な指定方法があります。

    ■角4つまとめて指定

    セレクタ {
border-radius:◯px or ◯% or ◯em;
}

[例]
div {
border-radius: 5px;
}

    ■角1つずつ指定(px、%、emなど)

    セレクタ {
border-radius: 左上 右上 右下 左下;
}

[例]
div {
border-radius: 20% 20% 30% 40%;
}


    border-radiusの特徴や使い方は以下です。

    • 単位はpx、%、emなどを使う
    • 軽く丸める程度ならまとめて指定で4〜7px
    • 50%で円形も作れる

    border-radiusはhoverしていないセレクタでもよく使われ、borderやbackgroundなどとも相性バツグンです。

    ■使用例


    HTML
  • <a class="corner">コーナーチェンジ</a>

  • <a class="round">マル</a>
    • CSS
  • .corner {
    　background: skyblue;
    　padding: 8px 16px;
    }

  • .corner:hover {
    　border-radius: 10px;
    　color: white; }

  • .round {
    　background: mediumseagreen;
    　padding: 32px;
    }

  • .round:hover {
    　border-radius: 50%;
    　color: white; }

    • ブラウザ画面
    コーナーチェンジ マル


    4.【影を出す】box-shadow

    box-shadowは要素に影を作り出すプロパティです。

    セレクタ {
box-shadow: ◯px(右方向の影) ◯px(下方向の影) ◯px(影のぼかし具合) 色;
}

[例]
div {
box-shadow: 5px 0 3px red;
}

    ※左右にスクロールできます。


    box-shadowの特徴や使い方は以下です。

    • pxをマイナスで指定すると、左や上方向にも影を作れる
    • 影のぼかし具合は省略してもOK
    • セレクタでbox-shadowを設定して、セレクタ:hoverでbox-shadow: none;と設定すれば、ホバーしたときに影が消える
    • transformと組み合わせると、リンクボタンを表現しやすい

    transformプロパティもこのあとで紹介するので、ぜひ参考にしてみてください。

    ■使用例


    HTML
  • <div class="bottom-up">ボトムアップ</div>

  • <div class="bottom-down">ボトムダウン</div>
    • CSS
  • .bottom-up {
    　background: skyblue;
    　padding: 8px 16px;
    　color: white;
    }

  • .bottom-up:hover {
    　box-shadow: 0 5px 10px black;
    　transform: translate(0, -5px);
    }

  • .bottom-down {
    　background: mediumseagreen;
    　padding: 8px 16px;
    　color: white;
    　box-shadow: 0 5px black;
    }

  • .bottom-down:hover {
    　box-shadow: none;
    　transform: translate(0, 5px);
    }

    • ブラウザ画面
    ボトムアップ
    ボトムダウン


    5.【移動・回転・拡大&縮小など】transform

    transformは要素を好きな位置にズラしたり、回転させたり、拡大&縮小させたり、自由度の高いプロパティです。

    ■移動

    セレクタ {
transform: translate(右方向◯px, 左方向◯px);
}

[例]
div {
transform: translate(5px, 0);
}

    ※左右にスクロールできます。

    ■回転

    セレクタ {
transform: rotate(◯deg);
}

[例]
div {
transform: rotate(45deg);
}

    ■拡大&縮小

    セレクタ {
transform: scale(縦◯倍, 横◯倍);
}

[例]
div {
transform: scale(0.5, 1.5);
}


    transformの特徴や使い方は以下です。

    • pxをマイナスで指定すると、左や上方向にも移動できる
    • rotateは時計周りに角度をつけられて、マイナス指定もできる
    • rotateX、rotateYとすると、X軸・Y軸での指定もできる
    • たとえば拡大&縮小で"0.5"と指定するとき、0は省略できる → ".5"

    ■使用例


    HTML
  • <div class="trans-late">うごく</div>

  • <div class="trans-rotate">かたむく</div>

  • <div class="trans-scale">ちいさくなる</div>
    • CSS
  • .trans-late {
    　background: skyblue;
    　padding: 16px;
    　color: white;
    }

  • .trans-late:hover {
    　transform: translate(0, 40px);
    }

  • .trans-rotate {
    　background: mediumseagreen;
    　padding: 16px;
    　color: white;
    }

  • .trans-rotate:hover {
    　transform: rotate(30deg);
    }

  • .trans-scale {
    　background: salmon;
    　padding: 16px;
    　color: white;
    }

  • .trans-scale:hover {
    　transform: scale(.7, .7);
    }

    • ブラウザ画面
    うごく
    かたむく
    ちいさくなる


    6.transition

    transitionは、どれくらいの時間をかけて変化するか決めるプロパティです。

    セレクタ {
transition: 変化の対象プロパティ 変化するまでの秒数◯s;
}

[例]
セレクタ {
transition: color 0.5s
}

    ※左右にスクロールできます。


    transitionの特徴や使い方は以下です。

    • "セレクタ"から"セレクタ:hover"までの変化の秒数を決める
    • 通常hoverには書かない
    • 変化の対象にallと書くと、すべてのプロパティを選べる

    ■使用例


    HTML
  • <div class="only-background">色だけ変化</div>

  • <div class="all">すばやく大きくなる</div>
    • CSS
  • .only-background {
    　background: skyblue;
    　padding: 16px;
    　color: white;
    　transition: background 1s;
    }

  • .only-background:hover {
    　background: red;
    }

  • .all {
    　background: mediumseagreen;
    　padding: 16px;
    　color: white;
    　transition: all 0.2s;
    }

  • .all:hover {
    　transform: scale(1.3, 1.3);
    }

    • ブラウザ画面
    ゆっくり色だけ変化
    すばやく大きくなる


    hoverを使ったCSSアニメーション2選

    image

    これまでのプロパティを組み合わせて、簡単なアニメーションを作ってみましょう！

    1.コーナー&カラーチェンジ

    コーナーと文字色&背景色が変わるホバーです。


    HTML
  • <div class="corner-color">コーナー&色変化</div>
    • CSS
  • .corner-color {
    　cursor: pointer;
    　border: solid 1px black;
    　color: black;
    　padding: 32px;
    　transition: all 0.3s;
    }

  • .corner-color:hover {
    　background: black;
    　color: white;
    　border-radius: 20px;
    }

    • ブラウザ画面
    コーナー&色変化


    borderで中の文字を線で囲い、paddingで余白をつけてその線を大きく広げています。

    transitionによって、.corner-colorの全プロパティが0.3秒かけてhoverで指定したプロパティに変化。

    また、hoverで指定されていないcursorやborderも、消えてはいないですね。


    2.文字だけ回転

    中の文字だけ回転するホバーです。


    HTML
  • <div><span class="font-round" >文字だけ回転</span></div>
    • CSS
  • div {
    　cursor: pointer;
    　border: solid 1px black;
    　padding: 32px;
    }

  • .font-round {
    　display: inline-block;
    　color: black;
    　transition: all 1s;
    }

  • .font-round:hover {
    　color: red;
    　transform: rotateX(360deg);
    }

    • ブラウザ画面
    文字だけ回転


    今回は文字をホバーしたときだけ反応させたいので、spanタグでテキスト部分を囲いました。

    rotateXはX軸を起点に傾けるムズかしそうな値ですが、使ってみると案外カンタン。

    また、transformはインライン要素には効かないので、インライン要素のspanタグをインラインブロック要素に変更しています。


    ＼一流デザイナーのスキルが身に付く／

    無料カウンセリングはこちら

    まとめ

    この記事では、以下を中心にhoverをご紹介しました。

    • hoverの特徴と使い方
    • hoverとセットで使えるプロパティ6選
    • hoverを使ったCSSアニメーション2選

    hoverを使えるようになるだけで、デザインの幅が一気に広がります。

    動きのあるサイト作りの第一歩として、ぜひhoverを習得してみてください！

    関連記事

    佐藤恭平
    この記事を書いた人
    佐藤恭平

    人気記事

    1. 【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
      【2022年版】社会人でも通いやすいプログラミング教室5選｜選び方の基準も解説
      プログラミング学習
      プログラミングスクール・サービス
    2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
      塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
      受講生インタビュー
    3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
      様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
      講師インタビュー
    4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
      【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
      Python
      プログラミング書籍・参考書
    5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
      【PHP入門徹底ガイド】初心者のための学習ロードマップ
      PHP
      プログラミング入門
    6. コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
      コロナに負けるな！プログラミング&YouTubeで頑張る人が作るべきアプリ
      Python
      HTML
      CSS
      お役立ち情報
      アプリ学習入門
    7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
      【Twitter×Python】自分専用のエゴサーチボットを作る方法
      Python
    8. Webデザインから見たSEO
      Webデザインから見たSEO
      Webデザイン入門
      Webデザインお役立ち情報
    9. 未経験からのWebデザイナー転職を有利にする資格４選
      未経験からのWebデザイナー転職を有利にする資格４選
      Webデザインお役立ち情報
      転職
    まずは7日間お試し！人気プログラミング講座を無料公開中
    オンライン・プログラミングレッスンNo.1のCodeCamp
    プログラミング講座を無料で試す