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

生徒

「Bootstrap3から5に移行するときに、レスポンシブデザインで画面の切り替わる幅が変わったと聞いたんですが、どういう意味ですか？」

先生

「それは『ブレークポイント』の違いを指しています。ブレークポイントとは、画面幅によってレイアウトが切り替わる境目のことです。」

生徒

「なるほど。でも画面幅って具体的にどのくらいで変わるんですか？」

先生

「Bootstrap5では、より現代のデバイスに合わせて数値が調整され、新しいブレークポイントも追加されています。これが移行時に注意すべきポイントなんです。」

1. ブレークポイントとは何か？

まず初心者の方向けにブレークポイントの意味を説明します。ブレークポイントとは、スマホ・タブレット・PCなど、画面の幅に応じてデザインを切り替える基準点のことです。

例えば「画面幅が768px以下なら縦並びにする」「1200px以上なら横並びにする」といったルールを設定しておくと、デバイスごとに見やすいデザインを自動で切り替えてくれます。これがレスポンシブデザインの基本です。

2. Bootstrap3・4とBootstrap5のブレークポイントの違い

Bootstrap3の時代は「xs, sm, md, lg」の4段階でしたが、Bootstrap4で「xl」が追加され、Bootstrap5ではさらに「xxl」が加わりました。これにより最新の大型ディスプレイにも対応できるようになっています。

代表的なブレークポイントを比較すると次のようになります。

Bootstrap3：xs（〜767px）、sm（768px〜）、md（992px〜）、lg（1200px〜）
Bootstrap4：sm（576px〜）、md（768px〜）、lg（992px〜）、xl（1200px〜）
Bootstrap5：sm（576px〜）、md（768px〜）、lg（992px〜）、xl（1200px〜）、xxl（1400px〜）

つまり、移行時には「画面幅の区切り方」が変わるため、以前は問題なかったレイアウトが崩れる可能性があります。

3. 移行時に注意すべき影響範囲

ブレークポイントが変わると、以下のような部分に影響が出ます。

グリッドレイアウトの列数や折り返しタイミング
ナビゲーションバーの開閉タイミング
画像やボタンのサイズ指定
カスタムCSSで「min-width」「max-width」を指定している箇所

特に「ナビゲーションバー」はスマホとPCで表示が大きく異なるため、移行後に必ず確認しておく必要があります。

4. 実際のサンプルでブレークポイントを確認

以下の例では、Bootstrap5のグリッドシステムを使って3つのカラムを配置しています。画面幅が小さくなると、自動的に縦並びに変わります。


<div class="container">
  <div class="row">
    <div class="col-sm-4 bg-light border">カラム1</div>
    <div class="col-sm-4 bg-light border">カラム2</div>
    <div class="col-sm-4 bg-light border">カラム3</div>
  </div>
</div>

ブラウザ表示

5. テスト観点として確認すべきポイント

移行時のテストでは、次の観点をチェックすることが大切です。

スマホ（〜576px）、タブレット（768px〜）、ノートPC（992px〜）、大型ディスプレイ（1400px〜）での見え方を確認する。
ナビゲーションバーが正しく折りたたまれるかを操作して確かめる。
画像やカードコンポーネントが崩れず、余白が適切に保たれているか確認する。
フォームやボタンが狭い画面で横スクロールを発生させていないかチェックする。

特にスマホ向けの表示は利用者が最も多いため、細かくチェックすることをおすすめします。

6. 移行をスムーズに進めるためのヒント

最後に、実務でBootstrap5へ移行するときのヒントを紹介します。

既存の「col-xs-」クラスはBootstrap5では廃止されているので注意する。
「xxl」ブレークポイントを利用して、大画面での最適化を行う。
ブラウザの開発者ツールを使って画面幅を自由に変えながらテストする。
可能であれば実際のスマホやタブレットで操作して最終確認する。

こうした観点を意識することで、移行作業のトラブルを大幅に減らすことができます。

Bootstrapのレスポンシブブレークポイント差分を徹底解説！影響範囲とテスト観点を初心者向けに紹介