toggle
札幌市東区でマンガ・イラスト制作、WEBデザイン・DTP制作、雑貨制作、プラモ制作などを行う就労支援事業所です。マスコットキャラクター、ミライクマ3兄弟のLINEスタンプ好評発売中!
2019-11-22

ロールオーバー

みなさんこんにちは。web担当のまるたにです。
いきなりはじまるweb講座。ついついやってしまいました。
でもいきなり出しても気にしないのが私なので今後もよろしくお願いします(?)。

はい、ホームページにかかせないメニューありますよね。
あれをかっこよくしたい。
色々あります。

↓↓ マウスを当ててみてください。

HOME
 
HOME
 
HOME
 
HOME
 
HOME
 
HOME
 
HOME
 
HOME

HOME
 
HOME
 
HOME
 
HOME
 
HOME
 
HOME ←押せるよ!
 
HOME ←押せるよ!

※スマホからは相変わらず見にくいですごめんね。

こんな風にアレンジできます。
じゃあJavascriptなの?cssなの?って思う方もいます。
てかなるべく楽な方法がいい・・・。ロールオーバーみたいな
感じに出来ないの??

って思う方はちょっとここ押して飛んで見て頂きたい。いろんなやり方が載っていますので。

demo

画像使ってるのでこの記事にその通り記述しちゃうとうまくいかないので
やり方も贅沢に載せますね!

