Bootstrap5でアコーディオン実装【コードサンプルあり】│関東・名古屋・福岡のホームページ制作会社│アイエムワークス株式会社

070-2017-3870 無料相談・お見積り
BLOG
開発者ブログ

Bootstrap5でアコーディオン実装【コードサンプルあり】

Bootstrap5でアコーディオンの実装方法

今回はBootstrap5における「アコーディオン」の実装方法と、オプションの実装方法をサンプル付きで紹介いたします。

Bootstrap5公式

はじめに

Bootstrap5系を用いてモーダルの実装方法をご紹介します。
アコーディオンは、Bootstrapのコンポーネントを利用することで、比較的簡単に実装ができます。

アコーディオンは、狭いスペースを有効活用する用途など、さまざまな場面で活用できる便利な要素です！また、ユーザー体験の向上、アニメーションやトランジション効果などのメリットが見込めますね！

では、早速アコーディオンの実装方法を解説していきます。

Bootstrap5の読み込み

まずは、Bootstrap 5 を扱えるようにするため、Bootstrap 5をHTMLに読み込んでいきましょう。

Bootstrap 5は予めCDNなどで用意されています。
インストール方法は、コマンド、CDN、自サーバーにダウンロードするなど方法は様々ですが、
今回はBootstrap公式のCDN「jsDelivr」から読み込んでいきます。

Bootstrapのインストール

アコーディオンを正しく表示させるためには、BootstrapのCSSとJavaScriptをプロジェクトに含める必要があります。以下のコードを<head>タグ内に追加します。

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS Bundle (Popper.jsも含まれています) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5の読み込みは以上です！！

アコーディオンの基本構造

アコーディオンを使うと、クリックすることでアコーディオンの内容を展開・折り畳むことができるようになります。

基本的なHTMLの構造

では、早速上記のコードをBootstrap5を読み込み済みのHTMLファイルに書いてみましょう。
実際の動きは、下のリンクから確認いただけます。

任意のIDを指定する箇所が3か所あるのでご注意ください。
同じ文字を入れておけばとりあえず動きます!

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#任意のID" aria-expanded="true" aria-controls="任意のID">
        ボタン名
      </button>
    </h2>
    <div id="任意のID" class="accordion-collapse collapse show">
      <div class="accordion-body">
        中身
      </div>
    </div>
  </div>
</div>
基本アコーディオンサンプル

アクセシビリティを考えたHTMLの構造

Webアクセシビリティを考えた場合、button要素にaria-label=”アコーディオンボタン”と入っていてもよいかもしれませんね。

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#任意のID" aria-expanded="true" aria-controls="任意のID" aria-label="アコーディオンボタン">
        ボタン名
      </button>
    </h2>
    <div id="任意のID" class="accordion-collapse collapse show">
      <div class="accordion-body">
        中身
      </div>
    </div>
  </div>
</div>

オプション機能で拡張

ここでは、Bootstrap5に標準で搭載されているアコーディオンの拡張方法を解説していきます。

複数のアコーディオン

アコーディオンを2個、3個と複数表示させる方法です。
以下のコードの注意する点は4箇所です。

1.アコーディオン全体のID
以下のコードでは、対象が4箇所あります。
アコーディオン全体を囲うdivに1つ。
個々のアコーディオンに対して3つ。
以下のサンプルでは、AC_Sampleとしている箇所になります。

2.個々のアコーディオン要素に対してのID
個々のアコーディオン要素に対して、重複しないIDを振ります。
以下のコードはアコーディオンが3つなのでAC1、AC2、AC3としています。

アコーディオン全体にAC_Sampleを指定し、個々のアコーディオン要素のdata-bs-parentに対して#AC_Sampleを指定することで、3つのアコーディオン要素が連携します。

<div class="accordion" id="AC_Sample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#AC1" aria-expanded="true" aria-controls="AC1">
        ボタン1
      </button>
    </h2>
    <div id="AC1" class="accordion-collapse collapse show" data-bs-parent="#AC_Sample">
      <div class="accordion-body">
        中身1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#AC2" aria-expanded="false" aria-controls="AC2">
        ボタン2
      </button>
    </h2>
    <div id="AC2" class="accordion-collapse collapse" data-bs-parent="#AC_Sample">
      <div class="accordion-body">
        中身2
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#AC3" aria-expanded="false" aria-controls="AC3">
        ボタン3
      </button>
    </h2>
    <div id="AC3" class="accordion-collapse collapse" data-bs-parent="#AC_Sample">
      <div class="accordion-body">
        中身3
      </div>
    </div>
  </div>
</div>
複数のアコーディオンサンプル

角丸や境界線、背景色を削除（Flash）

.accordionに.accordion-flushを追加することで、アコーディオン全体の角丸を消すことができます。

<div class="accordion accordion-flush" id="AC_Sample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#AC1" aria-expanded="true" aria-controls="AC1">
        ボタン1
      </button>
    </h2>
    <div id="AC1" class="accordion-collapse collapse show" data-bs-parent="#AC_Sample">
      <div class="accordion-body">
        中身1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#AC2" aria-expanded="false" aria-controls="AC2">
        ボタン2
      </button>
    </h2>
    <div id="AC2" class="accordion-collapse collapse" data-bs-parent="#AC_Sample">
      <div class="accordion-body">
        中身2
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#AC3" aria-expanded="false" aria-controls="AC3">
        ボタン3
      </button>
    </h2>
    <div id="AC3" class="accordion-collapse collapse" data-bs-parent="#AC_Sample">
      <div class="accordion-body">
        中身3
      </div>
    </div>
  </div>
