HTML・CSSを使ったマウスオーバー時の挙動変化方法を解説※HTMLのみでも可能

2024.01.06

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

マウスオーバーとは

マウスオーバー（ロールオーバー）とは、ブラウザなどの操作画面にある対象物に対してマウスカーソル（ポインタ）を重ねることです。

今回はマウスオーバーした際に対象物の挙動が変化する方法について解説していきます。

HTMLのみでも可能なので、積極的に取り入れてリッチなサイト制作にお役立てください。

画面上に表示された小さな矢印などのカーソルをマウスなどでポインティングデバイスで動かして操作する方式のコンピュータやソフトウェアで用いられる手法で、対象にカーソルが重なっている間だけ表示状態が切り替わったり、あらかじめ設定された操作や処理が行われたりする。対象の属性や状態をツールチップやポップアップなどで表示するなど、利用者に補助的な情報を知らせるために用いられることが多い。
スマートフォンなどタッチパネル方式で画面に触れて位置を指示するタイプのコンピュータやソフトウェアではマウスカーソルに相当する表示要素がないため、マウスオーバーによる表示・操作も利用できない。
IT用語辞典 e-Words

使用例

主な使用例としては、対象物をクリックしたときに別のページに遷移できることがわかる見た目にします。

対象物のリストとしては「テキスト、ボタン、画像」などがあり、テキストであれば、引用元にリンクが張ってある場合が多く、ボタンであればお申込みページなどへの誘導、画像の場合はより詳しいページへの遷移でしょうか。

以下に対象物ごとのよく使われる変化方法をまとめました。

今回はこの使用例をもとに実際のコードのを掲載しています。

テキストの場合：文字色の変化
ボタンの場合：背景色の変化
画像の場合：透明度の変化

HTMLのみで実装

まずはHTMLのみで実装してみます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://web-camp.io/">
        <img
            src="image/一時停止ボタン.png"
            onmouseover="this.src='image/再生ボタン.png'"
            onmouseout="this.src='image/一時停止ボタン.png'"
        >
    </a>

        
</body>
</html>

<img>要素の中のonmouseoverというのがマウスが対象物に乗っているときの処理になり、onmouseoutというのが、乗っていないときの処理になります。

この場合ですと、常に停止ボタンが表示されており、マウスオーバーすると再生ボタンが表示されるようになっています。

HTMLだけでは、イメージ要素の入れ替えが一番わかりやく、簡単です。

しかしmouseoverとmouseoutでは表現の幅が狭く、やりたいことができません。

CSSも使って実装

CSSのhover:を使うことで、HTMLのみで実装するよりもはるかに自由度の高い変化を与えることができます。

文字色の変更

まずはリンクを作成し、マウスオーバーしたときにテキストカラーを赤色に変更してみましょう。

HTMLファイルのheadタグ内に<link rel=”stylesheet” href=“styles.css”>を追記し、styles.cssファイルを作成しておきましょう。

※上記マーカーの”styles.css”をAlt＋クリックもしくはCommand+クリックすることでファイル作成が可能ですよ。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a class="link-text" href="https://web-camp.io/">DMM WEB Campへのリンク</a>            
</body>
</html>

styles.css
.link-text:hover {
    color: red
}

変更したい対象物のクラス名やid名に対してhover:を追記し、いつも通りCSSを記述するだけでテキストカラーを変化させることができました。

ボタンの変更

続いてクリックしたくなるボタンを作成してみましょう。

WEBサイト作るうえでユーザーが押したくなるボタンを作ることは非常に大事なことです。

なにも変化のないボタンであれば、ボタンと認識されない可能性もあります。

index.html
<a class="button" href="https://web-camp.io/">お申し込みはこちらから</a>

styles.css
.button {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    background: #333;
    padding: 18px 30px;
    border-radius: 6px;
    transition: .3s;
}
.button:hover {
    background-color: #59b1eb;  
}

背景色がふわっと変わるデザインができたと思います。

もともとのbuttonクラスにtransitionを設定することで3秒かけて変化するようにしました。

その他の設定はどのようなボタンを作るかによって変わってくるので、適宜変更してお使いください。

画像にオーバーレイを施す

ホームページなどで、画像に薄い色がかかる処理を見たことがありませんか？

オーバーレイとは、重ねる、被せる、覆うというような意味があります。

既存の画像にオーバーレイを付けて背景色を少し暗くすることで、その上に表示する文字が見やすくなります。

index.html
<img src="https://web-camp.io/magazine/wp-content/uploads/2022/02/css-zoom2.png">
<div class="readmore"><a href="#">read more</a></div>

styles.css
img {
    position: relative;
    width: 300px;
    height: 200px;
}
.readmore {
    width: 300px;
    height: 200px;
    position: absolute;
    background: rgba(0,0,0,0);
    opacity: 0;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    transition: .3s;
}

.readmore:hover {
    background: rgba(0,0,0,0.5);
    opacity: 1;
}

a {
    text-decoration: none;
    color: white;
}

イメージ画像に対して、透明な画像を上乗せしておくために、 position: relative; を設定します。透明画像には position: absolute; を設定してください。

あとは先ほどと同じでhoverしたときに変化するCSSを記述します。

今回はrbgaで設定した透過度を0.5にしてオーバーレイを作成しました。

注意点

背景色をブラック（background-color: black;）などに設定し、opacity: 0.5;という設定にしてしまうと、同じ要素であるテキストも半透明になってしまうので、注意して下さい。

まとめ

マウスオーバー（ロールオーバー）を設定することで、動きのあるWEBサイトを作ることができます。
HTMLとCSSのみで作成可能ですし、コピペ可能な素材もたくさんありますので、
興味のある方は探してみるのもよいでしょう。

Progateのサイト模写をしているときに、マウスホバー時のアクションがうまく設定できずに苦しんだ経験があります。

わかってしまえばなんてことはないのですが、初学事は処理概要を覚えるよりもまず手を動かして、実践していくことが重要です。

後々振り返ったときに誰かに説明できるようになっているので、この記事を参考にしながら、マウスホバーを実装してみてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

資料請求

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする