Bootstrapのモーダルとオフキャンバスの高さ調整・スクロール制御ガイド

モーダル/オフキャンバスの高さ調整とスクロール制御の勘所

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

生徒

「Bootstrapで作ったモーダルやオフキャンバスの高さが画面に合わなくて困っています。どうしたら調整できますか？」

先生

「モーダルやオフキャンバスの高さを調整したい場合は、BootstrapのユーティリティクラスやCSSを使う方法があります。また、スクロールの制御も重要です。」

生徒

「スクロールの制御とは具体的に何ですか？」

先生

「画面全体がスクロールしてしまうのを防ぎ、モーダル内部だけスクロール可能にする方法です。こうすることでユーザーは操作しやすくなります。」

1. モーダルの高さ調整の基本

Bootstrapのモーダルはデフォルトでは中央に固定されますが、コンテンツが多い場合、画面をはみ出してしまうことがあります。高さを調整するにはユーティリティクラスのmax-heightやoverflow-autoを使います。overflow-autoは、内容が多い場合にスクロールバーを自動で表示するための設定です。


<div class="modal-dialog" style="max-height: 80vh;">
    <div class="modal-content overflow-auto">
        <div class="modal-header">
            <h5 class="modal-title">サンプルモーダル</h5>
        </div>
        <div class="modal-body">
            モーダルの内容が長い場合、自動でスクロールされます。
        </div>
    </div>
</div>

ブラウザ表示

2. オフキャンバスの高さ制御

オフキャンバスもモーダル同様に高さ調整が必要です。画面に合わせるには、vh（ビューポート高さ）を使うのが簡単です。100vhは画面の高さと同じ意味になります。


<div class="offcanvas offcanvas-start" style="height: 90vh;">
    <div class="offcanvas-header">
        <h5>オフキャンバス例</h5>
    </div>
    <div class="offcanvas-body overflow-auto">
        コンテンツが多くてもスクロール可能です。
    </div>
</div>

ブラウザ表示

3. スクロール制御のポイント

モーダルやオフキャンバスの内部だけスクロールさせることで、ユーザーが操作しやすくなります。overflow-autoを内部に指定するだけで、自動的にスクロールバーが表示されます。


<div class="modal-body overflow-auto" style="max-height: 70vh;">
    長い内容があっても、この部分だけスクロールできます。
</div>

ブラウザ表示

4. モーダル全体を画面に合わせる方法

画面全体にモーダルを広げたい場合、modal-fullscreenクラスを使うと便利です。これにより、スマートフォンでもパソコンでも画面に収まるモーダルを簡単に作れます。


<div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
        <div class="modal-header">
            <h5>全画面モーダル</h5>
        </div>
        <div class="modal-body overflow-auto">
            コンテンツが長くてもスクロールできます。
        </div>
    </div>
</div>

ブラウザ表示

5. ユーティリティクラスで簡単に調整する

Bootstrapでは高さや幅を簡単に調整できるユーティリティクラスがあります。h-100やw-75などを使うことで、CSSを書かなくても直感的にサイズを設定できます。


<div class="modal-dialog h-75">
    <div class="modal-content overflow-auto">
        <div class="modal-body">
            高さ75%のモーダルです。
        </div>
    </div>
</div>

ブラウザ表示

6. 実用例：スクロール可能なオフキャンバスメニュー

ナビゲーションメニューや長いリストをオフキャンバスに入れる場合、スクロール制御は必須です。ユーザーは快適にスクロールして操作できます。


<div class="offcanvas offcanvas-end" style="height: 80vh;">
    <div class="offcanvas-header">
        <h5>メニュー</h5>
    </div>
    <div class="offcanvas-body overflow-auto">
        <ul>
            <li>メニュー1</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
            <li>メニュー5</li>
            <li>メニュー6</li>
            <li>メニュー7</li>
        </ul>
    </div>
</div>

ブラウザ表示

7. モーダルとオフキャンバスの組み合わせ例

場合によっては、モーダル内にオフキャンバスを組み込むこともあります。この場合も高さとスクロールを個別に設定することが重要です。


<div class="modal-dialog" style="max-height: 80vh;">
    <div class="modal-content overflow-auto">
        <div class="modal-body">
            <div class="offcanvas offcanvas-start" style="height: 60vh;">
                <div class="offcanvas-header">
                    <h5>内蔵オフキャンバス</h5>
                </div>
                <div class="offcanvas-body overflow-auto">
                    オフキャンバス内もスクロール可能です。
                </div>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

