Bootstrapモーダル完全入門！縦中央寄せとスクロールを初心者向けにやさしく解説

縦中央寄せ（.modal-dialog-centered）とスクロール（.modal-dialog-scrollable）

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

生徒

「画面のまんなかにポンって出てくる小さい画面は、どうやって作るんですか？」

先生

「それはBootstrapのモーダルという仕組みを使います。」

生徒

「文字が多いと、はみ出して見えなくなることがあるんですが…」

先生

「その場合は、スクロールできるモーダルを使うと安心です。」

生徒

「画面の縦のまんなかに表示することもできますか？」

先生

「できます。今日はその2つを、最初から順番に説明します。」

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

Bootstrapのモーダルとは、ページの上に重なって表示される小さな画面のことです。例えるなら、机の上で作業しているときに、上から説明書をそっと置かれるようなイメージです。画面全体を切り替えずに、伝えたい内容だけを見せることができます。

ログイン画面、確認メッセージ、注意書きなどでよく使われます。Bootstrapを使うと、難しい設定をしなくても、決められた部品を組み立てるだけでモーダルを表示できます。

2. モーダルの基本構造を理解しよう

モーダルは、入れ子になった箱のような構造をしています。一番外側が背景、その中に枠、その中に内容という形です。名前は難しく見えますが、箱にラベルが付いているだけだと思ってください。


<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-header">
        <h5 class="modal-title">タイトル</h5>
      </div>
      <div class="modal-body">
        <p>ここに内容を書きます。</p>
      </div>
    </div>
  </div>
</div>

ブラウザ表示

3. 縦中央寄せとはどんな表示か

縦中央寄せとは、画面の上下のちょうど真ん中にモーダルを表示することです。何も指定しない場合、モーダルは少し上に寄って表示されます。

スマートフォンや画面が大きいパソコンでは、真ん中にあるほうが見やすい場合があります。そのときに使うのが、縦中央寄せの設定です。

4. modal-dialog-centeredの使い方

縦中央寄せは、modal-dialog-centeredというクラスを追加するだけで実現できます。クラスとは、箱に貼るラベルのようなものです。このラベルを付けると、Bootstrapが自動で配置を調整してくれます。


<div class="modal fade" id="centerModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body">
        画面の縦中央に表示されます。
      </div>
    </div>
  </div>
</div>

ブラウザ表示

5. スクロールできるモーダルが必要な理由

モーダルの中に文章がたくさんあると、画面からはみ出してしまいます。これは、小さな箱に長い紙を無理やり入れようとするような状態です。

そのままだと、下の内容が見えません。そこで、箱の中だけスクロールできる仕組みを使います。これにより、背景は動かさず、内容だけを上下に動かせます。

6. modal-dialog-scrollableの使い方

スクロールできるモーダルも、特別な操作は必要ありません。modal-dialog-scrollableというクラスを追加するだけです。


<div class="modal fade" id="scrollModal">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-body">
        <p>長い文章が入ります。</p>
        <p>長い文章が入ります。</p>
        <p>長い文章が入ります。</p>
        <p>長い文章が入ります。</p>
        <p>長い文章が入ります。</p>
      </div>
    </div>
  </div>
</div>

ブラウザ表示

7. 縦中央寄せとスクロールを同時に使う

縦中央寄せとスクロールは、同時に使うことができます。ラベルを2枚貼るだけだと思ってください。順番は気にせず、両方を書けば問題ありません。


<div class="modal fade" id="bothModal">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-body">
        縦中央でスクロールできます。
      </div>
    </div>
  </div>
</div>

ブラウザ表示

8. 初心者がつまずきやすいポイント

よくある間違いは、modal-dialogではなく、別の場所にクラスを書いてしまうことです。縦中央寄せやスクロールは、必ずmodal-dialogに指定します。

