Bootstrap 5のモーダルとオフキャンバスを完全ガイド！初心者がつまずくポイントも解説

1. Bootstrapのモーダルとは？使い方の基本

1. Bootstrapのモーダルとは？使い方の基本

Bootstrap（ブートストラップ）5のモーダルは、画面の上に表示される「ポップアップウィンドウ」のようなものです。例えば、「確認メッセージを出す」「注意をうながす」「登録フォームを表示する」など、画面全体を覆ってユーザーの注目を集めたいときに使います。

以下は、ボタンを押すとモーダルが表示される基本のコードです。

<!-- モーダルを開くボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを開く
</button>

<!-- モーダル本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
      </div>
      <div class="modal-body">
        ここにモーダルの内容が表示されます。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

2. オフキャンバスの基本的な使い方

2. オフキャンバスの基本的な使い方

オフキャンバス（Offcanvas）は、スマホサイトでよく見る「スライドして現れるメニュー」です。右や左からぬるっと出てくるパネルで、メニューやお知らせ欄として活用できます。

<!-- オフキャンバスを開くボタン -->
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
 aria-controls="offcanvasExample">
  メニューを開く
</button>

<!-- オフキャンバス本体 -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample"
 aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">メニュー</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    ここにメニュー内容を入れます。
  </div>
</div>

3. モーダル・オフキャンバスが動かないときのよくある失敗と直し方

3. モーダル・オフキャンバスが動かないときのよくある失敗と直し方

Bootstrap 5でモーダルやオフキャンバスがうまく動かないとき、多くは「JavaScriptが読み込まれていない」「属性のつけ忘れ」「IDの指定ミス」が原因です。

たとえば、以下のようにJavaScript（JS）を読み込まないと、動作しません。

<!-- BootstrapのJSをCDNで読み込み（必須） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

また、以下のような失敗にも注意しましょう：

• ボタンのdata-bs-toggleやdata-bs-targetがない
• モーダルやオフキャンバスのIDが一致していない
• BootstrapのCSSが読み込まれていない

この3点は特に初心者がつまずきやすいポイントなので、何度もチェックしてみてください。

4. モーダルとオフキャンバスの違いと使い分け

4. モーダルとオフキャンバスの違いと使い分け

モーダルは「画面の真ん中にポップアップ」、オフキャンバスは「画面の端からスライド」というイメージを持ってください。

用途の違いとしては以下の通りです：

• モーダル：確認メッセージ・警告・入力フォームに最適
• オフキャンバス：メニュー・設定パネル・ナビゲーション向き

このように、どちらも「表示の切り替え」には便利ですが、ユーザー体験（UX）に合わせて使い分けましょう。

5. モーダルやオフキャンバスでよく使うボタン属性

5. モーダルやオフキャンバスでよく使うボタン属性

Bootstrap 5では、data-bs-*という属性を使って、JavaScriptを書かずに簡単に操作ができます。

たとえば：

• data-bs-toggle="modal"：モーダルを開く
• data-bs-target="#exampleModal"：どのモーダルを開くか指定
• data-bs-dismiss="modal"：モーダルを閉じる
• data-bs-toggle="offcanvas"：オフキャンバスを開く
• data-bs-dismiss="offcanvas"：オフキャンバスを閉じる

これらはJavaScriptを使わずに操作できるので、初心者にも扱いやすいです。

6. スマホ対応とレスポンシブの注意点

6. スマホ対応とレスポンシブの注意点

モーダルやオフキャンバスは、スマホ・タブレットでも使えるようにレスポンシブ設計（画面サイズに合わせて変化する作り）になっています。ただし、横幅が足りないとモーダルが画面からはみ出ることもあるので、画面幅に応じたサイズ調整も必要です。

モーダルのサイズは以下のクラスで変更できます：

• .modal-sm：小さいサイズ
• .modal-lg：大きめサイズ
• .modal-xl：もっと大きいサイズ

使いやすいサイズに調整して、スマホでも見やすくなるようにしましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Bootstrap 5のモーダルとは何ですか？どんな場面で使われるのですか？

Bootstrap 5のモーダルとは、画面中央に重なるポップアップウィンドウのことで、注意喚起、確認メッセージ、入力フォームの表示など、ユーザーの注目を集めたい場面でよく使われます。

モーダルのIDとdata-bs-targetが一致していないとどうなりますか？

IDが一致していない場合、クリックしてもモーダルが開かないというトラブルが起きます。IDとターゲットの一致は必須なので、初心者がよく見落とすポイントです。

BootstrapのJavaScriptが読み込まれているかどうか確認する方法はありますか？

ブラウザの開発者ツールのコンソールにエラーが出ていないか確認したり、モーダルやオフキャンバスの動作をテストして反応があるかを見ることで確認できます。

スマホでモーダルやオフキャンバスを使うときの注意点はありますか？

スマホでは画面幅が狭いため、モーダルの内容が大きすぎると見切れる場合があります。レスポンシブ設計を意識し、サイズクラスを調整することが重要です。

モーダルとオフキャンバスは同じページで併用しても大丈夫ですか？

はい、併用しても問題ありません。メイン機能をモーダルで、メニュー操作をオフキャンバスでというように役割を分けることで、とても使いやすいページになります。