8. 高さ調整とスクロール制御のまとめポイント

モーダルやオフキャンバスの高さ調整では、vh単位やユーティリティクラスを活用すること、内部スクロールはoverflow-autoで制御することが基本です。これにより、画面サイズやデバイスに関わらず快適な操作性を実現できます。

まとめ

本記事では、Bootstrapのモーダルとオフキャンバスにおける高さ調整とスクロール制御の方法について詳しく解説しました。モーダルやオフキャンバスは、デフォルト設定ではコンテンツ量が多い場合に画面をはみ出してしまうことがありますが、max-heightやoverflow-auto、vh単位などを組み合わせることで、画面サイズに応じた快適な表示を実現できます。また、modal-fullscreenクラスを活用すれば、全画面表示のモーダルを簡単に作成可能で、スマートフォンやタブレット、デスクトップ環境でも適切に表示されます。ユーティリティクラスを使った調整はCSSの知識が浅い方でも直感的に扱え、開発効率を大幅に向上させることができます。

オフキャンバスの場合も、モーダルと同様にスクロール制御が非常に重要です。overflow-autoを内部に設定することで、ナビゲーションメニューや長いリストも快適にスクロール可能になり、ユーザー体験を損なわずに操作性を向上させることができます。また、モーダル内にオフキャンバスを組み込む場合でも、個別に高さとスクロールを調整することで、複雑なUIでも安定した動作が保証されます。

まとめとして、以下のポイントが重要です。まず、高さ調整はvh単位やユーティリティクラスを活用すること、次に、スクロール制御はoverflow-autoでモーダルやオフキャンバス内部のみをスクロール可能にすることです。そして、全画面表示やコンテンツ量の多い場合には、modal-fullscreenやオフキャンバスの高さ設定を組み合わせることで、どのデバイスでも快適に操作できるUIを構築できます。これらの手法を駆使することで、Bootstrapを使ったWeb開発において、ユーザーにとってストレスのないモーダルやオフキャンバスを提供できるようになります。

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

生徒

「先生、モーダルの高さやスクロールって、結局何を気をつければいいんですか？」

先生

「基本は三つです。まず、画面全体に対する高さを考えて、vh単位やユーティリティクラスで調整すること。次に、内部コンテンツだけスクロールさせたい場合は、overflow-autoを使うこと。そして必要に応じて、modal-fullscreenやオフキャンバスの高さを組み合わせて、どのデバイスでも見やすくすることです。」

生徒

「なるほど、内部だけスクロールさせると操作が快適になるんですね。」

先生

「その通りです。特にスマートフォンやタブレットでは画面サイズが限られているので、内部スクロールを制御することが重要です。また、ユーティリティクラスを使えばCSSの専門知識がなくても直感的にサイズ調整ができます。」

生徒

「オフキャンバスの長いリストも同じ考え方で大丈夫ですか？」

先生

「はい。オフキャンバスも内部スクロールを制御すれば、長いメニューやコンテンツでも快適に操作できます。さらに、モーダル内にオフキャンバスを組み込む場合でも、高さとスクロールを個別に設定すれば、複雑なUIでも安定して動作します。」

生徒

「わかりました。まとめると、高さ調整、内部スクロール、ユーティリティクラスの活用の三点が大事ですね。」

先生

「そうです。この三つを意識すれば、どんなデバイスでも使いやすいモーダルやオフキャンバスを作ることができます。これをマスターすれば、BootstrapでのUI設計が一段と効率的になりますよ。」

サンプルコード振り返り

記事内で紹介したモーダルとオフキャンバスの調整例を再度確認しておきましょう。内部スクロールを活用したモーダルの例です。


<div class="modal-dialog" style="max-height: 80vh;"> <div class="modal-content overflow-auto"> <div class="modal-header"> <h5>サンプルモーダル</h5> </div> <div class="modal-body"> コンテンツが多い場合でも内部スクロールで快適に操作できます。 </div> </div> </div>

ブラウザ表示

オフキャンバスで長いメニューをスクロール可能にする例です。


<div class="offcanvas offcanvas-end" style="height: 80vh;"> <div class="offcanvas-header"> <h5>スクロール可能メニュー</h5> </div> <div class="offcanvas-body overflow-auto"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> <li>メニュー5</li> <li>メニュー6</li> </ul> </div> </div>

ブラウザ表示

2026年最新スキルアップ・実践セミナー