Bootstrapオフキャンバス入門：.offcanvasと.offcanvas-start・end・top・bottomの基本をやさしく解説

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

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

Bootstrapのオフキャンバスとは、Webページの画面外に隠れていて、操作すると表示されるUI部品です。スマートフォンの三本線メニューを思い浮かべると分かりやすいでしょう。Bootstrap5ではoffcanvasという専用クラスが用意されており、JavaScriptの知識がなくても簡単に実装できます。初心者にとっては「ボタンを押すと横から出てくる箱」と考えると理解しやすいです。

2. .offcanvasクラスの基本的な役割

2. .offcanvasクラスの基本的な役割

.offcanvasは、オフキャンバスを作るための土台となるクラスです。このクラスを指定した要素は、通常は画面に表示されず、必要なときだけ現れます。難しい言葉で言うと「非表示状態から表示状態へ切り替わる要素」ですが、初心者の方は「隠し引き出し」と思ってください。

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

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

3. .offcanvas-start：左から出てくるオフキャンバス

3. .offcanvas-start：左から出てくるオフキャンバス

.offcanvas-startは、画面の左側からスライドして表示されるオフキャンバスです。日本語サイトでは特に使われることが多く、ナビゲーションメニューに最適です。startは「開始」という意味ですが、Bootstrapでは「左側」を表します。パソコン初心者の方は「左の引き出し」と覚えるとよいでしょう。

<div class="offcanvas offcanvas-start" id="leftMenu">
    <div class="offcanvas-header">
        <h5>左メニュー</h5>
        <button class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <ul>
            <li>ホーム</li>
            <li>サービス</li>
            <li>お問い合わせ</li>
        </ul>
    </div>
</div>

4. .offcanvas-end：右から出てくるオフキャンバス

4. .offcanvas-end：右から出てくるオフキャンバス

.offcanvas-endは、画面の右側から表示されるオフキャンバスです。endは「終わり」を意味し、Bootstrapでは右側を指します。設定画面や補足情報など、メイン内容を邪魔したくない場合に便利です。左利き右利きは関係なく、用途で選ぶとよいです。

<div class="offcanvas offcanvas-end" id="rightPanel">
    <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. .offcanvas-top：上から表示されるオフキャンバス

5. .offcanvas-top：上から表示されるオフキャンバス

.offcanvas-topは、画面の上から下に向かって表示されるオフキャンバスです。通知やお知らせ、簡単な案内表示に向いています。上から垂れてくるイメージなので、カーテンのようだと考えると分かりやすいです。

<div class="offcanvas offcanvas-top" id="topNotice">
    <div class="offcanvas-header">
        <h5>お知らせ</h5>
        <button class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <p>重要なお知らせ内容です。</p>
    </div>
</div>

6. .offcanvas-bottom：下から出てくるオフキャンバス

6. .offcanvas-bottom：下から出てくるオフキャンバス

.offcanvas-bottomは、画面の下から上に表示されるオフキャンバスです。スマートフォンでよく見る操作メニューに近く、アクション選択などに使われます。机の引き出しを下から引くような感覚で覚えるとよいでしょう。

<div class="offcanvas offcanvas-bottom" id="bottomMenu">
    <div class="offcanvas-header">
        <h5>操作メニュー</h5>
        <button class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
        <button class="btn btn-success">保存</button>
        <button class="btn btn-danger">削除</button>
    </div>
</div>

7. オフキャンバスでよく使う部品の意味

7. オフキャンバスでよく使う部品の意味

オフキャンバスの中には、offcanvas-headerとoffcanvas-bodyがあります。headerはタイトルや閉じるボタンを置く場所、bodyは中身を書く場所です。難しい構造ではなく「上に見出し、下に内容」と考えれば十分です。Bootstrapでは見た目も整えてくれるので、初心者でも安心して使えます。

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

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

オフキャンバスが表示されない原因として多いのは、ボタンとオフキャンバスのidが一致していないことです。また、BootstrapのJavaScriptが正しく読み込まれていないと動きません。動かないときは「ボタンの指定」「idの名前」「クラス名」を一つずつ確認しましょう。焦らず確認することが大切です。