猿でも分かる CSS 講座 - いやーんバンカー

　　　＿＿＿＿_
　　／　　　　＼
　 /　＿＿＿＿　丶
`〈ノ　　　ミ　|
　|丿 == 　 == ヾ |
　ﾍ| ／･　　･＼レ)
　ﾋ| ⌒ (｡｡) ⌒　ノ
　 |　ﾉ　　丶　｜
　丶 i<二二>i　/　　いやーんバンカー
　　＼＿＿＿_／
　　　 (　∞ ＼
　　　 |＼＼＼＼
　　　 |＿`<フ `<フ
　　　　|_∧_|
　　　　(_)(_)

<a> タグ＝アンカーの擬似クラスによる修飾方法と、アンカーを使ったロールオーバーメニューの作り方について説明しています。

擬似クラス

<a> タグには、擬似クラスというものがあります。
擬似クラスは状況に応じて有効になるスタイルで、以下のものがあります。

:link: まだ表示したことがないページへのリンクを表示する際に使用されます
:visited: 既に表示したことがあるページへのリンクを表示する際に使用されます
:active: アンカーがクリックされた状態のときに有効になります
:hover: カーソルがアンカー上にあるときに有効になります

以下のようにスタイル定義すると、

a:link { color: blue }
a:visited { color: fuchsia }
a:active { color: red }
a:hover { background-color: #cccccc }

このようになります。

http://www.google.co.jp/

ロールオーバーメニュー

アンカーの擬似クラスを使うと、一枚物の画像を使ってロールオーバー時に表示を変えるメニューを作ることができます。

まず、こんな感じの画像を用意します。以下のコード例では menubg.png というファイル名になっています。
menubg.png のサイズは 200x100px で、画像の左上部分を通常表示、右上を :hover、左下を :active のときの表示に使います。
この画像は透過 png になってますが、右下の透過色部分は使いませんので IE6 でも問題ありません。

次にこのメニュー画像を収める HTML を書きます。
こんな感じの <ul> タグを使うのが HTML の意味的にも分かりやすくて便利だと思います。

<ul id="menu">
  <li><a href="1.html">メニュー1</a></li>
  <li><a href="2.html">メニュー2</a></li>
  <li><a href="3.html">メニュー3</a></li>
</ul>
<div class="clearboth"></div>

最後に #menu 要素のスタイルを定義します。

ちょっと長いので先に要点を説明しておきますと、

background で上の画像を <a> の背景に指定します。
<a> の親要素の <li> 要素に対して width と height を指定し、画像の一部分のみが表示されるようにします。
通常時と :hover と :active で表示背景画像部分の位置を変えます。

ということをするためのスタイルとなっています。

#menu {
    margin: 0;
    padding: 0;

    /* ul のマーカを消す */
    list-style: none;
}

#menu li {
    /* float で左から並べる */
    float: left;

    margin: 0;
    padding: 0;

    /* 画像の選択範囲のサイズと合わす */
    width: 100px;
    height: 50px;
}

#menu li a {
    /* inline から block に変更 */
    display: block;

    /* IE6 で要る */
    width: 100%;

    /* padding と line-height を合わせて 50px になるようにし、中央寄せする */
    padding: 16px 0;
    line-height: 18px;
    text-align: center;

    /* line-height 以下にサイズを合わせる */
    font-size: 16px;

    /* メニュー画像の左上部分のみを使い、文字の色を合わせる */
    background: url("menubg.png") left top no-repeat;
    color: black;

    font-weight: bold;
    text-decoration: none;
}

#menu li a:hover {
    /* メニュー画像の右上部分のみを使い、文字の色を合わせる */
    background: url("menubg.png") right top no-repeat;
    color: blue;
}

#menu li a:active {
    /* メニュー画像の左下部分のみを使い、文字の色を合わせる */
    background: url("menubg.png") left bottom no-repeat;
    color: red;
}

.clearboth {
    clear: both;
}

以下は上のスタイル定義をしたメニューです。
カーソルをメニューの上に移動すると青くなり、クリックすると赤くなります。

上の例なら border を使ってでもできますので、わざわざロールオーバーさせる必要はありませんが、同じ仕組みを使ってこのようなメニューも作れます。

メニュー1
メニュー2
メニュー3