blog::tani.masaru

前回はメニューの中のテキストを「text-indent:-9999px」を使って見えなくしたけど、それってどうなの？的なところからもう少し別の方法を考えてみる。とはいっても、非常にそのままなのですが、要素の表示・非表示を切り替える「visibility: hidden;」を使います。

• メニュー１
• メニュー２
• メニュー３

<style type="text/css"><!--
ul#menu-sample {
 width: 600px;
 height: 25px;
 margin: 0px;
 padding: 0px;
}
ul#menu-sample li {
 list-style-type:none;
 text-align: center;
 float: left;
}
ul#menu-sample li a {
 display:block;
 float: left;
 background-repeat: no-repeat;
 background-position: left top;
 width: 200px;
 height: 25px;
 margin: 0px;
 padding: 0px;
 color: #000000;
 text-decoration: none;
}
ul#menu-sample li#item01 a{
 background-image: url(http://livedoor.blogimg.jp/tani_masaru/imgs/f/0/f0a23068.png);
}
ul#menu-sample li#item02 a{
 background-image: url(http://livedoor.blogimg.jp/tani_masaru/imgs/c/3/c30384c2.png);
}
ul#menu-sample li#item03 a{
 background-image: url(http://livedoor.blogimg.jp/tani_masaru/imgs/1/6/1693c65b.png);
}
ul#menu-sample li a:hover {
 color: #FFFFFF;
 background-position: left bottom;
}
ul#menu-sample li a span {
 visibility: hidden;
}
--></style>
<ul id="menu-sample">
<li id="item01"><a href="#"><span>メニュー１</span></a></li>
<li id="item02"><a href="#"><span>メニュー２</span></a></li>
<li id="item03"><a href="#"><span>メニュー３</span></a></li>
</ul>

一通りCSSでメニューを作る話を書いてきましたが、画像置換のところでは背景を背景として使わないことに問題が大きいといえます。やはり背景は背景だけにして、表側に乗せる部分はテキストか画像（Alt付き）にするべきなのでしょうね。

【目次】
1. CSSとリストタグを使ってメニューを作る（準備編）
2. CSSとリストタグを使ってメニューを作る（基礎編）
3. CSSとリストタグを使ってメニューを作る（カスタマイズ編）
4. CSSとリストタグを使ってメニューを作る（カスタマイズ編２）
5. CSSとリストタグを使ってメニューを作る（カスタマイズ編３）