Bootstrap 5 アコーディオン入門｜.accordion と .accordion-item の基本構造と役割を超やさしく解説

アコーディオン入門：.accordion/.accordion-item の基本構造と役割【Bootstrap 5】

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのアコーディオンって、そもそも何をするものなんですか？」

先生

「アコーディオンは、クリックすると内容が開いたり閉じたりする仕組みだよ。説明を整理して見せたいときに便利なんだ。」

生徒

「HTMLもCSSもよくわからないんですが、それでも使えますか？」

先生

「Bootstrap 5を使えば、決まった形を書くだけで動くから大丈夫。まずは基本の構造から見ていこう。」

1. Bootstrapのアコーディオンとは何か

Bootstrapのアコーディオンとは、画面をすっきり見せるためのUI部品です。たとえば説明書を思い浮かべてください。全部を一気に広げると読みにくいですが、必要なところだけ開けると分かりやすくなります。アコーディオンは、まさにその考え方を画面上で実現したものです。

Bootstrap 5では、アコーディオンはCollapseという仕組みを使って動いています。 Collapseとは「折りたたむ」という意味で、クリックによって表示と非表示を切り替えます。難しく聞こえますが、実際は決まったHTMLを書くことで自動的に動きます。

2. .accordion クラスの役割を理解しよう

.accordion は、アコーディオン全体を包む箱のような存在です。お弁当箱に例えると、.accordion は外側のケースにあたります。この中に、複数のアコーディオン項目を入れていきます。

Bootstrapでは、この .accordion があることで、中に入った項目同士の動きが正しく制御されます。初心者の方は「アコーディオンを使うときは、まず .accordion で囲む」と覚えておくと安心です。

3. .accordion-item は1つ1つの項目

.accordion-item は、アコーディオンの中の1項目です。本の目次でいうと、1行1行の項目が .accordion-item です。この中に「見出し部分」と「開いたときに見える内容」を入れます。

項目を増やしたい場合は、.accordion-item をコピーして増やすだけです。プログラミング未経験の方でも、同じ形を繰り返すだけなので安心して使えます。

4. 一番シンプルなアコーディオンのHTML構造


<div class="accordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#sample1">
                アコーディオンのタイトル
            </button>
        </h2>
        <div id="sample1" class="accordion-collapse collapse show">
            <div class="accordion-body">
                ここに表示したい内容を書きます。
            </div>
        </div>
    </div>
</div>

ブラウザ表示

このコードを見ると難しそうに感じるかもしれませんが、実際に覚える必要があるのは「決まった形がある」という点です。ボタン部分をクリックすると、下の内容が開く仕組みになっています。

5. accordion-header と accordion-button の意味

accordion-header は見出し全体をまとめる役割を持っています。その中にある accordion-button が、実際にクリックするボタンです。このボタンがスイッチの役割をして、内容の表示と非表示を切り替えます。

ボタンに書かれている data-bs-toggle や data-bs-target は、「Bootstrapに対する指示書」のようなものです。どこを開くかを指定しているだけなので、深く理解しなくても動かすことはできます。

6. 複数のアコーディオン項目を作る例


<div class="accordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#item1">
                質問その1
            </button>
        </h2>
        <div id="item1" class="accordion-collapse collapse show">
            <div class="accordion-body">
                回答内容その1です。
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#item2">
                質問その2
            </button>
        </h2>
        <div id="item2" class="accordion-collapse collapse">
            <div class="accordion-body">
                回答内容その2です。
            </div>
        </div>
    </div>
</div>

ブラウザ表示

このように、.accordion-item を並べることで、複数の質問と答えを整理して表示できます。よくある質問ページや説明ページでよく使われる形です。

7. よく使われる場面と初心者がつまずきやすい点

Bootstrapのアコーディオンは、FAQや注意事項の表示によく使われます。画面をスクロールしなくても情報を整理できるため、見る人にやさしいデザインになります。

初心者がつまずきやすいのは、idの名前を間違えることです。ボタンで指定した名前と、内容側の名前が同じでないと動きません。コピーしたときは、idが重ならないように注意しましょう。

8. 画像や文章を入れたアコーディオン例


<div class="accordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#imgSample">
                画像付きの説明
            </button>
        </h2>
        <div id="imgSample" class="accordion-collapse collapse show">
            <div class="accordion-body">
                <img src="/img/sample150-100.jpg" alt="サンプル画像" class="mb-2">
                <p>画像と文章を一緒に表示することもできます。</p>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

アコーディオンの中には、文章だけでなく画像も自由に入れられます。そのため、商品の説明や手順の解説にも向いています。見せたい情報を整理する意識が大切です。

2026年最新スキルアップ・実践セミナー