Bootstrapモーダル入門：.modal /.modal-dialog /.modal-content の構造と役割をやさしく解説

モーダル入門：.modal/.modal-dialog/.modal-content の構造と役割

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

生徒

「Bootstrapのモーダルって、画面の真ん中に出てくる箱のことですよね？」

先生

「そうです。クリックしたときに、今の画面の上に重なって表示される小さな画面です。」

生徒

「.modal とか .modal-dialog とか、名前がたくさんあって混乱します…」

先生

「箱を家にたとえると、とても分かりやすくなりますよ。順番に見ていきましょう。」

1. Bootstrapのモーダルとは何か

Bootstrapのモーダルとは、画面全体の上に重なって表示される小さなウィンドウのことです。お知らせを表示したり、確認画面を出したりするときによく使われます。普通の画面遷移と違い、元のページを開いたまま情報を見せられるのが特徴です。

プログラミング未経験の方は、スマートフォンで表示される「確認ダイアログ」を思い浮かべてください。画面が暗くなり、その上にメッセージの箱が出てきます。それがモーダルのイメージです。

2. モーダル全体を包む.modalの役割

.modal は、モーダル全体を包む一番外側の箱です。家でたとえるなら「土地」や「敷地」のような存在で、画面全体を覆う役割があります。背景が暗くなるのも、この.modalが担当しています。

この要素があることで、ユーザーは「今はこのモーダルを見てください」と自然に意識できます。クリック操作もモーダルに集中させる重要な役割を持っています。

3. 表示位置を決める.modal-dialogの役割

.modal-dialog は、モーダルを画面のどこに表示するかを決める部分です。家で言うと「建物の骨組み」にあたります。中央に表示したり、少し大きくしたりする調整を担当します。

初心者の方は「位置を決める係」と覚えると分かりやすいです。見た目の大きさや配置を整える、大切な中間パーツです。

4. 実際の中身を入れる.modal-contentの役割

.modal-content は、実際に表示したい文字やボタンを入れる箱です。家でたとえると「部屋の中身」にあたります。タイトル、本文、ボタンなどは、すべてこの中に書きます。

この部分を編集することで、確認画面や入力フォームなど、さまざまなモーダルを作れます。初心者の方は「見せたい内容を書く場所」と覚えてください。

5. 最小構成で理解するモーダルのHTML構造


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

<div class="modal fade" id="sampleModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                はじめてのBootstrapモーダルです
            </div>
        </div>
    </div>
</div>

ブラウザ表示

外側から順番に .modal → .modal-dialog → .modal-content となっているのが分かります。この並び順がとても重要で、順番が違うと正しく表示されません。

6. 見出しとボタンを入れた基本パターン


<div class="modal fade" id="infoModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">お知らせ</h5>
            </div>
            <div class="modal-body">
                この内容を確認してください
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

見出し、本文、ボタンを分けることで、読みやすいモーダルになります。これもすべて.modal-contentの中で構成されています。

7. サイズを変えてみるモーダルの例


<div class="modal fade" id="largeModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                少し大きめのモーダル表示です
            </div>
        </div>
    </div>
</div>

ブラウザ表示

.modal-dialog にクラスを追加するだけで、大きさを変えられます。難しい計算は不要で、初心者でも安心して使えます。