ulタグで縦並びのボタンメニューを作る3 - CSS Tips - 仮想空間

多くのウェブサイトで、メニュー（ナビゲーション）を画像化しています。普通ならば、aタグとimgタグを使ってHTMLファイル内に直接記述しますが、これはあまり好ましくありません。

なぜなら、HTML（ハイパー・テキスト・マークアップ・ランゲージ）というのは文書構造を示すための言語だからです。なので、imgタグを使って画像をHTMLファイル内に記述するというのは、文字では表現できないことを図示する場合などに限定するべきだと思います。

そこで、HTMLファイル内に直接記述しない、画像を使った縦並びボタンメニューの作り方を紹介します。

今回は、以下の8つの画像を使用します。全て160px×20pxです。

bt_01.gif

bt_02.gif

bt_03.gif

bt_04.gif

bt_05.gif

bt_06.gif

bt_07.gif

bt_08.gif

HTMLの記述

<ul>
<li id="internet"><a href="#">インターネット関連</a></li>
<li id="pleasure"><a href="#">趣味と娯楽</a></li>
<li id="memo"><a href="#">考察メモ</a></li>
<li id="family"><a href="#">犬と猫がいる生活</a></li>
</ul>

CSSの記述

ul{
margin:0px;
padding:0px;
list-style:none;
}
 
a{
text-decoration:none;
text-indent:-1000px;
text-align:center;
width:160px;
height:20px;
overflow:hidden;
display:block;
}
 
#internet a:link,
#internet a:visited{
background:url("bt_01.gif") no-repeat;
}
 
#internet a:hover{
background:url("bt_02.gif") no-repeat;
}
 
#pleasure a:link,
#pleasure a:visited{
background:url("bt_03.gif") no-repeat;
}
 
#pleasure a:hover{
background:url("bt_04.gif") no-repeat;
}
 
#memo a:link,
#memo a:visited{
background:url("bt_05.gif") no-repeat;
}
 
#memo a:hover{
background:url("bt_06.gif") no-repeat;
}
 
#family a:link,
#family a:visited{
background:url("bt_07.gif") no-repeat;
}
 
#family a:hover{
background:url("bt_08.gif") no-repeat;
}

ポイント

liタグにそれぞれidを付け、そのidごとに適応させる画像を設定しています。これだけだと、画像の上に文字が乗っかってしまうので、文字を消さなければいけません。

まず、aタグにtext-indent:-1000px;を設定することで、文字を-1000px分移動させます。次にoverflow:hidden;で設定したサイズ160px×20pxからはみ出した文字を隠します。これで文字を消すことが出来ます。

-1000pxという数値は適当に付けています。文字数が多くなったり、文字サイズが大きくされても、確実に隠せるよう多めに設定すると良いでしょう。

タグ

ul

投稿日

07.03.10

カテゴリー

CSS Tips

コメント

0

トラックバック

0