Bootstrap Collapseの基本を完全解説！data-bs-toggleとターゲット指定の仕組みを初心者向けに理解しよう
生徒
「BootstrapのCollapseって、ボタンを押すと表示が切り替わるやつですよね？」
先生
「そうです。クリックするだけで、表示したり隠したりできる便利な仕組みです。」
生徒
「JavaScriptが必要そうで難しそうに感じます…」
先生
「Bootstrapなら、HTMLに決まった書き方をするだけで動きます。仕組みを順番に見ていきましょう。」
1. BootstrapのCollapseとは何か？
BootstrapのCollapseは、クリックなどの操作をきっかけに、要素を表示したり非表示にしたりするための機能です。よくある例としては、「詳細はこちら」という文字を押すと説明文が出てくる動きがあります。
プログラミング未経験の人には、押すと中身が見える引き出しのようなものだと考えると分かりやすいです。引き出しは閉じていると中が見えませんが、取っ手を引くと中身が見えます。Collapseも同じで、操作する部分と、中身の部分がセットになっています。
2. data-bs-toggle="collapse" の役割
data-bs-toggleは、「この要素は何かを切り替えるスイッチですよ」とBootstrapに伝えるための目印です。collapseと指定することで、「表示と非表示を切り替える動き」を担当していることが分かります。
難しく感じるかもしれませんが、実際には「このボタンは開け閉め係です」と名札を付けているようなイメージです。この指定がないと、クリックしても何も起こりません。
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#sample1">
表示を切り替える
</button>
3. ターゲット指定とは何か？
Collapseでは、「どの部分を開け閉めするのか」を必ず指定します。この指定をターゲット指定と呼びます。data-bs-targetで、操作したい相手を指定します。
これはリモコンとテレビの関係に似ています。リモコンのボタンを押しても、どのテレビか分からなければ操作できません。data-bs-targetは、「このテレビですよ」と教えてあげる役割を持っています。
<div id="sample1" class="collapse">
<div class="card card-body">
ここが表示されたり隠れたりします。
</div>
</div>
4. idと#の関係を理解しよう
ターゲット指定でよく出てくるのが、idと#の関係です。HTMLでは、idは名前札のようなもので、ページの中で一つだけの特別な名前になります。
data-bs-targetでは、その名前を#付きで指定します。#は「この名前を探します」という意味を持っています。少し難しく見えますが、「#＋名前」でセットだと覚えてしまって問題ありません。
<button class="btn btn-success" data-bs-toggle="collapse" data-bs-target="#infoArea">
詳細を見る
</button>
<div id="infoArea" class="collapse">
<p>この文章が開いたり閉じたりします。</p>
</div>
5. Collapseが動く仕組みの裏側
Collapseは、クリックされたときにクラスを付けたり外したりすることで動いています。最初は隠れていて、操作すると表示用の状態に変わる、という流れです。
自分で一から作ろうとすると大変ですが、Bootstrapはその面倒な部分を全部用意してくれています。私たちは「どれを動かすか」を指定するだけで済みます。
6. 最初から表示しておく方法
ページを開いたときに、すでに表示されている状態にしたい場合もあります。そのときは、collapseの要素に追加の指定をします。
これにより、「最初は開いている引き出し」を作ることができます。説明文を常に見せたい場合などに便利です。
<div id="openSample" class="collapse show">
<div class="card card-body">
この内容は最初から表示されています。
</div>
</div>
7. 複数のCollapseを使うときの注意点
Collapseを複数使う場合、それぞれに違うidを付ける必要があります。同じ名前を使ってしまうと、どれが動くのか分からなくなってしまいます。
これは、同じ名前の鍵をたくさん作ってしまうようなものです。どの鍵がどの扉か分からなくならないよう、分かりやすい名前を付けることが大切です。
8. アコーディオンとの違いを軽く知っておこう
Bootstrapにはアコーディオンという仕組みもありますが、Collapseはもっと自由度が高いのが特徴です。アコーディオンは、基本的に一つ開くと他が閉じます。
一方でCollapseは、それぞれが独立して動きます。まずはCollapseの基本を理解しておくと、後でアコーディオンを学ぶときにも理解しやすくなります。
【60分集中】CSSを1行も書かない！？Bootstrap 5ユーティリティクラス活用で開発工数を50%削減
「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。
本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。
具体的なワークショップ内容と環境
【つくるもの】
モダンなランディングページ（LP）やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。
【開発環境】
VS CodeにBootstrap 5専用のSnippet（補完機能）を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度（Core Web Vitals）を意識した最適な読み込み設定など、プロの初期設定を伝授します。
この60分で得られる3つの革新スキル
スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。
CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。
「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。
※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。
Bootstrap 5を楽しみながら、一緒に学びましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
