blog::tani.masaru

前回ではテキストと背景画像を使ってメニューを作ったが、今回はそれを少しカスタマイズしてみる。

カスタマイズの内容は今までテキストだったメニューの文字を画像にしてみる。つまり背景画像自体にテキストをいれて、メニュー自体のテキストは表示しないようにする。

<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;
}
--></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>

これで画像の場合も問題なく表示できることが分かる。ただし、これって画像を有効にしているから分かることで、もし画像が表示できなかったり、画像を見ることができない場合にはメニューとしての役割を果たさない。それを回避するためのカスタマイズを次に考える。

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