サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

マウスオーバーアクションをつける – CSS :hover

マウスオーバーアクションをつける – CSS :hover

この記事にはプロモーションが含まれています。

クリックできるボタンにマウスポインタが乗っかった時、ボタンが光ったり、色が変わったりするのを見たことがある人も多いと思います。
下のサンプルはクリックしても何も起こりませんが、試しにサンプルとしてマウスポインタを乗っけてみて下さい。（スマホの方はタップでアクションが起こります）

マウスオーバーサンプル
マウスポインタを乗っけてみてください。

これは、ただ単にオシャレとかカッコいいとかだけではなく、これはクリックできるボタンだと分かりやすくしている…というUIとしての役割も果たしています。

用語解説：UI（ユーザーインターフェース）

現代はPCではなくスマホでWebサイトを閲覧することの方が多くなったこともあり、昔ほどマウスオーバーによる変化が重要ではなくなっているものの、WebサイトをPCで表示する時には欠かせない基本的なテクニックです。

実際のWebサイト制作の案件でも、マウスオーバーアクション（アニメーション）の実装を求められることは多いと思うので、初心者でもマスターしておきたいCSSと言えます。

– 目次 –
CSSでマウスオーバーアクションを実装

擬似クラス【:hover】

マウスオーバーで要素に変化（アクション）をつけるには、:hoverという擬似クラスを使います。
擬似クラスとは、特定の条件下で要素にクラスを付与することで、その条件下でCSSによる見た目の変化を加えられる仕組みだと思ってください。

そして今回の記事で紹介する「条件」は、マウスが要素の上に乗っかった時（マウスオーバー）です。

擬似クラスの使い方は簡単で、対象のセレクタに、:hoverを付け加えるだけです。

以下のサンプルはテキスト要素に”sample_text”というclass名をつけて、それをセレクタとして指定し、背景色（background-color）と、文字色（color）をつけたものです。
当然、テキストに色と背景色がついただけで、マウスを乗っけても変化はありません。

    <p class="sample_text">サンプルテキスト</p>

      .sample_text {
        width: fit-content;
        width: -moz-fit-content;
        padding: 15px;
        margin: 2rem auto;
        background-color: lightblue;
        color: darkblue;
      }

サンプルテキスト

それでは、擬似クラス :hover を使って次のコードを追加してみましょう。 .sample_text:hover { background-color: white; }

これで、マウスを乗っけたら背景色が白に切り替わるようになります。

    <p class="sample_text">サンプルテキスト</p>

      .sample_text {
        width: fit-content;
        width: -moz-fit-content;
        padding: 15px;
        margin: 2rem auto;
        background-color: lightblue;
        color: darkblue;
      }
      .sample_text:hover {
        background-color: white;
      }

サンプルテキスト

「要素にアクションをつける」というとハードルが高いように感じるかもしれませんが、仕組みはとっても単純でCSSの記述も簡単です。
サンプルのように背景色が変わるというだけでもWebページに動きが生まれてメリハリが出るので、「THE・初心者が作りました！」的なWebサイトから一歩脱却することができますよ！

    POINT!
  1. ・特定の条件下でクラスを付与する仕組みを「擬似クラス」という！
  2. ・マウスオーバーの擬似クラスは「:hover」！
  3. ・要素のセレクタに擬似クラスをくっつけて、マウスオーバーで変化させたいCSSを設定するだけでOK！

transitionの指定も必須

マウスオーバーで見た目を切り替える方法は前述の通りですが、このままでは要素にマウスポインタが乗っかった瞬間に、一瞬でパッと表示が切り替わってしまいます。

下に前章で作成したサンプルを再び置いたので、あらためてマウスポインタを乗っけてみてください。
一瞬で見た目が切り替わるので、なんだか雑でそっけない感じになってしまっているのが確認できますね。

サンプルテキスト

では、今度は少し時間をかけて、じわっと変化するサンプルを用意したので、マウスポインタを乗っけて比べてみてください。

サンプルテキスト

いかがでしょうか？じわっと変化させた方が、アクションが柔らかく、丁寧なイメージになりました。
もちろん、瞬間的にパッと切り替わるアクションが絶対ダメということはありませんが、通常のアクション・アニメーションは、フワッと変化させたい場合が多いです。
そして、そのために必要なCSSプロパティが、transitionです。

