サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック

サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。

HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。

階層構造を明示するツリービューをul要素で実装するスタイルシートのテクニック

Tree view from unordered list

まずは、実際のデモをご覧ください。

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>が使用されています。

CSS

CSSは「DOM構造」も「サイトマップ」も同じです。
ポイントは、「display: table;」と「display: table-cell;」でツリービューの外観をつくり、li要素とcode要素の疑似要素にoutlineプロパティで接続線が実装されています。

「サイトマップ」の実装は基本的には「DOM構造」と同じです。

デモのキャプチャ

サイトマップのツリービュー

HTML

「DOM構造」で使用されていた<code>の代わりに、「サイトマップ」では<span>が使用されています。

カスタマイズ用のデモも用意されています。
「Customise your tree view」をクリックすると、接続線のカラーや幅、間隔などを調整できます。

See the Pen
Dynamic tree view
by Ross Angus (@ross-angus)
on CodePen.

sponsors

top of page

©2020 coliss