Bootstrapのブレークポイントを理解して実装する【図解たっぷりBootstrap入門】

現行最新版（Bootstrap 5）講座をリリースしました

→Bootstrap 5講座のご受講はこちら

吉田先生

ユーザーはWebサイトを閲覧する時、大きなPCで見ていたり、iPadなどのタブレットだったり、スマートフォンだったりと様々です。そんな時に役立つのがこのブレークポイントを使用したレイアウトになります。どんなユーザー環境で閲覧されても適切なレイアウトを実現します。

• グリッドシステムのカスタマイズ
• 複数のブレークポイントを指定する
• カラム間の余白を無くす

グリッドシステムのカスタマイズ

前のレッスンでグリッドシステムの基礎について学びました。この項目では、もう少し深く掘り下げてグリッドシステムについて学んでいきたいと思います。

まず、前のレッスンではブレークポイントを指定して、画面のサイズによってレイアウトを変える方法をご紹介しました。これで「大きなPCで見てたらこの画面」「小さなスマホで見ていたらこの画面」と切り分けるレスポンシブ対応まではOKです。

しかし、レイアウトによっては、ブレークポイントを２つ指定したり、カラム間の余白を無くしたり、カスタマイズしたいということがあるかもしれません（後で詳しく解説します）。様々なレイアウトに柔軟に対応するためには、これから紹介するCSSクラスを知っておく必要があります。

複数のブレークポイントを指定する

「div class="col-md-6 col-lg-3"」というように、複数のブレークポイント・カラム数の指定を行う事が出来ます。これは３段階でカラム数を切り替られるのです。

<div class="col-md-6 col-lg-3">

この方法がどのような時に使われるのか、カラム内のコンテンツが画像である時の例で詳しく見てみましょう。

以下イメージは、ブレークポイント・カラム数の指定が１つのみの場合の画面幅別の表示です。

# ブレークポイントがひとつだけのコード
<div class="col-md-6 ">

これは、真ん中の小さめのPCはちょっと画面が小さすぎて見えづらくないでしょうか？

ブレークポイントを複数にする

こういう問題はブレークポイントを複数増やすことで解決できます。以下は2つのブレークポイントを実装した例です。大きなPCで見た場合にはカラムを3つにすることで、画像を4つ並べることができます（12カラムの中に4つ入りますよね）。

中くらいのPCもしくはタブレットで見た場合にはカラムを6つにすることで、画像を2つ並べることができます（12カラムの中に2つ入りますよね）。

それ以外、つまり小さなスマートフォンなどではカラムを12にすることで、画像を1つだけ表示することができます（12カラムの中に1つだけ入りますよね）。

# ブレークポイントが2つのコード
<div class="col-md-6 col-lg-3">

上のようにブレークポイントを２つ指定した場合、どの画面サイズでも、画像が見やすくなっていると思います。

どの画面サイズで見たとしても、美しいデザインを保ちたい！という時などにはブレークポイントを複数設定することは、非常に有効だということがおわかりになったかと思います。

カラム間の余白を無くす

カラムには、左右にpadding15pxの余白があらかじめ指定されています。この余白を無くしたいという場合があるかもしれません。その場合、「px-0」というCSSクラスを使用すれば、余白を無くすことが出来ます。これは、左右(x)のpadding(p)を０にするという意味です。

<div class="col-md-6 col-lg-3 px-0">