cssでツリー構造のようなものを作りたいです

Question

添付画像のようなものを作りたいのですが、
htmlとcssのコードを教えていただきたいです。
よろしくお願いいたします。

Answer 1

ツリー構造というか組織図のようなものですね。
HTMLとCSSでできないか考えてみました。

調査したこと・試したことなどがありませんので、「やってほしいことだけを記載した丸投げの質問」になってしまいます。考え方だけ回答しますので、以下のように考えてみてください。

HTMLで構造を記述し、CSSで線を描きます。

wrapでその階層をまとめ、その中に、その階層lv*に記述する内容と、下層をまとめたものを入れるboxを、並列で入れます。
1階層目で言えば、wrap(lv1)の中に、lv1というクラスを持つエリアと、box(lv1)のエリアが並列に入っています。lv1にはaというその階層に記述する内容が入っていて、2階層目以降がまとめてbox(lv1)に入っています。
この時、2階層目が複数あれば、まとめてboxに入ります。（上図ではlv2のwrapが3つ）
また、各階層、同じ構造ですので、wrap(lv3)にもboxがあればlv4以降にも対応できますが、今回はありません。
このようにHTMLで構造が構築出来たら、CSSで線を描きます。

1番目の図はわかりやすく分解しただけですが、各階層のwrapの::beforeにborder（またはbackground)を使用して、赤線のような線を引きます。
この時、下側の線は次の線と重なりますので、基本的には上と左だけです。
また、その階層の最後のwrapは次がありませんので、上の線だけです。
このように描いた線を、wrapの高さの半分だけ下へずらせば、関係を表す線の右半分と縦線が描けます。
あとは上位層のlv*に対し、::afterなどで右に出る線を描けばつながります。

一応、このような考え方で、HTMLとCSSだけで書けました。
各階層同じ構造なので、CSSも共通部分が多く、簡潔に書けました。

Comments

[uuuuuuu]

回答いただき、ありがとうございました！
>調査したこと・試したことなどがありませんので、「やってほしいことだけを記載した丸投げの質問」になってしまいます。
こちら申し訳ありませんでした。当初は ul/liタグを使ってリスト構造で作成しようとしていました。
ご教示いただいた内容で再度挑戦してみます。

[kjml]

ul/liタグを使ったリスト構造でもできますよ。
私はdivでやりましたが、wrapをul、lv*とboxをそれぞれクラスをつけたli にして、
li を入れ子に（li の中にさらにul）で可能なはずです。

Answer 2

HTMLの仕様にはないと思いますがcanvasなどで実現することはできそうです
「ER図 HTML canvas」などでググるとよいでしょう

たとえばMarkDownDiagramなどすごく優秀な感じがします
サンプルページをご覧になると早いでしょう