HTMLとしての文書構造を維持しつつ、デザイン的にもすぐれたものをというわけで マウスカーソルをあてると背景が変化する、ロールオーバーをCSSで実現したいと思います。 CSS以外の方法としては、JavaScriptを使った方もあります。
ここでは、background-position を使って ロールオーバー をさせてみます。 HTMLは、リストとa要素でメニューを作成します。 ただし、今回の例ではフォントサイズを変更するとレイアウトが崩れます。 フォントサイズを固定する等の対策が必要です。
<ul> <li id="home"> <a href="https://www.bnote.net/">bnote</a> </li> <li id="htmlref"> <a href="../05_ref_html401.html">HTMLリファレンス</a> </li> <li id="cssref"> <a href="../13_ref_css21.shtml">cssリファレンス</a> </li> </ul>
この例のポイントは、a要素に display:block を指定し、基本ブロックボックスを生成させることと a, a:hover and a:activeセレクタで background-position と color で 画像および文字色を変更するところにあります。
ここでは、hoverとそれ以外の状態で表示を変えるように背景に使う画像は、400pxの画像を用意しました。
li { list-style-type: none; } a { display: block; width: 170px; padding: 3px 0 4px 30px; font-weight: bold; background: url('img/rollover_simple.png') 0 0 no-repeat; color:#4d4b4b; text-decoration: none; } a:hover { background-position: -200px 0; color:#ffffff; } a:active { color:#4d4b4b; }
背景画像を200pxずらすことによって ロールオーバーさせます。 a:active時の画像も変更したい場合、600pxの画像を用意し background-position: に-400pxと指定します。 動かすサイズに関しては、画像のサイズに合わせて設定します。
Copyright 1997-2010 BBB All rights reserved.