<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="">
<title>ロールオーバー練習</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrap">
<h1>様々なロールオーバー練習</h1>

	<div class="box nav_01">
	<h2>その1 CSSのみでbackground-imageを切替えて表現</h2>
	<ul>
	<li class="li_01"><a href="#">HOME</a></li>
	<li class="li_02"><a href="#">ABOUT</a></li>
	<li class="li_03"><a href="#">INFO</a></li>
	<li class="li_04"><a href="#">MAIL</a></li>
	</ul>
	<h3>メリット</h3>
	<p>画像サイズや画像ファイル名に変更があった場合、<br>
	HTMLを修正する必要がない(CSSのみの修正で済む)</p>
	<h3>デメリット</h3>
	<p>通常時・オーバー時共に背景画像として設定しているため、<br>
	印刷時にデフォルトの設定だと画像が表示されない</p>
	</div>

	<hr>

	<div class="box nav_02-1">
	<h2>その2-1 CSSスプライトで表現(各ボタン毎)</h2>
	<ul>
	<li class="li_01"><a href="#">HOME</a></li>
	<li class="li_02"><a href="#">ABOUT</a></li>
	<li class="li_03"><a href="#">INFO</a></li>
	<li class="li_04"><a href="#">MAIL</a></li>
	</ul>
	<h3>メリット</h3>
	<p>ロールオーバー前、後の画像が1枚になっているため切替時の画像読み込みが発生しない<br>
	画像のリクエスト回数を削減できる<br>
	画像サイズや画像ファイル名に変更があった場合、HTMLを修正する必要がない(CSSのみの修正で済む)</p>
	<h3>デメリット</h3>
	<p>ロールオーバー前、後の画像をひとまとめにした画像を用意する必要がある<br>
	通常時・オーバー時共に背景画像として設定しているため、印刷時にデフォルトの設定だと画像が表示されない</p>
	</div>


	<div class="box nav_02-2">
	<h2>その2-2 CSSスプライトで表現(ナビが1枚の画像)</h2>
	<ul>
	<li class="li_01"><a href="#">HOME</a></li>
	<li class="li_02"><a href="#">ABOUT</a></li>
	<li class="li_03"><a href="#">INFO</a></li>
	<li class="li_04"><a href="#">MAIL</a></li>
	</ul>
	<h3>メリット</h3>
	<p>ロールオーバー前、後の画像が1枚になっているため切替時の画像読み込みが発生しない<br>
	画像のリクエスト回数を削減できる<br>
	画像サイズや画像ファイル名に変更があった場合、HTMLを修正する必要がない(CSSのみの修正で済む)</p>
	<h3>デメリット</h3>
	<p>1つめのCSSスプライトよりしっかり計算して作る手間がかかる</p>
	</div>
	
	<hr>
	
	<div class="box nav_03">
	<h2>その3 img+マウスオーバーでimg非表示</h2>
	<ul>
	<li class="li_01"><a href="#"><img src="img/rollover_01_01.jpg" width="150" height="50" alt="HOME"></a></li>
	<li class="li_02"><a href="#"><img src="img/rollover_01_02.jpg" width="150" height="50" alt="ABOUT"></a></li>
	<li class="li_03"><a href="#"><img src="img/rollover_01_03.jpg" width="150" height="50" alt="INFO"></a></li>
	<li class="li_04"><a href="#"><img src="img/rollover_01_04.jpg" width="150" height="50" alt="MAIL"></a></li>
	</ul>
	<h3>メリット</h3>
	<p>ロールオーバー前、後の画像が1枚になっているため切替時の画像読み込みが発生しない<br>
	cssの記述を比較的理解しやすい</p>
	<h3>デメリット</h3>
	<p>画像サイズや画像ファイル名に変更があった場合、修正箇所が多い(HTMLとCSS両方)</p>
	</div>

	<hr>

	<div class="box nav_04">
	<h2>その4 画像を透明にする</h2>
	<ul>
	<li class="li_01"><a href="#"><img src="img/rollover_01_01.jpg" width="150" height="50" alt="HOME"></a></li>
	<li class="li_02"><a href="#"><img src="img/rollover_01_02.jpg" width="150" height="50" alt="ABOUT"></a></li>
	<li class="li_03"><a href="#"><img src="img/rollover_01_03.jpg" width="150" height="50" alt="INFO"></a></li>
	<li class="li_04"><a href="#"><img src="img/rollover_01_04.jpg" width="150" height="50" alt="MAIL"></a></li>
	</ul>
	<h3>メリット</h3>
	<p>html/cssの記述を比較的理解しやすい</p>
	<h3>デメリット</h3>
	<p>背景の色次第で使えない場合がある</p>
	</div>

	<hr>

	<div class="box nav_05">
	<h2>その5 onmouseout属性,onmouseover属性(JavaScript)</h2>
	<ul>
	<li class="li_01"><a href="#"><img src="img/rollover_01_01.jpg" width="150" height="50" alt="HOME" onmouseover="this.src='img/rollover_01_05.jpg'" onmouseout="this.src='img/rollover_01_01.jpg'"></a></li>
	<li class="li_02"><a href="#"><img src="img/rollover_01_02.jpg" width="150" height="50" alt="ABOUT" onmouseover="this.src='img/rollover_01_06.jpg'" onmouseout="this.src='img/rollover_01_02.jpg'"></a></li>
	<li class="li_03"><a href="#"><img src="img/rollover_01_03.jpg" width="150" height="50" alt="INFO" onmouseover="this.src='img/rollover_01_07.jpg'" onmouseout="this.src='img/rollover_01_03.jpg'"></a></li>
	<li class="li_04"><a href="#"><img src="img/rollover_01_04.jpg" width="150" height="50" alt="MAIL" onmouseover="this.src='img/rollover_01_08.jpg'" onmouseout="this.src='img/rollover_01_04.jpg'"></a></li>
	</ul>
	<h3>メリット</h3>
	<p>cssに記述不要</p>
	<h3>デメリット</h3>
	<p>Javascriptの理解が多少必要<br>
	JavaScriptを使用しているため、閲覧側でJavaScriptの動作をオフにしている場合は正しく動作しない</p>
	</div>

	<hr>
	<div class="box">
		<h2>おまけ:時間差で表現</h2>
		<p>一部のパターンの各a要素に下記の記述を足すと時間を掛けての変化になるため動的な表現に見える<br>
		-webkit-transition: 0.3s ease-in-out;<br>
		-moz-transition: 0.3s ease-in-out;<br>
		-o-transition: 0.3s ease-in-out;<br>
		transition: 0.3s ease-in-out;</p>
	</div>
</div>
</body>
</html>

@charset "utf-8";

