画像置換でメニューを作る

前回の画像置換で説明した通り、画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。

ただし、複雑なメニューの場合、整理して書かないと後で大変なことになります。

今回は要点を説明しながらメニューを作って行きたいと思います。

ひとまず、完成系のサンプルに目を通しておいてください。

ベースとなる(X)HTMLソースは以下のようにします。

<ul>
<li class="ajaBtn"><a href="/ajax/">Ajax</a></li>
<li class="amaBtn"><a href="/amazon/">amazon</a></li>
<li class="cssBtn"><a href="/css/">css</a></li>
<li class="htmBtn"><a href="/html/">html</a></li>
</ul>

メニューなのでリスト型要素であるul要素でマークアップします。

後で項目毎に画像を切り替える為、li要素にはそれぞれクラス名を付けています。

クラス名ですがそれぞれに『ajaxBtn』や『amazonBtn』などの、長さの違うクラス名を設定すると、後々視覚的にとても見にくくなります。多少、意味が通じなくても同じ長さのクラス名を付けると見やすいです。
また、『TopA』『TopB』『TopC』や『btn1』『btn2』『btn3』などの通し番号でクラス名を変えているサイトも良く見かけますが、並び順の変更があった場合に、ややこしくなるので止めておいた方がよいでしょう。

次にCSSですが

li{
 list-style-type:none;
 width:150px;
 height:50px;
 float:left;
}
a{
 display:block;
 height:100%;
 text-indent:-9999px;
}

ひとまずすべてのli要素とa要素に共通の設定を適用させます。

個別に設定していたのでは、変更の際に全部書き換えなくてはいけないので、共通で設定できるものはまとめて記述しましょう。

li要素のfloat:leftを設定していますが、これはメニューを横に並べる為です。
縦に並べる場合は必要ありません。

a要素のサイズもliで設定しているもとの同じにする為、height:100%だけ設定しましょう。

a:focus{
/*\*/
 overflow: hidden;
/**/
}

画像置換を行った際に、Firefoxでは、リンクをクリックした際に点線が画面外まで出ます。
画像置換のリンク点線を使い、リンクの点線を消します。

li.ajaBtn{
 background:url(./ajax_b.gif);
}
li.ajaBtn a{
 background:url(./ajax_a.gif);
}
li.amaBtn{
 background:url(./amazon_b.gif);
}
li.amaBtn a{
 background:url(./amazon_a.gif);
}
li.cssBtn{
 background:url(./css_b.gif);
}
li.cssBtn a{
 background:url(./css_a.gif);
}
li.htmBtn{
 background:url(./html_b.gif);
}
li.htmBtn a{
 background:url(./html_a.gif);
}

cssで画像をプリロードを行う為、a要素を包容しているli要素にロールオーバー時の画像を設定して、a要素に表示する画像を設定します。

li a:hover{
 background:none !important;
}

a要素のhover擬似クラスにbackground:noneを記述しても、classを持つli要素の子孫セレクタとして設定されているa要素(つまり、ふつうに画像を表示しているCSS)の方がカスケーディングの順位が高くなります。

その為、!importantを指定してカスケーディングの順位を強制的にあげることにより、a要素のhover擬似クラスの設定をすべてのa要素に反映させることができます。

サンプル

この記述方法は、いかにして効率よく記述を行うか、メンテナンス性を上げるかに重点をおいてますので、参考になればと思います。

関連エントリー

一番簡単な画像置換の方法
リンクをクリックした際に表示される点線を消す方法
cssで画像をプリロードする方法(改
画像置換

スポンサードリンク

«画像置換 | メイン | 画像置換に関する考え方»