Bootstrapドロップダウン完全入門！data-bs-toggle="dropdown"の仕組みとJSバンドルをやさしく解説

1. Bootstrapのドロップダウンとは何か

1. Bootstrapのドロップダウンとは何か

Bootstrapのドロップダウンは、ボタンやリンクをクリックすると、下にメニューが表示される仕組みです。Webサイトのナビゲーションや設定メニューでよく使われています。初心者の方は、引き出しをイメージすると分かりやすいです。普段は閉まっていて、取っ手を引くと中身が見える、そんな動きを画面上で再現しています。

2. data-bs-toggle="dropdown"の役割

2. data-bs-toggle="dropdown"の役割

data-bs-toggle="dropdown"は、「このボタンはドロップダウンとして動きますよ」とBootstrapに伝えるための目印です。HTMLにこの指定があると、BootstrapのJavaScriptがそれを見つけて、クリックされたときにメニューを表示する処理を自動で行います。プログラミング未経験の方は、これはスイッチのラベルのようなものだと考えてください。

3. 最小構成のドロップダウンHTML例

3. 最小構成のドロップダウンHTML例

まずは一番シンプルなドロップダウンのHTMLを見てみましょう。特別なJavaScriptは書いていませんが、BootstrapのJSが裏で動いています。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        メニュー
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">項目1</a></li>
        <li><a class="dropdown-item" href="#">項目2</a></li>
    </ul>

4. JavaScriptバンドルが必要な理由

4. JavaScriptバンドルが必要な理由

Bootstrapのドロップダウンは、見た目はHTMLとCSSですが、実際の動きはJavaScriptが担当しています。クリックを検知したり、メニューを表示したり隠したりする処理は、すべてJavaScriptの仕事です。そのため、BootstrapのJavaScriptバンドルを読み込まないと、ボタンを押しても何も起こりません。

5. Popperとは何か

5. Popperとは何か

Popperは、ドロップダウンやツールチップの位置を正しく計算するための仕組みです。画面の端に近いときでも、メニューがはみ出さないように調整してくれます。初心者の方は、「自動で位置を調整してくれる便利な裏方さん」と思ってください。Bootstrap5では、このPopperがJSバンドルに含まれています。

6. Bootstrap5のJSバンドル読み込み例

6. Bootstrap5のJSバンドル読み込み例

Bootstrap5では、Popper込みのJavaScriptバンドルを1つ読み込むだけでOKです。これを読み込むことで、ドロップダウンが動くようになります。

<script src="js/bootstrap.bundle.min.js"></script>

7. クリックで動く仕組みをやさしく解説

7. クリックで動く仕組みをやさしく解説

ボタンをクリックすると、BootstrapのJavaScriptがHTMLを確認し、data-bs-toggle="dropdown"を見つけます。そして対応するメニューを表示します。この一連の流れは自動化されているため、私たちはHTMLを書くことに集中できます。まるで電車の自動改札のように、切符を入れるだけで後は機械が判断してくれるイメージです。

8. よくある動かない原因

8. よくある動かない原因

ドロップダウンが動かないときの多くは、JavaScriptバンドルの読み込み忘れです。また、data-bs-toggleの書き間違いも原因になります。初心者の方は、まず「JSを読み込んだか」「スペルは正しいか」を確認してください。それだけで解決することがとても多いです。

<button class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown">
    確認用ボタン
</button>