メニューリストのCSS術 a要素編
前書き
多くの人の場合、メニューのタグ構成はこうだと思う
１．テーブルで囲む。(classを入れる)
２．各メニューリンク先頭にアイコン画像挿入。 (imgタグを使う)
３．各aタグにclassを書く。
意外と知られていないcss活用法では、上記が下記のようになる。表示結果は同等。
１．テーブルで囲む。(classを入れる)
たったことれだけ。
では、この方法を解説する。
＊できればテーブル要素は使わず、div要素を使おう！
使用する技
今回のcssで使う技は以下である。
１．バッググラウンドイメージを固定表示
２．リンク文字を右にずらす。(左に空白を作る)
３．指定クラス内の全指定タグにcssを一括適用する。
実践
htmlソースは、以下のようになる。
<td class="menu-list">
<a href="/">インターネット活用術</a><br>
<a href="/">自己防衛</a><br>
<a href="/">インターネット犯罪</a>
</td>
もし、技をいっさい使わないとこうなる。
<td class="menu-list">
<a class="a-menu" href="/">
<img src="/img/button_menu.gif" width="x" height="x">インターネット活用術
</a><br>
<a class="a-menu" href="/">
<img src="/img/button_menu.gif" width="x" height="x">自己防衛
</a><br>
<a class="a-menu" href="/">
<img src="/img/button_menu.gif" width="x" height="x">インターネット犯罪
</a>
</td>
どちらが管理しやすいか一目瞭然である。
次に、cssは以下である。
.menu-list a:link {
background-image: url(/img/button_menu.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 8px;
}
a:visited、a:hover、a:activeも必要なら同じように指定するのを忘れないように。
では、このcssの各行を簡単に説明する。
- .menu-list a:link {
これは、class="menu-list"が指定されているタグ（この例では<td class="menu-list">）で囲まれた全<a>タグにこのcssを適用させるという意味である。
これにより、<a>タグにclassを書く必要が無くなる。
- background-image: url(/img/button_menu.gif);
背景画像(メニュー先頭のアイコン)を指定。
- background-repeat: no-repeat;
背景画像をリピートさせず、単一で固定表示させる。
- background-position: left center;
背景画像を、左中央に表示させる。
- padding-left: 8px;
aタグで囲まれた文字を右に8px移動させる。(背景画像のぶん右に移動)
以上だけである。
あとは、サイトにあったレイアウトを追加すると良い。
ただし、ＩＥではこれによる副作用が一つあるので注意していただきたい。
a:hoverを使用した場合、リンクへのマウスのIN OUTによってアイコン画像が再読み込みされてしまう。
見た目では、メニュー上でマウスを動かすと、画像が点滅するだろう。その際一瞬だけマウスカーソルが読み込み中を示す砂時計へと変わる。
これを回避したければ、a:hoverを使わないのも一つの手ではある。
この場合、はじめに「.menu-list a」を記述しておけば正常に動作する。
使う場合は、極力画像は小さなものにする必要があるだろう。
また、これの応用として、a:hover の画像を別にすれば Java Script を使わなくても画像チェンジができたる。
ただし先に述べたように、IEではこれだけだと再読み込みが発生してしまうのが欠点である。
この問題を解決したい場合は、さらなる技を使えばよい。
＞メニューリストのCSS術 総合編
|