*{
	margin: 0;
	padding: 0;
}
body{
	font-family: sans-serif;
	background: url(img/bg.jpg);
}
#wrap{
	width: 960px;
	margin: 10px auto 10px;
	padding: 10px 0 30px;
	background: rgba(255,255,255,0.95);
}
h1{
	margin-bottom: 50px;
	text-align: center;
	background: #999;
	color: #fff;
}
h2{
	margin-bottom: 15px;
	font-weight: normal;
	font-size: 130%;
	color: #666;
}
h3{
	border-left: 5px solid #0ad0d2;
	margin-bottom: 10px;
	padding-left: 15px;
}
p{
	margin-bottom: 20px;
}
.box{
	margin-bottom: 30px;
	margin-left: 20px;
}
ul{
	list-style: none;
	overflow: hidden;
	margin-bottom: 20px;
}
img{
	vertical-align: bottom;
	border: none;
}
hr{
	width: 700px;
	text-align: left;
	margin-left: 20px;
	margin-bottom: 15px;
}
/******** ロールオーバー設定 ********************
******************************************************************/

/******** その1 ********/
.nav_01 li{
	width: 150px;
	height: 50px;
	float: left;
/*	text-indent: -9999px;*/
	white-space:nowrap;
	text-indent: 100%;
	overflow: hidden;
}
.nav_01 li a{
	display: block;
	width: 150px;
	height: 50px;
}
.nav_01 .li_01 a{
	background: url(img/rollover_01_01.jpg);
}
.nav_01 .li_01 a:hover{
	background: url(img/rollover_01_05.jpg);
}
.nav_01 .li_02 a{
	background: url(img/rollover_01_02.jpg);
}
.nav_01 .li_02 a:hover{
	background: url(img/rollover_01_06.jpg);
}
.nav_01 .li_03 a{
	background: url(img/rollover_01_03.jpg);
}
.nav_01 .li_03 a:hover{
	background: url(img/rollover_01_07.jpg);
}
.nav_01 .li_04 a{
	background: url(img/rollover_01_04.jpg);
}
.nav_01 .li_04 a:hover{
	background: url(img/rollover_01_08.jpg);
}


/******** その2-1 ********/

.nav_02-1 li{
	width: 150px;
	height: 50px;
	float: left;
/*	text-indent: -9999px;*/
	white-space:nowrap;
	text-indent: 100%;
	overflow: hidden;
}
.nav_02-1 li a{
	display: block;
	width: 150px;
	height: 50px;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.nav_02-1 .li_01 a{
	background: url(img/rollover_02_01.jpg);
}
.nav_02-1 .li_02 a{
	background: url(img/rollover_02_02.jpg);
}

.nav_02-1 .li_03 a{
	background: url(img/rollover_02_03.jpg);
}
.nav_02-1 .li_04 a{
	background: url(img/rollover_02_04.jpg);
}
.nav_02-1 li a:hover{
	background-position: 0 -50px;
}


/******** その2-2 ********/
.nav_02-2 li{
	width: 150px;
	height: 50px;
	float: left;
/*	text-indent: -9999px;*/
	white-space:nowrap;
	text-indent: 100%;
	overflow: hidden;
}
.nav_02-2 li a{
	display: block;
	width: 150px;
	height: 50px;
	background: url(img/rollover_03_01.jpg) no-repeat;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.nav_02-2 .li_01 a:hover{
	background-position: 0px -50px;
}
.nav_02-2 .li_02 a{
	background-position: -150px 0px;
}
.nav_02-2 .li_02 a:hover{
	background-position: -150px -50px;
}
.nav_02-2 .li_03 a{
	background-position: -300px 0px;
}
.nav_02-2 .li_03 a:hover{
	background-position: -300px -50px;
}
.nav_02-2 .li_04 a{
	background-position: -450px 0px;
}
.nav_02-2 .li_04 a:hover{
	background-position: -450px -50px;
}

/******** その3 ********/
.nav_03 ul{
	background: url(img/rollover_04.jpg) no-repeat;
}
.nav_03 li{
	width: 150px;
	height: 50px;
	float: left;
}
.nav_03 li a{
	display: block;
	width: 150px;
	height: 50px;
}
.nav_03 li a:hover img{
	visibility: hidden;
}

/******** その4 ********/
.nav_04 li{
	width: 150px;
	height: 50px;
	float: left;
}
.nav_04 a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);		/* ie 6 7 */
	-ms-filter: "alpha(opacity=70)";	/* ie 8 */
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}


/******** その5 ********/
.nav_05 li{
	width: 150px;
	height: 50px;
	float: left;
}

cssで色のみも出来ますが画像使ったほうがかっこよくロールオーバー出来ますよ。
↓ Photoshopでご自分なりにメニューの画像制作してみてください。

それではまた~。


関連記事