transitionプロパティは、擬似クラスやJavaScriptで要素のスタイル（CSS）に変化を加える際に、どれだけ時間をかけて変化させるかを指定するCSSプロパティです。

値は、数値＋単位（時間）で指定します。例えば、1秒かけて変化させたいのであれば
{ transition: 1s; }
となります。

それでは、transitionプロパティを使って、マウスオーバー時にふわっと変化させるアクションのCSSコードを確認していきましょう。

    <p class="sample_text">サンプルテキスト</p>

      .sample_text {
        width: fit-content;
        width: -moz-fit-content;
        padding: 15px;
        margin: 2rem auto;
        background-color: lightblue;
        color: darkblue;
        transition: .4s;
      }
      .sample_text:hover {
        background-color: white;
      }

サンプルテキスト

元々の要素（擬似クラスではない方）に、transitionプロパティを追加しただけで、フワッと変化するマウスオーバーアクションが実装できました。

また、余談ですがtransitionプロパティは変化にかかる時間を、CSSプロパティ別に指定することも可能です。
たとえば、背景色はゆっくりと2秒かけて、テキストカラーは素早く0.2秒かけて変化させたい場合は以下のようになります。

    <p class="sample_text">サンプルテキスト</p>

      .sample_text {
        width: fit-content;
        width: -moz-fit-content;
        padding: 15px;
        margin: 2rem auto;
        background-color: lightblue;
        color: darkblue;
        transition: background-color 2s, color .2s;
      }
      .sample_text:hover {
        background-color: white;
        color: red;
      }

サンプルテキスト

少し複雑なアニメーションを実装したい場合には必要となる知識なので、ついでに覚えておくと良いでしょう。

    POINT!
  1. ・transitionプロパティを指定することで、フワッと変化するアクションを実装できる！
  2. ・transitionプロパティは数値＋単位（時間）で指定する！
  3. ・CSSプロパティ別に、変化にかかる時間を指定することも可能！

マウスオーバーアクション例１

マウスオーバーの仕組みがわかったところで、実際のWebサイトでよく実装されているマウスオーバーアクションをご紹介していこうと思います。
※既に紹介している、背景色・文字色を変えるアクションは省略します。

１opacityプロパティを使って、少し透明にする

opacityプロパティは画像（img要素）などを含めて全てのHTMLタグに使用可能であり、また透明度を変更するだけなのでイメージを崩さずに、さりげないアクションにすることができます。
それゆえ、マウスオーバーアクションでは最もよく使用されているテクニックと言えるかと思います。

＊マウスオーバーで不透明度が変化＊

マウスオーバーを設定した画像

▲CSSコードは、:hoverの擬似クラスにopacityプロパティを適用させるだけなので、コード掲載は省略します。（opacityプロパティについての記事はこちら）
クリックできる画像に設定されることが多いマウスオーバーアクションですね。
ポイントは、不透明度を下げ過ぎず、さりげない感じになるように指定するという点です。

ケースバイケースではありますが、opacityの値は0.6〜0.8ぐらいを目安にすると良いと思います。

・　・　・

２transformプロパティ・background-sizeプロパティを使って大きくする。

transformプロパティのscale( )を使ったり、あるいはbackground-sizeプロパティを使ったりして、マウスオーバーでクリックできるボタンや背景画像を拡大するというアクションもよく見かけます。

＊マウスオーバーで拡大＊

サンプルボタン

▲ついでに色も変えてみました。CSSコードは以下のようになっています。

    <p class="sm_over_scale01">サンプルボタン</p>
      .sm_over_scale01 {
        margin: 1.5rem auto 3rem;
        width: fit-content;
        width: -moz-fit-content;
        padding: 15px;
        border-radius:8px;
        background-color: white;
        color: darkblue;
        cursor: pointer;
        transition: color .4s, background-color .4s, transform .7s;
      }
      .sm_over_scale01:hover {
        transform: scale(1.15);
        background-color: darkblue;
        color: white;
      }

そして次に、background-sizeプロパティを利用して、マウスオーバーで背景画像が大きくなるサンプルの紹介です。

＊マウスオーバーで背景画像が拡大＊

