BootstrapアコーディオンとCollapseの使い方完全ガイド！カードやリストと組み合わせるUIレシピ集

1. BootstrapアコーディオンとCollapseとは

1. BootstrapアコーディオンとCollapseとは

Bootstrapとは、見た目を簡単に整えられるデザイン用の道具箱のような存在です。その中にあるアコーディオンは、必要なときだけ内容を表示できる便利な仕組みです。たくさんの情報を一度に見せると画面がごちゃごちゃしますが、折りたたみ機能を使うことで読みやすくなります。

Collapseは折りたたみの動きを担当する機能です。ボタンを押すと内容が表示され、もう一度押すと閉じます。アコーディオンは、このCollapseを使って複数の項目をまとめた形です。

Web制作初心者でも、あらかじめ用意されたclassを指定するだけで実装できます。難しいJavaScriptを書かなくても動く点が大きな特徴です。

2. 基本のアコーディオンの作り方

2. 基本のアコーディオンの作り方

まずは一番基本的なアコーディオンの形を確認しましょう。箱の中に質問があり、クリックすると答えが表示されるイメージです。

<div class="accordion" id="sampleAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        質問１ サービス内容について
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#sampleAccordion">
      <div class="accordion-body">
        こちらはサービス内容の説明です。
      </div>
    </div>
  </div>
</div>

accordionというクラスが全体の箱です。accordion-itemが一つ一つの項目です。collapseという指定がある部分が開閉される中身です。showを付けると最初から開いた状態になります。

3. カードと組み合わせるアコーディオンUI

3. カードと組み合わせるアコーディオンUI

カードとは、名刺のような見た目の箱です。商品紹介やプロフィール表示によく使われます。アコーディオンと組み合わせると、クリックで詳細情報を表示できます。

<div class="card" style="width: 18rem;">
  <img src="/img/sample150-100.jpg" class="card-img-top" alt="サンプル画像">
  <div class="card-body">
    <h5 class="card-title">商品タイトル</h5>
    <p class="card-text">簡単な説明文です。</p>
    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#detailArea">
      詳細を見る
    </button>
    <div id="detailArea" class="collapse mt-3">
      ここに商品の詳しい説明を書きます。
    </div>
  </div>
</div>

ボタンにdata-bs-toggleとdata-bs-targetを指定することで、クリック時に下の詳細部分が開きます。通販サイトやポートフォリオ制作でもよく使われるデザインです。

4. リストグループと組み合わせる方法

4. リストグループと組み合わせる方法

リストグループは、項目を縦に並べるための部品です。メニュー一覧やお知らせ一覧に便利です。各項目ごとに折りたたみを設定できます。

<ul class="list-group">
  <li class="list-group-item">
    <a data-bs-toggle="collapse" href="#listDetail1" class="text-decoration-none">
      お知らせ１
    </a>
    <div id="listDetail1" class="collapse mt-2">
      お知らせの詳細内容です。
    </div>
  </li>
  <li class="list-group-item">
    <a data-bs-toggle="collapse" href="#listDetail2" class="text-decoration-none">
      お知らせ２
    </a>
    <div id="listDetail2" class="collapse mt-2">
      こちらも詳細情報です。
    </div>
  </li>
</ul>

リスト形式にすることで、スマートフォン表示でも見やすい構成になります。レスポンシブデザインにも対応しやすいのがBootstrapの利点です。

5. 複数同時に開かない設定

5. 複数同時に開かない設定

アコーディオンでは、一つだけ開いて他は閉じる設定がよく使われます。その場合はdata-bs-parentを指定します。これにより同時に複数開かないよう制御できます。

<div class="accordion" id="faqAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#faq1">
        よくある質問１
      </button>
    </h2>
    <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
      <div class="accordion-body">
        回答内容です。
      </div>
    </div>
  </div>
</div>

この仕組みは企業サイトや公式サイトの質問ページでよく利用されます。利用者が情報を探しやすくなるため、ユーザー体験の向上にもつながります。

6. デザインを少し整える工夫

6. デザインを少し整える工夫

Bootstrapでは背景色や余白を簡単に指定できます。見やすさはWebデザインにおいて非常に重要です。例えばbg-lightやshadowを追加すると立体感が出ます。

<div class="accordion shadow p-3 bg-light" id="designAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#design1">
        デザイン例
      </button>
    </h2>
    <div id="design1" class="accordion-collapse collapse show">
      <div class="accordion-body">
        背景色と影を追加した例です。
      </div>
    </div>
  </div>
</div>

色や余白を整えるだけで、印象が大きく変わります。初心者でも少しずつ調整することで、見やすいアコーディオンUIを作れるようになります。BootstrapアコーディオンやCollapseを活用することで、情報整理された分かりやすいWebページを制作できます。

まとめ

まとめ

今回はBootstrapアコーディオンとCollapseの基本的な仕組みから、カードUIやリストグループと組み合わせる実践的な方法までを丁寧に解説しました。Bootstrap5を活用することで、JavaScriptをほとんど書かなくても、折りたたみ機能や開閉アニメーションを簡単に実装できることが分かりました。アコーディオンは情報を整理し、ユーザーにとって見やすい画面構成を実現するための重要なUIコンポーネントです。特にWebデザインやフロントエンド開発、レスポンシブデザインを意識したサイト制作において、アコーディオンとCollapseは非常に有効です。

accordionクラスやcollapseクラス、data bs toggleやdata bs targetといった属性を正しく理解することで、初心者でも迷わず実装できます。またdata bs parentを指定することで、同時に複数開かない制御も可能になり、よくある質問ページや企業サイトの案内ページなどにも応用できます。カードコンポーネントと組み合わせれば商品紹介ページに活用でき、リストグループと組み合わせればお知らせ一覧やメニュー一覧としても使えます。

Bootstrapアコーディオンは単なる折りたたみ機能ではなく、情報設計やユーザー体験の向上にもつながる重要な技術です。Web制作初心者の方は、まずは基本の構造を理解し、そこからデザイン調整や応用パターンへと発展させていくとよいでしょう。HTMLとCSSの基礎を身につけながら、Bootstrap5のコンポーネントを活用することで、実践的なフロントエンドスキルが自然と身につきます。

サンプルプログラムで総復習

最後に、アコーディオンとカードを組み合わせた実践例を確認しておきましょう。実際のWebサイト制作を想定し、商品紹介と詳細説明を折りたたみで表示する構成です。Bootstrap5のクラス設計を意識しながら確認してください。

<div class="container mt-4">
  <div class="card shadow" style="width: 22rem;">
    <img src="/img/sample150-100.jpg" class="card-img-top" alt="商品画像">
    <div class="card-body">
      <h5 class="card-title">Bootstrap対応商品</h5>
      <p class="card-text">レスポンシブ対応の便利な商品です。</p>
      <button class="btn btn-success" data-bs-toggle="collapse" data-bs-target="#productDetail">
        商品詳細を見る
      </button>
      <div id="productDetail" class="collapse mt-3">
        <div class="accordion" id="productAccordion">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#feature1">
                特徴その一
              </button>
            </h2>
            <div id="feature1" class="accordion-collapse collapse" data-bs-parent="#productAccordion">
              <div class="accordion-body">
                フロントエンド開発に最適な設計です。
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

このようにBootstrapアコーディオンとCollapseを組み合わせることで、段階的に情報を表示することができます。ユーザーは必要な情報だけを開いて確認できるため、画面がすっきりし、操作性も向上します。Webデザインの観点からも、視線誘導や情報整理に大きな効果があります。