また、内容が少ない場合はスクロールが表示されません。これは故障ではなく、動かす必要がないためです。文章を増やすと、自然にスクロールできるようになります。

まとめ

ここまでBootstrapのモーダルについて、基本の考え方から縦中央寄せ、スクロール対応までを順番に見てきました。モーダルは、画面遷移をせずに大切な情報を伝えたり、確認を促したりするための重要な仕組みです。特にBootstrapを使うことで、複雑なJavaScriptの知識がなくても、決められたHTML構造とクラスを正しく書くだけで、見た目の整ったモーダルを簡単に作れる点が大きな魅力です。

まず基本として理解しておきたいのは、モーダルがいくつかの入れ子構造でできているという点です。外側からmodal、modal-dialog、modal-contentという箱があり、それぞれに役割があります。中でも重要なのがmodal-dialogで、この部分にクラスを追加することで、表示位置や動き方が変わります。縦中央寄せを行うmodal-dialog-centeredや、内容部分だけをスクロール可能にするmodal-dialog-scrollableは、どちらもmodal-dialogに指定することがポイントでした。

縦中央寄せは、画面の上下中央にモーダルを表示するための設定です。パソコンの大きな画面やスマートフォン表示では、中央に配置されているほうが視線を集めやすく、ユーザーにとっても自然な表示になります。modal-dialog-centeredを追加するだけで、Bootstrapが自動的に高さを計算し、中央に配置してくれるため、細かいCSS調整は必要ありません。

一方で、スクロール可能なモーダルは、内容量が多い場合に非常に役立ちます。説明文や利用規約、長めの文章をモーダル内に表示したいとき、何も設定しないと画面からはみ出してしまうことがあります。modal-dialog-scrollableを使えば、背景は固定したまま、モーダルの中身だけを上下にスクロールできるため、見た目も操作性も大きく向上します。

また、縦中央寄せとスクロールは同時に使える点も重要です。modal-dialog-centeredとmodal-dialog-scrollableを両方指定することで、画面の中央に配置されつつ、内容が多い場合でも快適に読めるモーダルになります。クラスを二つ並べて書くだけなので、初心者でも取り入れやすい実装方法と言えるでしょう。

初心者がつまずきやすい点としては、クラスを指定する場所を間違えてしまうことが挙げられます。modal-contentやmodal-bodyに指定しても、縦中央寄せやスクロールは動作しません。必ずmodal-dialogに指定するという基本を覚えておくことで、エラーや混乱を防ぐことができます。また、内容が少ないとスクロールバーが表示されない点も、仕様として理解しておくと安心です。

以下は、縦中央寄せとスクロールを同時に使ったモーダルのサンプル構造です。これまでの記事内容を振り返りながら、クラスの位置やHTMLの流れをもう一度確認してみてください。


<div class="modal fade" id="reviewModal">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">まとめモーダル</h5>
      </div>
      <div class="modal-body">
        <p>Bootstrapのモーダルは構造を理解すると、とても扱いやすい部品です。</p>
        <p>縦中央寄せとスクロールを組み合わせることで、見やすさが向上します。</p>
        <p>クラスの指定場所に注意することが大切です。</p>
        <p>文章が多い場合でも安心して表示できます。</p>
        <p>初心者でも少しずつ慣れていけば、実務でも活用できます。</p>
      </div>
    </div>
  </div>
</div>

ブラウザ表示

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

生徒

「Bootstrapのモーダルって、最初は難しそうだと思っていましたけど、箱の構造だと考えると分かりやすいですね」

先生

「そうですね。modal、modal-dialog、modal-contentの役割を理解するだけで、かなり見通しが良くなります」

生徒

「縦中央寄せも、クラスを一つ足すだけでできるのが便利だと思いました」

先生

「modal-dialog-centeredは特によく使います。画面サイズが変わっても、自然な位置に表示されるのが良い点です」

生徒

「文章が長いときは、スクロールできるモーダルを使えばいいんですね」