ulタグで横並びのメニューを作る2 - CSS Tips - 仮想空間

ulタグで作る横並びメニューに、アイコンを加える方法を紹介します。
この方法は、トピックパス（パンくずリスト）や見出しなどにも応用できるので、是非お試しください。

今回使う画像は以下の2つです。

メニュー用アイコン ic_arrow01.gif（12px×12px）

トピックパス（パンくずリスト）用アイコン ic_arrow02.gif（12px×12px）

HTMLの記述

<ul class="arrow01">
<li><a href="#">インターネット関連</a></li>
<li><a href="#">趣味と娯楽</a></li>
<li><a href="#">考察メモ</a></li>
<li><a href="#">犬と猫がいる生活</a></li>
</ul>
　
<ul class="arrow02">
<li><a href="#">ホーム</a></li>
<li><a href="#">ページ1</a></li>
<li>ページ1-1</li>
</ul>

CSSの記述

ul.arrow01{
margin:0px;
padding:0px;
list-style:none;
}
　
ul.arrow01 li{
background:url("ic_arrow01.gif") left no-repeat;
padding-right:1em;
padding-left:12px;
display:inline;
}
　
ul.arrow02{
margin:0px;
padding:0px;
list-style:none;
}
　
ul.arrow02 li{
display:inline;
}
　
ul.arrow02 li a{
background:url("ic_arrow02.gif") right no-repeat;
padding-right:12px;
}

ポイント

アイコンを表示したい要素にpaddingを設定して余白を空け、そこにbackgroundで画像を指定してあげるだけです。

多くのサイトで利用されるトピックパスは、HTMLソース内に直接「/」「>」「»」などを記述していますが、この方法を利用すれば、これらを記述することなく対処できます。ソースはシンプルが一番！

タグ

ul

投稿日

07.03.29

カテゴリー

CSS Tips

コメント

0

トラックバック

0