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におけるモーダルとオフキャンバスの基本から実践的な使い方、そして初心者がつまずきやすいポイントまで詳しく学んできました。 モーダルとオフキャンバスは、どちらも画面の表示を切り替えるための重要なUIコンポーネントであり、 WebサイトやWebアプリケーションの操作性や分かりやすさを大きく左右します。 特にBootstrap 5では、JavaScriptをほとんど書かずに、HTMLの属性とクラス指定だけで動作させられる点が大きな魅力です。

モーダルは、ユーザーに強く注目してほしい情報を伝える場面で活躍します。 確認ダイアログ、警告メッセージ、入力フォームなど、操作を一時的に止めて内容を確認してもらいたい場合に最適です。 画面中央に表示され、背景が暗くなることで自然と視線が集まり、 ユーザーが内容を見逃しにくい設計になっています。

一方でオフキャンバスは、画面の端からスライドして表示されるため、 メニューや設定パネル、補助的な情報の表示に向いています。 特にスマートフォン表示では、限られた画面スペースを有効に使えるため、 ナビゲーションメニューとして非常に重宝されます。 モーダルほど強制力はありませんが、必要なときにさっと表示できる点が特徴です。

よくある失敗を防ぐための重要ポイント

モーダルやオフキャンバスが動かない場合、その原因の多くは基本的な設定ミスにあります。 BootstrapのJavaScriptが正しく読み込まれていない、 data属性の指定が抜けている、 ボタンと本体のIDが一致していないなど、 初歩的なミスが積み重なって動作しないケースが非常に多いです。

特にBootstrap 5では、data-toggleではなくdata-bs-toggleを使う点や、 data-targetではなくdata-bs-targetを使う点など、 旧バージョンとの違いにも注意が必要です。 エラーが出ない場合でも動かないことがあるため、 一つひとつ落ち着いて確認する習慣を身につけることが大切です。

まとめとしてのサンプルプログラム

最後に、モーダルとオフキャンバスの基本構造を簡単に確認できるサンプルを紹介します。 実際のWeb制作でもそのまま応用しやすい構成になっています。

<!-- モーダルを開くボタン -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sampleModal">
    確認モーダルを表示
</button>

<div class="modal fade" id="sampleModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">確認</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        この操作を実行してもよろしいですか。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
        <button type="button" class="btn btn-danger">実行</button>
      </div>
    </div>
  </div>
</div>

このように、Bootstrap 5のモーダルやオフキャンバスは、 正しいクラスと属性を理解して使えば、初心者でも十分に実用的なUIを構築できます。 見た目だけでなく、ユーザーの操作の流れを意識して使い分けることが、 使いやすいWebサイト作りへの第一歩です。

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

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

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

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

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

オフキャンバスとは何ですか？モーダルとの違いは何ですか？

オフキャンバスは、画面の横からスライドして現れるパネルで、スマホのメニューによく使われます。モーダルは中央に表示されるポップアップ、オフキャンバスは横から出るメニューという違いがあります。

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

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

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

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

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

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

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

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