</div>
Flashのアコーディオンサンプル

常時オープン

それぞれのアコーディオン要素の.accordion-collapseのdata-bs-parent属性を省略して、別のアイテムが開かれたときにアコーディオンアイテムが開いたままになるようにします。

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#AC1" aria-expanded="true" aria-controls="AC1">
        ボタン1
      </button>
    </h2>
    <div id="AC1" 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" type="button" data-bs-toggle="collapse" data-bs-target="#AC2" aria-expanded="false" aria-controls="AC2">
        ボタン2
      </button>
    </h2>
    <div id="AC2" class="accordion-collapse collapse">
      <div class="accordion-body">
        中身2
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#AC3" aria-expanded="false" aria-controls="AC3">
        ボタン3
      </button>
    </h2>
    <div id="AC3" class="accordion-collapse collapse">
      <div class="accordion-body">
        中身3
      </div>
    </div>
  </div>
</div>
常時オープンのアコーディオンサンプル

変数

Sassを使うことで、細かな設定変更が可能です。

Sassを理解していれば簡単かと思いますが、Sassがちょっと難しいと思われる方は、アコーディオンにIDやclassを付与して対応も可能です!

変数

--#{$prefix}accordion-color: #{$accordion-color};
--#{$prefix}accordion-bg: #{$accordion-bg};
--#{$prefix}accordion-transition: #{$accordion-transition};
--#{$prefix}accordion-border-color: #{$accordion-border-color};
--#{$prefix}accordion-border-width: #{$accordion-border-width};
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-color: #{$accordion-button-color};
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
--#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
--#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
--#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
--#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
--#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
--#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
--#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};

Sass変数

$accordion-padding-y:                     1rem;
$accordion-padding-x:                     1.25rem;
$accordion-color:                         var(--#{$prefix}body-color);
$accordion-bg:                            var(--#{$prefix}body-bg);
$accordion-border-width:                  var(--#{$prefix}border-width);
$accordion-border-color:                  var(--#{$prefix}border-color);
$accordion-border-radius:                 var(--#{$prefix}border-radius);
$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width);

$accordion-body-padding-y:                $accordion-padding-y;
$accordion-body-padding-x:                $accordion-padding-x;

$accordion-button-padding-y:              $accordion-padding-y;
$accordion-button-padding-x:              $accordion-padding-x;
$accordion-button-color:                  var(--#{$prefix}body-color);
$accordion-button-bg:                     var(--#{$prefix}accordion-bg);
$accordion-transition:                    $btn-transition, border-radius .15s ease;
$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle);
$accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis);

$accordion-button-focus-border-color:     $input-focus-border-color;
$accordion-button-focus-box-shadow:       $btn-focus-box-shadow;

$accordion-icon-width:                    1.25rem;
$accordion-icon-color:                    $body-color;
$accordion-icon-active-color:             $primary-text-emphasis;
$accordion-icon-transition:               transform .2s ease-in-out;
$accordion-icon-transform:                rotate(-180deg);

$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

まとめ

この記事では、Bootstrap 5を使ったアコーディオンの実装方法について解説しました。

アコーディオンを利用することで、ページの見やすさと利便性が向上し、情報をコンパクトにまとめて表示できます。デザインのカスタマイズやJavaScriptを活用したインタラクションの追加も容易ですので、ぜひプロジェクトに取り入れてみてください。

Bootstrapのアコーディオンで、情報をわかりやすく整理して、ユーザーに優しいサイトを目指しましょう。

アイエムワークスはBootstrap5を使った制作や、部分的な実装も承っております。
お困りごとがございましたら是非お問い合わせください。

Webに関するお問い合わせ

Web制作やその他のWeb関連のお問い合わせやご相談は、こちらからどうぞ。

Webに関するお問い合わせ

Bootstrap5に関するその他の記事

Bootstrap 4からBootstrap 5の主な変更点と、導入時に押さえておきたいポイントをまとめました。

Bootstrap 5とBootstrap 4の主要変更点を比較

Bootstrap 4からBootstrap 5の主な変更点と、導入時に押さえておきたいポイントをまとめました。
Bootstrap 5を使ったモーダルの実装方法。中央表示やスクロール対応、サイズ変更などオプションをサンプルコード付きで紹介!!

Bootstrap5でモーダル実装【コードサンプルあり】

Bootstrap 5を使ったモーダルの実装方法。中央表示やスクロール対応、サイズ変更などオプションをサンプルコード付きで紹介!!

ブログ一覧に戻る

LATEST BLOG 最新のブログ

BLOG CATEGORY カテゴリー

BLOG TAG タグ

ARCHIVE アーカイブ

その他のHTML・CSS

その他のHTML・CSSを見る

CONTACT US

お見積りやご相談は、メール又はお電話にてお気軽にご連絡ください。
担当者が丁寧に対応いたします。

無料相談・お見積り