Bootstrap5 アコーディオン完全入門｜アイコン付きCollapseで矢印を回転・位置・間隔までやさしく解説

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

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

Bootstrapのアコーディオンとは、見出しをクリックすると内容が表示されたり隠れたりする仕組みです。引き出し付きの棚を想像すると分かりやすく、必要な情報だけを開いて確認できます。プログラミング未経験の人でも、用意された部品を組み合わせる感覚で使えるのが特徴です。

2. 基本となるアコーディオンのHTML構造

2. 基本となるアコーディオンのHTML構造

<div class="accordion" id="sampleAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#box1">
                タイトル
            </button>
        </h2>
        <div id="box1" class="accordion-collapse collapse show">
            <div class="accordion-body">
                ここに内容が入ります
            </div>
        </div>
    </div>
</div>

この構造は「箱・フタ・中身」の三つで考えると理解しやすいです。ボタン部分がフタで、押すと中身が見える仕組みになっています。

3. アイコン付きアコーディオンの考え方

3. アイコン付きアコーディオンの考え方

アイコンとは、小さな絵文字のような記号です。矢印アイコンを使うと、開いているか閉じているかが一目で分かります。Bootstrap Iconsを使えば、特別な画像を用意しなくても簡単に表示できます。

<button class="accordion-button">
    <i class="bi bi-chevron-down me-2"></i>
    よくある質問
</button>

4. 矢印アイコンを回転させる仕組み

4. 矢印アイコンを回転させる仕組み

回転とは、くるっと向きが変わることです。閉じているときは下向き、開いたら上向きにすると、状態が直感的に分かります。CSSという見た目を整える設定を使って実現します。

<style>
.accordion-button .bi {
    transition: transform 0.3s;
}
.accordion-button:not(.collapsed) .bi {
    transform: rotate(180deg);
}
</style>

<button class="accordion-button collapsed">
    <i class="bi bi-chevron-down me-2"></i>
    クリックしてください
</button>

ゆっくり回る動きは、ドアが静かに開くようなイメージで、見た目もやさしくなります。

5. アイコンの位置を調整する方法

5. アイコンの位置を調整する方法

アイコンの位置は、文字の前後どちらに置くかで印象が変わります。位置調整は、横に並べる棚を想像すると理解しやすいです。

<button class="accordion-button d-flex justify-content-between">
    タイトル
    <i class="bi bi-chevron-down"></i>
</button>

6. アイコンと文字の間隔を整える

6. アイコンと文字の間隔を整える

間隔が狭すぎると窮屈に見え、広すぎると離れすぎます。Bootstrapでは、余白を指定するクラスが用意されています。

<button class="accordion-button">
    <i class="bi bi-chevron-down me-3"></i>
    アコーディオンの説明
</button>

少し間をあけるだけで、文字が読みやすくなります。

7. 複数のアコーディオンを並べるときの注意

7. 複数のアコーディオンを並べるときの注意

たくさん並べる場合は、同時に開かないようにする設定が便利です。これにより、画面がごちゃごちゃせず、必要な情報だけに集中できます。

8. 初心者がつまずきやすいポイント

8. 初心者がつまずきやすいポイント

よくある失敗は、アイコンが回らない、位置がずれるといった見た目の問題です。原因の多くは、クラス名の書き間違いや、CSSの指定漏れです。落ち着いて一つずつ確認することが大切です。

まとめ

まとめ

ここまで、Bootstrap5のアコーディオンについて、基本の仕組みからアイコン付きの表示方法、矢印の回転、位置や間隔の調整まで、段階的に見てきました。アコーディオンは、クリックすることで内容を開閉できる便利な仕組みで、情報量が多いページでも、利用者が迷わず目的の情報にたどり着けるようになります。特にBootstrap5では、あらかじめ用意されたクラスや構造を使うことで、複雑な処理を書かなくても、見た目と動きを同時に整えられる点が大きな魅力です。

基本となるHTML構造では、アコーディオン全体を囲む箱、その中に配置する項目、そしてクリックされる見出し部分と、表示非表示が切り替わる内容部分という流れを意識することが重要でした。この構造を正しく理解すると、なぜクリックで開閉できるのか、どの部分を修正すれば見た目が変わるのかが自然と分かるようになります。

アイコン付きアコーディオンでは、文字だけでなく視覚的な手がかりを追加することで、使いやすさが大きく向上しました。矢印アイコンを使うことで、開いている状態か閉じている状態かを直感的に伝えられます。さらに、CSSを使って回転の動きを加えることで、動作に一体感が生まれ、操作したときの安心感も高まります。回転の設定は難しそうに見えますが、実際にはクラスの状態に応じて角度を変えているだけなので、仕組みが分かれば応用もしやすくなります。

また、アイコンの位置や文字との間隔を調整することも、見た目の印象を左右する大切な要素でした。文字の前に置くのか、後ろに置くのか、あるいは左右に分けるのかによって、同じ内容でも受け取られ方が変わります。Bootstrapが用意している余白調整のクラスを活用すれば、細かい数値を考えなくても、バランスの取れたレイアウトを簡単に作れます。

複数のアコーディオンを並べる場合には、同時に開きすぎないようにする工夫も重要でした。必要な情報だけを表示し、それ以外は閉じておくことで、画面全体がすっきりし、利用者の集中を妨げません。こうした細かな配慮が、結果として読みやすく、使いやすいページにつながります。

初心者がつまずきやすいポイントとしては、クラス名の指定ミスや、CSSの適用範囲の勘違いが挙げられました。しかし、構造と役割を一つずつ確認していけば、原因は必ず見つかります。アコーディオンは見た目が少し複雑に感じられますが、基本を押さえれば決して難しいものではありません。今回学んだ内容を土台に、色や余白、アニメーションを調整していくことで、自分なりの使いやすいアコーディオンを作れるようになるでしょう。

まとめで使ったサンプル構造

<div class="accordion" id="summaryAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed d-flex justify-content-between" data-bs-toggle="collapse" data-bs-target="#summaryBox">
                まとめの確認
                <i class="bi bi-chevron-down"></i>
            </button>
        </h2>
        <div id="summaryBox" class="accordion-collapse collapse">
            <div class="accordion-body">
                ここにまとめの内容が入ります
            </div>
        </div>
    </div>
</div>