font-awesomeのアイコンフォントを利用し、CSSのみで作る見やすいファイルツリーです。ディレクトリ構造の解説などに使えそうです。
サンプル
- Project
- Opened Folder - 15kb
- css
- Folder close - 10kb
- index.html
- favicon.ico
- Folder close - 420kb
サンプルのhtmlソース
<div class="tree">
<ul>
<li><i class="fa fa-folder-open"></i> Project
<ul>
<li><i class="fa fa-folder-open"></i> Opened Folder <span>- 15kb</span>
<ul>
<li><i class="fa fa-folder-open"></i> css
<ul>
<li><i class="fa fa-code"></i> CSS Files <span>- 3kb</span>
</li>
</ul>
</li>
<li><i class="fa fa-folder"></i> Folder close <span>- 10kb</span>
</li>
<li><i class="fab fa-html5"></i> index.html</li>
<li><i class="fa fa-picture-o"></i> favicon.ico</li>
</ul>
</li>
<li><i class="fa fa-folder"></i> Folder close <span>- 420kb</span>
</li>
</ul>
</li>
</ul>
</div>
サンプルのCSSソース
.tree {
position: relative;
background: white;
margin:0 0 0 50px;
font-family: 'Roboto Mono', monospace;
font-size: .85rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
}
.tree span {
font-size: 13px;
font-style: italic;
letter-spacing: .4px;
color: #a8a8a8;
}
.tree .fa-folder-open, .tree .fa-folder {
color: #007bff;
}
.tree .fa-html5 {
color: #f21f10;
}
.tree ul {
padding-left: 5px;
list-style: none;
}
.tree ul li {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tree ul li:before {
position: absolute;
top: 15px;
left: 0;
width: 10px;
height: 1px;
margin: auto;
content: '';
background-color: #666;
}
.tree ul li:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
height: 100%;
content: '';
background-color: #666;
}
.tree ul li:last-child:after {
height: 15px;
}
.tree ul a {
cursor: pointer;
}
.tree ul a:hover {
text-decoration: none;
}
