質問: 添付画像のようなものを作りたいのですが、 htmlとcssのコードを教えていただきたいです。 よろしくお願いいたします。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/c57cc31daba329edaf23a44181a34e14.png)
回答: ツリー構造というか組織図のようなものですね。 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も共通部分が多く、簡潔に書けました。