ul要素でディレクトリ構成をツリー状にスタイリングするCSS

ディレクトリ(ファイル)構成を示したいときに画像や<pre>ではなく、<ul>タグでスタイリングできるCSSを紹介します。

sponsored link

demo

デモはCodePenで確認できます。scssで書かれていますが、CodePenのサイトに飛び「View Compiled」ボタンをクリックするとCSSにコンパイル(変換)されたものが確認できます。

See the Pen tree menu by ManabuYasuda (@gaku) on CodePen.

参考にしたのはコリスさんのこちらの記事です。[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック | コリス

HTML

マークアップは<ul>タグを入れ子にしたシンプルなものです。

CSS

同じ値を繰り返し使用しているためSassの変数を定義しています。$tree-menu-paddingで余白の指定と、テキストとボーダーの縦位置を合わせるために使用しています。$tree-menu-border-widthでボーダーの幅を、$tree-menu-border-colorでボーダーの色を指定します。

いちばん最後の行でbackground-color: #eee;を指定しています。これによってボーダーを一部隠しています。ですが、このプロパティは初期値がtransparentで、さらに継承することができないので、直接背景色を指定する必要があります。