第26回　CSSでボタンのロールオーバーをデザインする【2】テーブルレイアウトを卒業しよう

CSSでボタンのロールオーバーをデザインする【2】

第14回　CSSでボタンのロールオーバーをデザインする【1】とは違う方法をご紹介します。

以前ご紹介した方法は、ロールーオーバーする前、した後、いずれもbackground-imageで画像を配置していました。つまり、HTMLソース内には画像はありません。

ソースはこんなかんじでした。

<ul>
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
</ul>

今回は、img要素を使って画像を配置していて、なおかつCSSのみでロールオーバーをデザインする方法をご紹介します。

このように、背景画像ではなくimg要素を使いたいケースもあると思います。

ポイントは、visibilityプロパティでimg要素を非表示にする点です。

img {
	/* 画像のボーダーを消す */
	border: none;
}
a {
	/* 背景画像と幅高さを指定するためにblock化 */
	display: block;
	/* img要素と同じサイズ */
	width: 160px;
	height: 45px;
	/* ロールーオーバー時の背景画像 */
	background: url(btn_info_bg.jpg) no-repeat;
}
a:hover {
	/* IE6用設定 */
	background-color: #000;
}
a:hover img {
	/* ロールーオーバー時にimg要素を非表示 */
	visibility: hidden;
}

コードをご覧いただくとわかるように、a要素に背景画像を設定しています。ですが、img要素の画像と完全に重なってしまうため、通常時は表示されません。

そこで、a要素のhover疑似クラスをつかい、ロールーオーバー時にimg要素を非表示とし、隠れている背景画像を表示させます。

a要素のhover疑似クラスをつかい、ロールーオーバー時にimg要素を非表示とし、隠れている背景画像を表示させる

また、IE6はhover疑似クラスと子孫セレクタを組み合わせた書き方に反応しないという問題があり、これを回避するために背景色を指定します。（何色でもOKです）

DREAMWEAVER で CSS スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。

※visibility: hidden;はdisplay: none;とは異なり、要素を存在しないものにしてしまうのではなく、あくまで表示を消すだけです。

メンテナンス性を考えると、画像の修正・変更などがあった場合は(X)HTMLとCSSの両方を直す必要がある、などデメリットはありますが、img要素で画像を配置できるため、Dreamweaverなどでの作業は楽になるかもしれません。短期間で消してしまうようなバナー画像とかで使うのはアリではないでしょうか。

では次回もお楽しみに。（こう）