CSSで目次をつくる:階層深くても簡単ツリー

サイトマップを作るときや、目次を作るときなどに利用できるツリー表示。CSSだけでさっくりできます。この方法なら、設定さえしておけば、孫でもひ孫でもできるので便利です。

では、さっそく見てみましょう。

この記事は「2021年01月16日」に書かれた記事です

  1. シンプルツリー(ラインのみ)
  2. 画像付きツリー

まずは表示を確認してみましょう。

1.シンプルツリー(ラインのみ)

  • サイトマップ
    • 第1階層:親
      • 第2階層:子
      • 第2階層:子
      • 第2階層:子
        • 第3階層:孫
        • 第3階層:孫
        • 第3階層:孫
    • 第1階層:親2
    • 第1階層:親
      • 第2階層:子
        • 第3階層:孫
        • 第3階層:孫
        • 第3階層:孫
      • 第2階層:子

HTML

<ul class="samp-ultree">
<li>サイトマップ
<ul>
<li>第1階層:親
<ul>
<li>第2階層:子</li>
<li>第2階層:子</li>
<li>第2階層:子
<ul>
<li>第3階層:孫</li>
<li>第3階層:孫</li>
<li>第3階層:孫</li>
</ul>
</li>
</ul>
</li>
<li>第1階層:親2</li>
<li>第1階層:親
<ul>
<li>第2階層:子
<ul>
<li>第3階層:孫</li>
<li>第3階層:孫</li>
<li>第3階層:孫</li>
</ul>
</li>
<li>第2階層:子</li>
</ul>
</li>
</ul>

CSS

.samp-ultree {
line-height: 1.6;
padding:0;
}

.samp-ultree li {
list-style-type:none;
}

.samp-ultree ul {
position:relative;
padding:0;
margin:0 0 0 1.5em;
}

.samp-ultree ul::before {
content:"";
position:absolute;
top:0;
left:0;
height:100%;
border-left: 1px solid #333;
}

.samp-ultree ul li {
list-style-type:none;
position: relative;
padding-left: 1.5em;
}

.samp-ultree ul li::before {
content:"";
position: absolute;
top:0.7em;
left:0;
width: 1em;
border-top: 1px solid #333;
}

.samp-ultree ul li:first-child {
padding: 0.8em 0 0 1.5em;
}

.samp-ultree ul li:first-child::before {
top:1.4em;
padding-top: 1em;
}

.samp-ultree ul li:last-child::before {
height:100%;
background-color: #FFF;
}

上記の設定で階層が深くなっても表示されますが、あまり深くなってしまうと可読性が悪くなります。

また、上記はパソコン版とスマートフォン版で同じ表示を想定していますが、スマートフォンの表示については個々の文言がどれくらい長くなるか、階層がどれくらい長くなるかによって、体裁を変更する必要がでてきます。

2.画像付きツリー

  • サイトマップ
    • 第1階層:親
      • 第2階層:子
      • 第2階層:子
      • 第2階層:子
        • 第3階層:孫
        • 第3階層:孫
        • 第3階層:孫
    • 第1階層:親2
    • 第1階層:親
      • 第2階層:子
        • 第3階層:孫
        • 第3階層:孫
        • 第3階層:孫
      • 第2階層:子

HTML

<ul class="samp-ultree02">
<li>サイトマップ
<ul>
<li>第1階層:親
<ul>
<li>第2階層:子</li>
<li>第2階層:子</li>
<li>第2階層:子
<ul>
<li>第3階層:孫</li>
<li>第3階層:孫</li>
<li>第3階層:孫</li>
</ul>
</li>
</ul>
</li>
<li>第1階層:親2</li>
<li>第1階層:親
<ul>
<li>第2階層:子
<ul>
<li>第3階層:孫</li>
<li>第3階層:孫</li>
<li>第3階層:孫</li>
</ul>
</li>
<li>第2階層:子</li>
</ul>
</li>
</ul>
</li>
</ul>

HTMLは先ほどのシンプルツリーと同じです。

CSS

.samp-ultree02 {
line-height: 1.6;
padding:0;
}

.samp-ultree02 li {
list-style-type:none;
padding-left: 24px;
background-image: url(../images/image01.png);
background-position:0 0;
background-repeat: no-repeat;
background-size: 20px 20px;
}

.samp-ultree02 ul {
position:relative;
margin:0;
margin-left: 1.5em;
padding:0;
}

.samp-ultree02 ul::before {
content:"";
position:absolute;
top:0;
left:0;
height:100%;
border-left: 1px solid #333;
}

.samp-ultree02 ul li {
list-style-type:none;
position: relative;
padding-left: 3em;
background-image: url(../images/image02.png);
background-position: 1.4em 0.2em;
background-repeat: no-repeat;
background-size: 16px 16px;
}

.samp-ultree02 ul li::before {
content:"";
position: absolute;
top:0.7em;
left:0;
width: 1em;
border-top: 1px solid #333;
}

.samp-ultree02 ul li ul li {
list-style-type:none;
position: relative;
padding-left: 3em;
background-image: url(../images/image03.svg);
background-position: 1.4em 0.2em;
background-repeat: no-repeat;
background-size: 16px 16px;
}

.samp-ultree02 ul li ul li ul li {
list-style-type:none;
position: relative;
padding-left: 3em;
background-image: url(../images/image04.svg);
background-position: 1.4em 0.2em;
background-repeat: no-repeat;
background-size: 16px 16px;
}

.samp-ultree02 ul li:first-child {
padding: 0.8em 0 0 3em;
background-position: 1.5em 1em;
}

.samp-ultree02 ul li:first-child::before {
top:1.4em;
padding-top: 1.5em;

}

.samp-ultree02 ul li:last-child::before {
height:100%;
background-color: #FFF;
}

上記は階層ごとにアイコンを付与していますが、文言ごとにclassを付与すれば、例えばフォルダやテキストというように分類することもできるので、使える幅が広がります。

松江ブログ(M2エムツー)

HOME > ホームページ制作 > CSSでホームページを1UP > CSSで目次をつくる:階層深くても簡単ツリー

ページトップへ