ホームページ制作MATSUTE BLOG

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

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

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

1．シンプルツリー（ラインのみ）

• サイトマップ
  • 第１階層：親
    • 第２階層：子
    • 第２階層：子
    • 第２階層：子
      • 第３階層：孫
      • 第３階層：孫
      • 第３階層：孫
  • 第１階層：親2
  • 第１階層：親
    • 第２階層：子
      • 第３階層：孫
      • 第３階層：孫
      • 第３階層：孫
    • 第２階層：子

HTML

<ul class="samp-ultree">
<li>サイトマップ
<ul>
<li>第１階層：親
<ul>
<li>第２階層：子</li>
<li>第２階層：子</li>
<li>第２階層：子
<ul>
<li>第３階層：孫</li>
<li>第３階層：孫</li>
<li>第３階層：孫</li>
</ul>
</li>
</ul>
</li>
<li>第１階層：親2</li>
<li>第１階層：親
<ul>
<li>第２階層：子
<ul>
<li>第３階層：孫</li>
<li>第３階層：孫</li>
<li>第３階層：孫</li>
</ul>
</li>
<li>第２階層：子</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．画像付きツリー

• サイトマップ
  • 第１階層：親
    • 第２階層：子
    • 第２階層：子
    • 第２階層：子
      • 第３階層：孫
      • 第３階層：孫
      • 第３階層：孫
  • 第１階層：親2
  • 第１階層：親
    • 第２階層：子
      • 第３階層：孫
      • 第３階層：孫
      • 第３階層：孫
    • 第２階層：子

HTML

<ul class="samp-ultree02">
<li>サイトマップ
<ul>
<li>第１階層：親
<ul>
<li>第２階層：子</li>
<li>第２階層：子</li>
<li>第２階層：子
<ul>
<li>第３階層：孫</li>
<li>第３階層：孫</li>
<li>第３階層：孫</li>
</ul>
</li>
</ul>
</li>
<li>第１階層：親2</li>
<li>第１階層：親
<ul>
<li>第２階層：子
<ul>
<li>第３階層：孫</li>
<li>第３階層：孫</li>
<li>第３階層：孫</li>
</ul>
</li>
<li>第２階層：子</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を付与すれば、例えばフォルダやテキストというように分類することもできるので、使える幅が広がります。