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で階層を表示

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