CSSで箇条書きの先頭に画像を指定して表示します。
reset.cssでli {list-style: none;}を指定して元々のリストマークを消しています
その後、CSSの背景画像を指定しています。
HTMl
<div class="mod_List001"> <ul> <li>文章が入ります。</li> <li>文章が入ります。<br />改行します。</li> <li>文章が入ります。</li> <li>文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。文章が続きます。</li> <li>文章が入ります。</li> </ul> <!-- mod_List001_end --></div>
CSS
.mod_List001 ul li{ /* リストマーカー画像切れ防止。最低高さを確保 */ min-height:6px; height:auto!important; height:6px; margin:0 0 0.5em 0; padding:0 0 0 15px; background:transparent url('listmaker.gif') no-repeat left 0.4em scroll; }