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

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

行動規範の内容に同意します

回答2件

ベストアンサー

ツリー構造というか組織図のようなものですね。
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などで右に出る線を描けばつながります。