メニューリストのCSS術 総合編
前書き
メニューリスト作成技の総合編は、名の通り他ページで説明した関連技を組み合わせる総合技だ。
以下の技を組み合わせて使用する。
- ul要素の左余白を調節する。
- メニューリストのCSS術 a要素編
- メニューリストのCSS術 ul要素編
細かい説明は上記ページでされているので、ここでは簡単にスパっと説明する。
説明
まずは、以下のhtmlを作る。サイトメニューを表示させるのが目的だ。
<ul class="menulist">
<li><a href="[url]">.....</a></li>
<li><a href="[url]">.....</a></li>
<li><a href="[url]">.....</a></li>
</ul>
上記はいたってシンプルで理想的な構成と言えよう。
では、上記をCSS無しで表示してみる。
上記が、ノーマルのリスト。
では、ＣＳＳを適用させてみる。（当館トップで使っているスタイル）
上のは、前書きの１から３の全てを適用させた物だ。
ＩＥでもマウスオーバー時にチラツキが無く、綺麗に画像が表示されるのがわかる。
では、ここで登場する新しいＣＳＳの手順を説明する。
メニューリストのCSS術 a要素編で説明した方法のみだと、チラツキが生じる。
これを防ぐために、 メニューリストのCSS術 ul要素編を併用することになる。
すなわち、ul（もしくはli）要素で、常に画像を表示させておき、a要素のマウスオーバー時に、画像を上に乗せて表示させる。
これで画像が何も表示されない時間というのが無くなる。
ＣＳＳ例
ul.menulist li{
background-image: url(/img/icon_menu.gif);
background-repeat: no-repeat;
background-position: left bottom;
padding: 0px;
margin-left: 5px;
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.menulist li a {
background-image: url();
background-repeat: no-repeat;
background-position: left bottom;
padding-left: 13px;
}
.menulist li a:hover {
text-decoration: underline;
background-position: left bottom;
background-image: url(/img/icon_menu_b.gif);
background-repeat: no-repeat;
}
だた、注意する点がある。
li要素の高さと、a要素の高さを一致させることは不可能ということ。
行の先頭の文字によっては、ズレが生じてしまう。（高さを絶対値で高さ指定してもだ）
そのため、座標を上から計算させる事はできない。中央に指定しても同じだ。
ＩＥでは、唯一、下の座標だけは、大抵の文字でliとa要素が同じになるので、
background-position: left bottom;
という指定となる。
しかし、Netscapeでは、この下の座標も多くで異なるので、このままではNetscapeではずれて表示されるので注意。
回避するには、ブラウザを識別してＣＳＳを自動で切り替えるようにするしかない。
たとえば、下記のような方法がある。( phpスクリプト使用例 )
<?php
$AGENT = $_SERVER['HTTP_USER_AGENT'];
if (ereg(" Netscape", $AGENT, $match)){
print "<link href=\"/nn.css\" rel=\"stylesheet\" type=\"text/css\">";
}
?>
|
