TOP
MEMO
CSS
CSSでロールオーバー

CSS でロールオーバー

　ロールオーバーとはマウスを画像などに載せた時に、画像が入れ替わったりする動作のことを言います。メニューバーなどボタンによく使われることが多いです。
　ロールオーバーはJavaScript で組むことが多いんですが、JavaScriptだとどうしてもごちゃごちゃしてしまって後から訳がわからなくなることもあります。（自分がよくそうなります。）
　CSS ロールオーバーをさせれば HTML をごちゃごちゃさせずにスッキリできます。

疑似クラス

ロールオーバーをする場合に絶対に必要な物です。これがなければ始まりません。

a:link	まだアクセスしたことのないリンクに適用
a:visit	既にアクセスしたことのあるリンクに適用
a:hover	マウスが上に乗っている状態のリンクに適用
a:activ	選択されている状態のリンクに適用

疑似クラスには上記のような種類があります。
これを組み合わせてロールオーバーをします。

簡単なロールオーバー

TEST LINK

上記のリンクを触ってみてください。

HTML

<div class="linktest_01">
<a>TEST LINK</a>
</div>

CSS

.linktest_01 a:hover {
	background-color: #ffffe0;
	text-decoration: none;
}
.linktest_01 a:active {
	color: #fff;
	background-color: #f00;
}

単純なロールオーバーは、上の CSS を記入するだけでできます。
上のロールオーバーの場合は、カーソルが上に通ったときに（:hover）背景をクリーム色（background-color: #ffffe0）にして、文字の装飾を全て削除（text-decoration: none）する。次に、クリックされたときは、文字を白（color: #fff）にして、背景を赤（background-color: #f00）にする。
ということをしています。

ボタンみたくしてみよう

LINK A TEST LINK B

HTML

<div class="linktest_02">
	<a>LINK A</a>
	<a>TEST LINK B</a>
</div>

CSS

.linktest_02 a {
	color: #333;
	background-color: #f5f5f5;
	margin-right: 3px;
	margin-left: 3px;
	padding: 5px;
	border: outset 1px;
}
.linktest_ 02 	a:hover {
	color: #dc143c;
	background-color: #ffffe0;
	border-color: #333;
}
.linktest_ 02 	a:active {
	color: #fff;
	background-color: #dc143c;
	border-color: #dc143c;
	border-style: inset;
}

このように縁を付けてあげると、ボタンぽく見えますね。
外枠はアウトセット（border-style: outset）にするとボタンのように見えます。この逆は、インセット（border-style: inset）です。

ボタンの幅を揃えよう

LINK A TEST LINK B

HTML

<div class="linktest_03">
	<a>LINK A</a>
	<a>TEST LINK B</a>
</div>

CSS

.linktest_03 a {
	color: #333;
	background-color: #f5f5f5;
	text-align: center;
	width: 100px;
	float: left;
	margin-right: 3px;
	margin-left: 3px;
	padding: 5px;
	border: outset 1px;
	display: block;
}
.linktest_03 a:hover {
	color: #dc143c;
	background-color: #ffffe0;
	border-color: #333;
}
.linktest_03 a:active {
	color: #fff;
	background-color: #dc143c;
	border-color: #dc143c;
	border-style: inset;
}

今回は、ボタンの幅を揃えてみました。
ボタンの幅を揃えるには、width に数値を入れればいいのですが、そのままではインラインになっているのでブロック（display: block）にします。
ブロックにすることで、width が使えるようになります。
ただし、ブロックにした場合には、改行してしまうので、上の例では、フロートを左（float: left）にしてあります。この場合は、終端にフロートの解除（clear: both 等）をしてあげないと関係ないものも横に繋がってしまいます。
hover, active は先程の「ボタンみたくしてみよう」と同じです。

背景に画像を使おう

TEST A TEST B TEST C

HTML

<div class="word_box linktest_04">
	<a>TEST A</a>
	<a>TEST B</a>
	<a>TEST C</a>
</div>

CSS

.linktest_04 a {
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	background-image: url(img/roll_over_test_A.png);
	text-align: center;
	vertical-align: middle;
	width: 100px;
	height: 30px;
	display: table-cell;
}
.linktest_04 a:hover {
	color: #ffffe0;
	background-image: url(img/roll_over_test_B.png);
}
.linktest_04 a:active {
	color: #ff0;
	background-image: url(img/roll_over_test_C.png);
}
* html .linktest_04 a{/* IE 6 */
	display:inline;
	zoom:1;
}
*:first-child+html .linktest_04 a{/* IE 7 */
	display:inline;
	zoom:1;
}
/*\*//*/
* html .linktest_04 a{
	display:inline-block;
}
/**/

今回は背景に画像を使ってみました。前回のボタンと違い、今回は height を指定してあげなければなりません。そうしないと、ボタンの画像よりも枠が大きくなった場合、壁紙のようにボタン画像が繋がってしまうので、ボタンの画像の大きさで固定する必要があります。
また、横幅は幅を決めて、センター揃えにすればいいのですが、垂直方向のセンター揃えと、下の方の * html は説明が長くなりそうなので次回にします。

今回の背景画像を入れ替える方法は、アンカータグの CSS でそれぞれ背景画像を入れ替えている（background-image:）だけです。
この場合は通常時と hover , active 用に３種類の画像が必要になります。そのため、あらかじめ、あらかじめ画像を読み込んでおかないとロールオーバーの際に、タイムラグが発生します。

Return