コニファ・ロゴ

csstest:CSSのみで作る見やすいファイルツリー

font-awesomeのアイコンフォントを利用し、CSSのみで作る見やすいファイルツリーです。ディレクトリ構造の解説などに使えそうです。

サンプル

  • Project
    • Opened Folder - 15kb
      • css
        • CSS Files - 3kb
      • 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;
}

 

 

戻るボタン