Bootstrapオフキャンバス完全入門｜data-bs-toggleとdata-bs-targetで開閉を実装しよう

開閉の実装：data-bs-toggle="offcanvas" と data-bs-target の使い方

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

生徒

「Bootstrapのオフキャンバスって、どうやって開いたり閉じたりするんですか？」

先生

「ボタンにdata-bs-toggleとdata-bs-targetを設定するだけで、簡単に開閉できます。」

生徒

「プログラミング未経験でも大丈夫ですか？」

先生

「もちろんです。スイッチを押す感覚で考えると、とても分かりやすいですよ。」

1. Bootstrapのオフキャンバスとは何か

Bootstrapのオフキャンバスとは、画面の外側に隠れていて、必要なときだけスライドして表示されるパネルのことです。スマートフォンのメニュー画面を想像すると分かりやすく、普段は見えないけれど、ボタンを押すと横から出てきます。 Bootstrap5では、このオフキャンバス機能が標準で用意されており、JavaScriptを自分で書かなくても使えるのが特徴です。

2. 開閉の仕組みをイメージで理解しよう

オフキャンバスの開閉は「ボタン」と「箱」をひもでつなぐような仕組みです。ボタンがスイッチ、オフキャンバスが箱だと考えてください。 data-bs-toggleは「これはオフキャンバス用のスイッチですよ」という目印で、 data-bs-targetは「どの箱を開けますか？」という行き先を指定しています。

3. data-bs-toggleの役割をやさしく解説

data-bs-toggleは、Bootstrapに対して「このボタンは特別な動きをします」と伝えるための設定です。オフキャンバスを使う場合は、必ずoffcanvasという値を指定します。これは英語で「画面の外」という意味があり、Bootstrapが自動的に開閉の動きを担当してくれます。


<button class="btn btn-primary" data-bs-toggle="offcanvas">
    メニューを開く
</button>

ブラウザ表示

4. data-bs-targetで表示先を指定する方法

data-bs-targetは、どのオフキャンバスを開くのかを指定するための設定です。これは住所のようなもので、目的のオフキャンバスのidと一致させます。シャープ記号から始まる文字列を書くことで、正しいパネルが表示されます。


<button class="btn btn-success" data-bs-toggle="offcanvas" data-bs-target="#sampleMenu">
    サイドメニュー表示
</button>

<div class="offcanvas offcanvas-start" id="sampleMenu">
    <div class="offcanvas-header">
        <h5>メニュー</h5>
        <button class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <p>ここにメニュー内容を書きます。</p>
    </div>
</div>

ブラウザ表示

5. ボタンを押すだけで開閉できる理由

通常であれば、画面の表示や非表示を切り替えるにはJavaScriptというプログラミング言語が必要です。しかしBootstrapでは、data-bs-toggleとdata-bs-targetを設定するだけで、内部で用意された仕組みが自動的に動作します。そのため、パソコンを触ったことがない人でも、決まりごと通りに書くだけで実装できます。

6. 複数のオフキャンバスを使うときの考え方

オフキャンバスは一つだけでなく、複数作ることも可能です。その場合は、それぞれに違うidを付けて、ボタン側のdata-bs-targetも変えます。引き出しが何段もあるタンスをイメージすると分かりやすく、どの取っ手がどの引き出しにつながっているかを揃えることが大切です。


<button class="btn btn-warning" data-bs-toggle="offcanvas" data-bs-target="#infoPanel">
    お知らせを見る
</button>

<div class="offcanvas offcanvas-end" id="infoPanel">
    <div class="offcanvas-header">
        <h5>お知らせ</h5>
        <button class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <p>最新情報がここに表示されます。</p>
    </div>
</div>

ブラウザ表示