▲こういったマウスオーバーアクションはブログサイトなどでよく見かけます。
サムネイル画像にマウスポインタを乗っけると、サムネイル画像がちょっと大きくなるみたいなやつですね。
こちらのサンプルのCSSコードは以下のようになってます。

    <div class="sm_over_scale02"></div>

      .sm_over_scale02 {
        width: 100%;
        margin:2rem auto;
        max-width: 700px;
        height: 400px;
        transition: .5s;
        background-image: url('https://web-de-asobo.net/wp-content/uploads/2021/10/publicdomainq-0058560lyellp.jpg');   
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
      }
      .sm_over_scale02:hover {
        background-size: 150% auto;
      }
      @media screen and (max-width: 767px) {
        .sm_over_scale02 {
          height: 200px;
        }
      }

ちなみに、画像を大きくしたいからといってimgタグで配置した画像をtransform:scale( )で大きくしてしまうと、当然ですが外枠(要素のwidthとheight)ごと大きくなってしまいます。
なので、サンプルのように枠はそのままに画像だけ大きしたい場合は、background-sizeプロパティを使う必要があるというわけですね。
※background-sizeプロパティについての記事はこちらをご覧ください。

    POINT!
  1. ・よく使われるマウスオーバーアクションの代表は、不透明度を変化や要素の拡大！
  2. ・不透明度を変化させる場合は、不透明度を下げ過ぎずさりげない感じにすると良い！
  3. ・外枠はそのままで画像を大きく拡大させたい場合は背景画像として配置し、background-sizeを使うと良い！

マウスオーバーアクション例２

マウスオーバーアクションはクリックできるボタンや画像だけでなく、メニューの開閉として利用されることも多いです。

メニューのタイトル（メニューリストの一番上）以外をopacity: 0; height: 0; などでマウスポインタが乗っかっていない時に隠しておきます。

そしてメニュー全体（サンプルではul要素）のマウスオーバーの擬似クラスと、セレクタ指定の > li を使い、ul要素にマウスポインタが乗っかった時のli要素に対し、opacity、heightの値を指定してメニューが現れるようにすれば完成です。

  • ABOUT
  • ご挨拶
  • 会社概要
  • 当Webサイトについて
    <div class="menu_outer01">
      <ul class="sample_menu_list01">
        <li class="sample_menu_title01">ABOUT</li>
        <li>ご挨拶</li>
        <li>会社概要</li>
        <li>当Webサイトについて</li>
      </ul>
    </div>


      .sample_menu_list01 {
        padding-inline-start: 0;
        position: relative;
        width: fit-content;
        width: -moz-fit-content;
        margin: 4rem auto;
        cursor: pointer;
      }
      .sample_menu_list01 li {
        background-color: lightgreen;
        list-style: none;
        width: 250px;
        padding: 10px;
        border-bottom: solid darkgreen thin;
        display: grid;
        align-items: center;
        transition: opacity .4s, height .4s, background-color .1s, color .1s;
      }
      .sample_menu_list01 li:last-child {
        border-bottom: none;
      }
      li.sample_menu_title01 {
        background-color: darkgreen;
        z-index: 1;
        color: white;
      }
      .sample_menu_list01 li:not(.sample_menu_title01) {
        opacity: 0;
        height: 0;
        position: relative;
      }
      /* メニューを表示させるためのCSS */
      .sample_menu_list01:hover > li:not(.sample_menu_title01) {
        opacity: 1;
        height: 2rem;
      }
      /* メニューにカーソルを合わせた時のアクション */
      .sample_menu_list01 li:not(.sample_menu_title01):hover {
        background-color: rgba(62, 139, 30, 0.52);
        color: white;
      }

ここで一つ注意点です。
上のサンプルではheightの値を変えることでメニューが開閉するようなアニメーションにしていますが、メニューが開いた後のheightをautoなどのブラウザの自動計算値にしてしまうと、transitionで指定したアニメーションの完了時間が無視されて、アニメーションにならなくなります。

なので、アニメーションにする場合のheightの値は【 **px（他、remなど） 】というように、明示的に示す必要があります。

