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

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

マウスカーソルを重ねたときに、デザインが変わるボタンをCSSだけでデザインする方法をご紹介します。

:hover疑似クラスとbackground-imageを使います。CSSの基礎知識がある方やCSS講座を受けていただいた方ならさくっとお気付きかもしれませんが、ちょっとした工夫があったりします。

先日の講座でもご質問いただいたので改めてご紹介します。

まず、根本の発想は「マウスカーソルが重なったときにbackground-imageで画像を切り替える。」わけですが、「別の画像ファイル」ではなく、「同じ画像ファイル」を使います。

ポイントは、背景画像をずらす!です。

このようにします。

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
ul {
margin: 0px;
padding: 0px;
list-style:none;
} ul li {
/* li要素を横に並べる */
float:left;
/* 1行の高さ=背景の高さにして文字を縦軸中央に */
line-height: 45px;
}
ul li a {
/* a要素をブロックに */
display: block;
/* 背景画像と同じ幅高さ指定 */
height: 45px;
width: 160px;
color: #666;
/* 文字を横軸中央に */
text-align: center;
text-decoration: none;
/* 背景画像指定 X:0 Y:0 繰り返し無し */
background: url(img/button_bg.png) 0 0 no-repeat;
}
ul li a:hover {
color:#FFF;
/* 背景画像指定 X:0 Y:-45px 繰り返し無し */
background: url(img/button_bg.png) 0 -45px no-repeat;
}

するとこうなります。

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

background-positionの-45pxが今回のポイントです。a:hoverの時はマイナスの値を指定して、上にずらしています。こうすれば1つの画像ファイルでノーマル時とロールオーバー時両方デザインすることができます。

メリットは、

などでしょうか。

今回つかった背景画像はこうなっています。

背景画像

これを応用すれば、こんなことができます。これはNTT DoCoMoの例。

NTT DoCoMo webサイト

背景画像系のテクニックは応用がきいて楽しいですね。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
何でもかんでもdivにしない
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読