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

生徒

「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. オフキャンバスの基本的な使い方

オフキャンバス（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. モーダル・オフキャンバスが動かないときのよくある失敗と直し方

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. モーダルとオフキャンバスの違いと使い分け

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

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

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

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

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. スマホ対応とレスポンシブの注意点

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

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

.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サイト作りへの第一歩です。

先生と生徒の振り返り会話

生徒

「モーダルとオフキャンバスの違いがはっきり分かりました。どちらも似ていると思っていましたが、使う場面が全然違うんですね。」

先生

「その理解はとても大切です。目的に合ったUIを選ぶことで、ユーザーにとって分かりやすい画面になります。」

生徒

「動かない原因も、ほとんどが基本設定のミスだと分かったので、これからは落ち着いて確認できそうです。」

先生

「それが一番大事ですね。今回学んだモーダルとオフキャンバスの基本を押さえておけば、実際のWeb制作でも自信を持って使えるようになります。ぜひいろいろな場面で試してみてください。」