プログラミング

Bootstrapで作るツリーリスト

最終更新： 06/04/2025
1 分の読み

Bootstrapを使用して、ウェブサイトに美しい階層的なリスト（ツリーリスト）を作成する方法について、完全かつ包括的に解説します。

Bootstrapとは？

Bootstrapは、モバイルファーストでレスポンシブなウェブデザインを簡単に作成できるフロントエンドフレームワークです。CSS、JavaScript、アイコンセットなどを含み、一般的なウェブデザインの問題を簡単に解決するためのツールが揃っています。Bootstrapを利用することで、開発者は効率的にウェブページを作成することができます。

関連記事

ツリーリストとは？

ツリーリストは、階層的に情報を表示するためのリスト構造です。通常、親子関係がある情報を整理するために使われます。例えば、フォルダとファイル、製品カテゴリなどがツリーリストとして表示されることがあります。

Bootstrapでツリーリストを作成する方法

Bootstrapには、標準でツリーリストを作成するコンポーネントは含まれていませんが、簡単にカスタムスタイルを利用してツリーリストを作成できます。以下では、Bootstrapを使用してツリーリストを実装する方法を詳細に説明します。

1. HTML構造の作成

まず最初に、ツリーリストを表現するためのHTML構造を作成します。基本的なツリーリストは、

    （順不同リスト）と

  • （リスト項目）タグを使って作成します。階層構造を作るためには、リスト項目の中にさらにリストをネストする形にします。

    html
    <ul class="tree">
  <li>
    <span class="caret">親アイテム 1span>
    <ul class="nested">
      <li>子アイテム 1-1li>
      <li>子アイテム 1-2li>
    ul>
  li>
  <li>
    <span class="caret">親アイテム 2span>
    <ul class="nested">
      <li>子アイテム 2-1li>
      <li>子アイテム 2-2li>
    ul>
  li>
ul>

    上記のHTML構造では、

      がツリー全体を囲んでおり、各親アイテムはタグで囲まれています。

        は子アイテムのリストを表現します。

        2. CSSでスタイルを整える

        次に、ツリーリストのスタイルを整えるためにCSSを使用します。Bootstrapには、すでに基本的なスタイルが適用されているため、追加でスタイルをカスタマイズすることができます。

        css
        /* ツリーリストのスタイル */
.tree, .nested {
  list-style-type: none;
  padding-left: 20px;
}

.caret {
  cursor: pointer;
  user-select: none;
}

.nested {
  display: none;
}

/* ツリーアイテムがクリックされたときに表示 */
.caret-down::before {
  content: "▼";
}

.caret::before {
  content: "►";
}

.caret-down {
  color: #3498db;
}

        上記のCSSコードでは、ツリーリスト全体にリストスタイルを削除し、インデントを調整しています。また、親アイテム（caret）はクリック可能なカーソルを設定し、リストのアイコンを変更しています。.nestedはデフォルトでは非表示に設定され、親アイテムをクリックすると表示されるようになります。

        3. JavaScriptでインタラクションを追加

        Bootstrap自体にはツリーリストを開閉するためのインタラクション機能は組み込まれていません。そのため、JavaScriptを使って、親アイテムをクリックしたときに子アイテムを表示したり隠したりできるようにします。

        javascript
        // 各親アイテムにクリックイベントを設定
document.querySelectorAll('.caret').forEach(function(caret) {
  caret.addEventListener('click', function() {
    this.parentElement.querySelector('.nested').classList.toggle('active');
    this.classList.toggle('caret-down');
  });
});

        このJavaScriptコードは、.caret要素がクリックされたときに、対応する子アイテム（.nested）の表示・非表示を切り替えるものです。また、.caret-downクラスを追加して、アイコンを変更します。

        4. 完成したコードのまとめ

        全体のコードは次のようになります：

        html
        html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ツリーリストの作成title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .tree, .nested {
      list-style-type: none;
      padding-left: 20px;
    }

    .caret {
      cursor: pointer;
      user-select: none;
    }

    .nested {
      display: none;
    }

    .caret-down::before {
      content: "▼";
    }

    .caret::before {
      content: "►";
    }

    .caret-down {
      color: #3498db;
    }
  style>
head>
<body>

<div class="container mt-5">
  <ul class="tree">
    <li>
      <span class="caret">親アイテム 1span>
      <ul class="nested">
        <li>子アイテム 1-1li>
        <li>子アイテム 1-2li>
      ul>
    li>
    <li>
      <span class="caret">親アイテム 2span>
      <ul class="nested">
        <li>子アイテム 2-1li>
        <li>子アイテム 2-2li>
      ul>
    li>
  ul>
div>

<script>
  document.querySelectorAll('.caret').forEach(function(caret) {
    caret.addEventListener('click', function() {
      this.parentElement.querySelector('.nested').classList.toggle('active');
      this.classList.toggle('caret-down');
    });
  });
script>

body>
html>

        5. 最後に

        これで、Bootstrapを使用して美しい階層的なツリーリストを作成できました。このようなツリーリストは、ファイルブラウザやカテゴリーメニューなど、さまざまな場面で有効に活用できます。Bootstrapのカスタマイズを活かし、デザインに合わせてスタイルを調整してみてください。

最終更新： 06/04/2025
1 分の読み
Back to top button