CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSとJavaScriptで作るツリービューの実装方法【サンプルコード付き】

CSSとJavaScriptを組み合わせることで、Windowsのエクスプローラーのような、クリックで開閉できるツリービューを簡単に実装できます。本記事では、フォルダ構造を表現するツリービューを、実際に動くサンプルコードとともに解説します。

実装例

ポイントとなるのは、::before 疑似要素で▶アイコンを表示し、JavaScriptの classList.toggle() を使って子要素の表示・非表示を切り替える仕組みです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    ul, #treeUL {
        list-style-type: none;
    }
    #treeUL {
        margin: 0;
        padding: 0;
    }
    .rootTree {
        cursor: pointer;
        user-select: none;
        font-size: 18px;
        font-weight: bold;
        color: blue;
    }
    li {
        font-size: 16px;
        color: crimson;
        font-weight: 500;
    }
    .rootTree::before {
        content: "\25B6";
        color: black;
        display: inline-block;
        margin-right: 6px;
    }
    .rootTree-down::before {
        transform: rotate(90deg);
    }
    .children {
        display: none;
    }
    .active {
        display: block;
    }
</style>
</head>
<body>
<h1>Tree view example</h1>
<ul id="treeUL">
<li>
<span class="rootTree">Root</span>
<ul class="children">
<li>/bin</li>
<li>/etc</li>
<li>
<span class="rootTree">/home</span>
<ul class="children">
<li>/home/Downloads</li>
<li>/home/Pictures/</li>
<li>
<span class="rootTree">/home/Desktop</span>
<ul class="children">
<li>/home/Desktop/file.txt</li>
<li>/home/Desktop/file1.mp3</li>
<li>/home/Desktop/file1.mp4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
    var toggler = document.querySelectorAll(".rootTree");
    Array.from(toggler).forEach(item => {
        item.addEventListener("click", () => {
            item.parentElement.querySelector(".children").classList.toggle("active");
            item.classList.toggle("rootTree-down");
        });
    });
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

CSSとJavaScriptで作るツリービューの実装方法【サンプルコード付き】

続いて、親ノードの▶アイコン（キャレット）をクリックしてツリーを展開した様子がこちらです。

CSSとJavaScriptで作るツリービューの実装方法【サンプルコード付き】

コードのポイント解説

  • ▶アイコンの表示： .rootTree::before の content: "\25B6" により、親ノードの手前に黒い三角アイコンを自動的に表示しています。
  • 開閉状態の可視化： ノードが開いたときに付与される .rootTree-down クラスで、transform: rotate(90deg) を使ってアイコンを90度回転させます。これにより「開いている」ことが直感的にわかります。
  • 初期状態は非表示： .children { display: none; } によって、子要素は最初は折りたたまれた状態になります。
  • クリックでの切り替え： JavaScript側では querySelectorAll(".rootTree") ですべての親ノードを取得し、各ノードにクリックイベントを登録。classList.toggle("active") で表示／非表示をワンタッチで反転させています。

このように、外部ライブラリに頼らずとも、HTML・CSS・バニラJavaScriptだけで軽量なツリービューを作成できます。ファイルマネージャーやカテゴリナビゲーションなど、さまざまなUIに応用できるので、ぜひプロジェクトに取り入れてみてください。

  1. CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】

    Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード

  2. CSSとJavaScriptで拡張グリッド（クリックで展開するグリッド）を作成する方法

    CSSとJavaScriptを組み合わせることで、カードをクリックすると詳細パネルが展開される「拡張グリッド（Expanding Grid）」を簡単に実装できます。本記事では、3カラム構成のグリッドを例に、具体的な実装手順をわかりやすく解説します。 実装のポイント クリックイベント：各カラムにonclick属性を設定し、クリックされたカラムに対応するタブを開きます。 表示の切り替え：新しいタブを開く前に既存のタブをすべて非表示にすることで、常に1つのタブだけが展開された状態を保ちます。 閉じるボタン：タブ右上の「×」ボタンをクリックするとパネルが閉じ、元のグリッド表示に戻ります。 サンプル