Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
箇条書きリストを入れ子・階層にしてCSSで番号マーカーを表示 - CodingMania

2011/5/29

箇条書きリストを入れ子・階層にしてCSSで番号マーカーを表示

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;
}