Listamatic2 / CSS background images for bullets

Listamatic2: CSS background images for bulletsの日本語訳です。

Author: Russ Weakley

Comments: それぞれのリストアイテムの背景に画像を追加するのに"background-image: url(images/arrow.gif)"を使える。コンテンツをずらすのにpaddingを使って、背景画像に重ならないようにしよう。

この方法を使うと、ただ画像でバレットを置き換えるよりもはるかに強力な結果が得られる。

ブラウザサポートチャート?

HTML

<div id="navcontainer">
 <ul id="navlist">
   <li id="active"><a href="#" id="current">Item one</a> 
     <ul id="subnavlist">
       <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
       <li><a href="#">Subitem two</a></li>
       <li><a href="#">Subitem three</a></li>
       <li><a href="#">Subitem four</a></li>
     </ul>
   </li>
   <li><a href="#">Item two</a></li>
   <li><a href="#">Item three</a></li>
   <li><a href="#">Item four</a></li>
 </ul>
</div>

CSS

#navlist
{
 margin-left: 0;
 padding-left: 0;
 list-style: none;
}

#navlist li
{
 padding-left: 10px;
 background-image: url(images/arrow.gif);
 background-repeat: no-repeat;
 background-position: 0 .5em;
}

#navlist ul { list-style: none; }