olのlistを入れ子にして、CSSを使ってインデントをかけ、番号を表示しています。
番号リストではなく、ただの階層の場合はこちら↓
箇条書きリストを入れ子にしてCSSで階層を表示
HTMl
<div class="mod_List0001"> <ul> <li>1階層の文章が入ります。 <ul><li>2階層の文章が入ります。 <ul><li>3階層の文章が入ります。 <ul><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_List001_end --></div>
CSS
.mod_List0001 ul li{ /* リストマーカー画像切れ防止。最低高さを確保 */ min-height:12px; height:auto!important; height:12px; margin:0 0 0em 0; padding:0 0 0 15px; background:transparent url('img/one.gif') no-repeat left 0.2em scroll; } /* 2階層目 */ .mod_List0001 ul li ul li{ background:transparent url('img/two.gif') no-repeat left 0.2em scroll; } /* 3階層目 */ .mod_List0001 ul li ul li ul li{ background:transparent url('img/three.gif') no-repeat left 0.2em scroll; } /* 4階層目 */ .mod_List0001 ul li ul li ul li ul li{ background:transparent url('img/four.gif') no-repeat left 0.2em scroll; } /* 5階層目 */ .mod_List0001 ul li ul li ul li ul li ul li{ background:transparent url('img/five.gif') no-repeat left 0.2em scroll; } /* 6階層目 */ .mod_List0001 ul li ul li ul li ul li ul li ul li{ background:transparent url('img/six.gif') no-repeat left 0.2em scroll; }