添付画像のようなツリーリストはどうやって作ればいいですか

締切済

質問者：39OK
質問日時：2021/03/20 05:34
回答数：1件

添付画像のようなツリーリストはどうやって作ればいいですか

htmlとCSSだけでは作れませんか
javascriptやJAVAとかの言語がないとつくれませんか

できればコードを記載いただけると助かります

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2021/03/20 14:41

こんにちは

検索しさえすれば、いろいろな解説サイトが見つかることと思います。
とりあえず、適当に作成してみましたので、ご参考にでもなれば。

※ ここでは画像が使いにくいので、記号や罫線部分を文字や枠線で代用してあります。
※ ですので、若干の長短や間延びがありますが、調整した画像を用いることなどで、もっときれいな表示にすることができるでしょう。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#hoge { margin: 50px; } /* 全体位置調整用 */

#hoge, #hoge ul {
list-style-type: none;
padding-left: 2em;
position: relative;
}
#hoge ul, #hoge input { display: none; }
#hoge li { position: relative; }

#hoge label::before {
content: "＋";
position: absolute;
left: -1.4em; top: 0.2em;
display: flex;
align-items: center;
justify-content: center;
width: 1em; height: 1em;
border: 1px solid gray;
background-color: white;
}
#hoge ul li:nth-child(n+1)::before {
content: "──　";
position: relative;
margin-left: -2.8em;
}
#hoge ul::before {
position: absolute;
content: "";
width: 1em; height: calc( 100% - 0.8em);
margin-left: -2.8em;
border-left: 1px solid black;
}
#hoge input:checked + label::before { content: "－"; }
#hoge input:checked ~ ul { display: block; }
</style>

</head>
<body>
<ul id="hoge">
<li><input type="checkbox" id="C1" /><label for="C1">1111</label>
<ul>
<li>1111-1</li>
<li>1111-2</li>
<li>1111-3</li>
</ul>
</li>

<li><input type="checkbox" id="C2" /><label for="C2">2222</label>
<ul>
<li>2222-1</li>
<li><input type="checkbox" id="C3" /><label for="C3">2222-2</label>
<ul>
<li>2222-2-1</li>
<li>2222-2-2</li>
<li>2222-2-3</li>
</ul>
</li>
<li>2222-3</li>
</ul>
</li>

<li>3333</li>
</ul>

</body>
</html>