Bootstrapモーダルのサイズバリエーション完全解説！modal-sm・modal-lg・modal-xl・modal-fullscreenを初心者向けにやさしく説明

サイズバリエーション：.modal-sm/.modal-lg/.modal-xl と .modal-fullscreen

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

生徒

「Bootstrapのモーダルって、大きさを変えられるんですか？」

先生

「変えられますよ。小さいモーダルから画面いっぱいのモーダルまで用意されています。」

生徒

「どんな種類があるんですか？パソコン初心者でも使えますか？」

先生

「もちろんです。サイズごとに役割が決まっているので、一つずつ見ていきましょう。」

1. Bootstrapのモーダルとサイズバリエーションとは？

Bootstrapのモーダルとは、画面の上に重なって表示される小さなウィンドウのことです。ログイン画面や確認メッセージなどでよく使われます。

サイズバリエーションとは、そのモーダルの大きさを用途に合わせて変えられる仕組みです。Bootstrap5では、modal-sm、modal-lg、modal-xl、modal-fullscreenといったクラスが用意されています。

これは、ノートに付箋を貼る感覚に似ています。小さなメモなら小さい付箋、大事な説明なら大きな紙を使う、という考え方です。

2. 小さく表示したいときの.modal-sm

modal-smは、小さめのモーダルを表示したいときに使います。確認メッセージや「本当に削除しますか？」のような短い文章に向いています。

画面を大きく邪魔しないので、初心者の方でも「ちょっとしたお知らせ」として安心して使えます。


<div class="modal fade" id="sampleSm">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">確認</h5>
            </div>
            <div class="modal-body">
                削除してもよろしいですか？
            </div>
        </div>
    </div>
</div>

ブラウザ表示

3. 標準より大きく見せたい.modal-lg

modal-lgは、通常サイズよりも少し大きなモーダルです。文章量が多い説明や、簡単なフォーム入力に向いています。

教室でいうと、黒板を少し広く使うイメージです。見やすさを優先したいときに便利です。


<div class="modal fade" id="sampleLg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                ここに少し長めの説明文を表示します。
            </div>
        </div>
    </div>
</div>

ブラウザ表示

4. さらに広く使える.modal-xl

modal-xlは、画面の横幅をかなり使う大きなモーダルです。表や画像、たくさんの情報を一度に見せたいときに使います。

初心者の方は「画面が大きく使えるモーダル」と覚えるだけで十分です。


<div class="modal fade" id="sampleXl">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-body">
                横に広いコンテンツを表示できます。
            </div>
        </div>
    </div>
</div>

ブラウザ表示

5. 画面いっぱいに表示する.modal-fullscreen

modal-fullscreenは、画面全体を使って表示するモーダルです。スマートフォンやタブレットで特に見やすくなります。

これは「別ページに移動したような感覚」で使えるモーダルです。


<div class="modal fade" id="sampleFull">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-body">
                画面いっぱいに表示されます。
            </div>
        </div>
    </div>
</div>

ブラウザ表示