また、あまり一般的とは言えませんが、下のサンプルのように左からスライドして現れるメニューというのもなかなか面白いかと個人的には思います。

  • ABOUT
  • ご挨拶
  • 会社概要
  • 当Webサイトについて
    <div class="menu_outer">
      <ul class="sample_menu_list03">
        <li class="sample_menu_title03">ABOUT</li>
        <li>ご挨拶</li>
        <li>会社概要</li>
        <li>当Webサイトについて</li>
      </ul>
    </div>


      .sample_menu_list03 {
        padding-inline-start: 0;
        position: relative;
        width: fit-content;
        width: -moz-fit-content;
        margin: 4rem auto;
        cursor: pointer;
        height: 2rem;
      }
      .sample_menu_list03 li {
        background-color: lightgreen;
        list-style: none;
        width: 250px;
        padding: 10px;
        border-bottom: solid darkgreen thin;
        display: grid;
        align-items: center;
        transition: .4s;
      }
      .sample_menu_list03 li:last-child {
        border-bottom: none;
      }
      li.sample_menu_title03 {
        background-color: darkgreen;
        z-index: 1;
        color: white;
      }
      .sample_menu_list03 li:not(.sample_menu_title03) {
        opacity: 0;
        position: relative;
        left: -100px;
        pointer-events: none;
      }
      /* メニューを表示させるためのCSS */
      .sample_menu_list03:hover > li:not(.sample_menu_title03) {
        opacity: 1;
        left: 0;
        pointer-events: auto;
      }
      /* メニューにカーソルを合わせた時のアクション */
      .sample_menu_list03 li:not(.sample_menu_title03):hover {
        background-color: rgba(62, 139, 30, 0.52);
        color: white;
      }

▲class名が「02」を飛ばして「03」になっているのはあまり気にしないでください。
pointer-eventsプロパティを、none→autoにしているのは、このように設定しないと、マウスポインタが離れてメニューが左にスライドして消えかける際に、メニューをマウスポインタで追いかけようとするとおかしな挙動になってしまうからです。
要するに、左に消えていくメニューにマウスポインタが乗っかっても影響が出ないようにするためのCSSです。

:hoverという疑似クラスを使えば、とりあえずはマウスオーバーアクションを実装できますが、少し複雑なアクションにしようとすると様々なCSSの知識やテクニックが必要になります。

この記事をご覧の皆さんも、様々なCSSを駆使して、ステキなマウスオーバーアクションを作ってみてくださいね！

    POINT!
  1. ・マウスオーバーアクションは、メニューの開閉に使われることも多い！
  2. ・height/widthをマウスオーバーアクションに利用する時は、値がautoだとアニメーションにならない場合がある！
  3. ・場合によってはpointer-eventsプロパティなど、様々なCSSを組み合わせる必要が出る場合もある！

