ulのlistを入れ子にして、CSSを使ってインデントをかけ、階層を表示しています。
番号リストの場合はこちら↓
箇条書きリストを入れ子・階層にしてCSSで番号マーカーを表示
HTMl
<div class="mod_List0002"> <ul> <li>1階層の文章が入ります。 <ul><li>2階層の文章が入ります。</li> <li>2階層の文章が入ります。</li> <li>2階層の文章が入ります。</li> <li>2階層の文章が入ります。 <ul><li>3階層の文章が入ります。</li> <li>3階層の文章が入ります。</li> <li>3階層の文章が入ります。</li> <li>3階層の文章が入ります。 <ul><li>4階層の文章が入ります。</li> <li>4階層の文章が入ります。</li> <li>4階層の文章が入ります。</li> <li>4階層の文章が入ります。 <ul><li>5階層の文章が入ります。 <ul><li>6階層の文章が入ります。 </li><!--6_end--></ul> </li><!--5_end--></ul> </li><!--4_end--></ul> </li><!--3_end--></ul> </li><!--2_end--></ul> </li> <li>1階層の文章が入ります。</li><!--1_end--></ul> <!-- mod_List0002_end --></div>
CSS
.mod_List0002 ul li{ /* リストマーカー画像切れ防止。最低高さを確保 */ min-height:12px; height:auto!important; height:12px; line-height:1; margin:0; padding:5px 0 0 15px; background:transparent url('img/marker.gif') no-repeat left 0.5em scroll; } /* 2階層以降 */ .mod_List0002 ul li ul li{ background:transparent url('img/marker_middle.gif') no-repeat left -0.2em scroll; margin-left:5px; } /* リスト最終行 */ .mod_List0002 ul li ul li:last-child { background:transparent url('img/marker_last.gif') no-repeat left -0.2em scroll; }