サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック
Post on:2020年4月13日
sponsors
サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。
HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。
まずは、実際のデモをご覧ください。
See the Pen
Tree view from unordered list by Ross Angus (@ross-angus)
on CodePen.
1つ目の「DOM構造」と2つ目の「サイトマップ」の実装は、基本的には同じです。順番に見てましょう。
DOM構造のツリービュー
HTML
1つのul要素で3階層分まで、4階層目からは新たにul要素が必要となります。矩形は「DOM構造」では<code>、「サイトマップ」では<span>が使用されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<figure> <figcaption>Example DOM structure diagram</figcaption> <ul class="tree"> <li><code>html</code> <ul> <li><code>head</code> <ul> <li><code>title</code></li> </ul> </li> <li><code>body</code> <ul> <li><code>header</code> <ul> <li><code>h1</code></li> <li><code>p</code></li> </ul> </li> <li><code>nav</code> <ul> <li><code>a</code></li> <li><code>a</code></li> <li><code>a</code></li> <li><code>a</code></li> </ul> </li> <li><code>main</code> <ul> <li><code>h1</code></li> <li><code>article</code> <ul> <li><code>h2</code></li> <li><code>p</code></li> <li><code>p</code></li> </ul> </li> </ul> </li> <li><code>aside</code> <ul> <li><code>h2</code></li> <li><code>p</code></li> <li><code>p</code> <ul> <li><code>a</code></li> </ul> </li> </ul> </li> <li><code>footer</code> <ul> <li><code>nav</code> <ul> <li><code>a</code></li> <li><code>a</code></li> <li><code>a</code></li> <li><code>a</code></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </figure> |
CSS
CSSは「DOM構造」も「サイトマップ」も同じです。
ポイントは、「display: table;」と「display: table-cell;」でツリービューの外観をつくり、li要素とcode要素の疑似要素にoutlineプロパティで接続線が実装されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
/* It's supposed to look like a tree diagram */ .tree, .tree ul, .tree li { list-style: none; margin: 0; padding: 0; position: relative; } .tree { margin: 0 0 1em; text-align: center; } .tree, .tree ul { display: table; } .tree ul { width: 100%; } .tree li { display: table-cell; padding: .5em 0; vertical-align: top; } /* _________ */ .tree li:before { outline: solid 1px #666; content: ""; left: 0; position: absolute; right: 0; top: 0; } .tree li:first-child:before {left: 50%;} .tree li:last-child:before {right: 50%;} .tree code, .tree span { border: solid .1em #666; border-radius: .2em; display: inline-block; margin: 0 .2em .5em; padding: .2em .5em; position: relative; } /* If the tree represents DOM structure */ .tree code { font-family: monaco, Consolas, 'Lucida Console', monospace; } /* | */ .tree ul:before, .tree code:before, .tree span:before { outline: solid 1px #666; content: ""; height: .5em; left: 50%; position: absolute; } .tree ul:before { top: -.5em; } .tree code:before, .tree span:before { top: -.55em; } /* The root node doesn't connect upwards */ .tree > li {margin-top: 0;} .tree > li:before, .tree > li:after, .tree > li > code:before, .tree > li > span:before { outline: none; } |
「サイトマップ」の実装は基本的には「DOM構造」と同じです。
サイトマップのツリービュー
HTML
「DOM構造」で使用されていた<code>の代わりに、「サイトマップ」では<span>が使用されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<figure> <figcaption>Example sitemap</figcaption> <ul class="tree"> <li><span>Home</span> <ul> <li><span>About us</span> <ul> <li><span>Our history</span> <ul> <li><span>Founder</span></li> </ul> </li> <li><span>Our board</span> <ul> <li><span>Brad Whiteman</span></li> <li><span>Cynthia Tolken</span></li> <li><span>Bobby Founderson</span></li> </ul> </li> </ul> </li> <li><span>Our products</span> <ul> <li><span>The Widget 2000™</span> <ul> <li><span>Order form</span></li> </ul> </li> <li><span>The McGuffin V2</span> <ul> <li><span>Order form</span></li> </ul> </li> </ul> </li> <li><span>Contact us</span> <ul> <li><span>Social media</span> <ul> <li><span>Facebook</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> </figure> |
カスタマイズ用のデモも用意されています。
「Customise your tree view」をクリックすると、接続線のカラーや幅、間隔などを調整できます。
See the Pen
Dynamic tree view by Ross Angus (@ross-angus)
on CodePen.
sponsors