今回の動画で紹介したコード！

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    p,ul {
      margin-block-start: 0;
      margin-block-end: 0;
    }
      .sample_text {
        width: 200px;
        padding: 15px;
        margin: 2rem auto;
        background-color: lightblue;
        color: darkblue;
        transition: .5s;
      }
      .sample_text:hover {
        width: 400px;
      }

      button {
        padding: 15px;
        border-radius:8px;
        background-color: white;
        color: darkblue;
        cursor: pointer;
        transition: color 4.4s, background-color .4s, transform 2s;
      }
      button:hover {
        transform: scale(2);
        background-color: darkblue;
        color: white;
      }

      .sm_over_scale02 {
        width: 100%;
        margin:2rem auto;
        max-width: 700px;
        height: 400px;
        transition: .5s;
        background-image: url('https://web-de-asobo.net/wp-content/uploads/2021/10/publicdomainq-0058560lyellp.jpg');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
      }
      .sm_over_scale02:hover {
        background-size: 150% auto;
      }

      .sample_menu_list01 {
        padding-inline-start: 0;
        position: relative;
        width: fit-content;
        width: -moz-fit-content;
        margin: 4rem auto;
        cursor: pointer;
      }
      .sample_menu_list01 li {
        background-color: lightgreen;
        list-style: none;
        width: 250px;
        padding: 10px;
        border-bottom: solid darkgreen thin;
        display: grid;
        align-items: center;
        transition: .4s;
      }
      .sample_menu_list01 li:last-child {
        border-bottom: none;
      }
      li.sample_menu_title01 {
        background-color: darkgreen;
        z-index: 1;
        color: white;
      }
      .sample_menu_list01 li:not(.sample_menu_title01) {
        opacity: 0;
        height: 0;
        position: relative;
      }
      /* メニューを表示させるためのCSS */
      .sample_menu_list01:hover > li:not(.sample_menu_title01) {
        opacity: 1;
        height: 2rem;
      }
      /* メニューにカーソルを合わせた時のアクション */
      .sample_menu_list01 li:not(.sample_menu_title01):hover {
        background-color: rgba(62, 139, 30, 0.52);
        color: white;
      }

      .sample_menu_list02 {
        padding-inline-start: 0;
        position: relative;
        width: fit-content;
        width: -moz-fit-content;
        margin: 4rem auto;
        cursor: pointer;
      }
      .sample_menu_list02 li {
        background-color: lightgreen;
        list-style: none;
        width: 250px;
        padding: 10px;
        border-bottom: solid darkgreen thin;
        display: grid;
        align-items: center;
        transition: .4s;
      }
      .sample_menu_list02 li:last-child {
        border-bottom: none;
      }
      li.sample_menu_title02 {
        background-color: darkgreen;
        z-index: 1;
        color: white;
      }
      .sample_menu_list02 li:not(.sample_menu_title02) {
        opacity: 0;
        height: 0;
        position: relative;
      }
      /* メニューを表示させるためのCSS */
      .sample_menu_list02:hover > li:not(.sample_menu_title02) {
        opacity: 1;
        height: auto;
        top: 0;
        position: relative;
      }
      /* メニューにカーソルを合わせた時のアクション */
      .sample_menu_list02 li:not(.sample_menu_title02):hover {
        background-color: rgba(62, 139, 30, 0.52);
        color: white;
      }

      .sample_menu_list03 {
        padding-inline-start: 0;
        position: relative;
        width: fit-content;
        width: -moz-fit-content;
        margin: 4rem auto;
        cursor: pointer;
        height: 2rem;
      }
      .sample_menu_list03 li {
        background-color: lightgreen;
        list-style: none;
        width: 250px;
        padding: 10px;
        border-bottom: solid darkgreen thin;
        display: grid;
        align-items: center;
        transition: .4s;
      }
      .sample_menu_list03 li:last-child {
        border-bottom: none;
      }
      li.sample_menu_title03 {
        background-color: darkgreen;
        z-index: 1;
        color: white;
      }
      .sample_menu_list03 li:not(.sample_menu_title03) {
        opacity: 0;
        position: relative;
        left: -100px;
        pointer-events: none;
      }
      /* メニューを表示させるためのCSS */
      .sample_menu_list03:hover > li:not(.sample_menu_title03) {
        opacity: 1;
        left: 0;
        pointer-events: auto;
      }
      /* メニューにカーソルを合わせた時のアクション */
      .sample_menu_list03 li:not(.sample_menu_title03):hover {
        background-color: rgba(62, 139, 30, 0.52);
        color: white;
      }

      @media screen and (max-width: 767px) {
        .sm_over_scale02 {
          height: 200px;
        }
      }
    </style>
  </head>
  <body>

    <div style="height: 300px"></div>

    <p class="sample_text">サンプルテキスト</p>

    <div style="height: 300px"></div>

    <div style="width: fit-content; margin: 0 auto;">
      <button>サンプルボタン</button>
    </div>

    <div style="height: 300px"></div>

    <div class="sm_over_scale02"></div>

    <div style="height: 300px"></div>

    <p style="text-align: center; margin-bottom: -2rem;">height: 0; → height: 2rem;<br>transition: .4s</p>

    <div class="menu_outer01">
      <ul class="sample_menu_list01">
        <li class="sample_menu_title01">ABOUT</li>
        <li>ご挨拶</li>
        <li>会社概要</li>
        <li>当Webサイトについて</li>
      </ul>
    </div>

    <p style="text-align: center; margin-bottom: -2rem;">height: 0; → height: auto;<br>transition: .4s</p>

    <div class="menu_outer">
      <ul class="sample_menu_list02">
        <li class="sample_menu_title02">ABOUT</li>
        <li>ご挨拶</li>
        <li>会社概要</li>
        <li>当Webサイトについて</li>
      </ul>
    </div>

    <div style="height: 300px"></div>

    <div class="menu_outer">
      <ul class="sample_menu_list03">
        <li class="sample_menu_title03">ABOUT</li>
        <li>ご挨拶</li>
        <li>会社概要</li>
        <li>当Webサイトについて</li>
      </ul>
    </div>

  </body>
</html>
記事のトップへ戻る

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ（iOS・Android)ディベロッパー＆デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第３火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語：JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格：応用情報技術者/基本情報技術者/ウェブデザイン技能検定３級

Twitterアイコン Instagramアイコン