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

吉田先生

ユーザーは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-3 ">

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

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

こうした問題はブレークポイントを複数増やすことで解決できます。
以下は2つのブレークポイントを実装した例です。

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

大きなPCで見た場合にはカラムを「3」にすることで、画像を4つ並べることができます（12カラムの中に4つ入りますよね）。

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

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

ブレークポイントを２つに増やしたことで、どの画面サイズでも、無理なく画像が見られるようになっていると思います。

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

カラム間の余白を無くす

カラムには、左右に余白（padding）があらかじめ指定されています。
デフォルトだと、左右それぞれ12pxずつpaddingがつきます。

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

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

デフォルトのpaddingについて

検証ツールでBootstrap5のカラムについているpaddingを調べると、値は●●pxのような簡単な指定ではなく計算式になっていると思います。

この式の結果、最終的に「col-*クラスに付けられているpaddingが何pxか」を知るにはComputedパネルを使うと便利です。

【実習】余白を消してみましょう

前回、練習用に作成したgrid.htmlの2カラム部分。

カラムの余白を無くして、下図のようにくっつけてみましょう。

方法

col-md-6クラスを指定しているdivの両方に「 px-0」クラスを追加します。

<div class="container">
  <div class="row">
    <div class="col-md-6 px-0">
      <img src="images/test.jpg" class="img-fluid">
    </div>
    <div class="col-md-6 px-0">
      <h1>sampletext</h1>
      <p>samplet extsampletextsam pletextsampletextsamplete xtsampl etextsa mpletextsamplet exts amplet extsamp lete xtsam p letext sampl ete xtsamp letextsample text sam plet extsampl etext sampletexts amplete xtsample textsa mplet extsam ple text
      </p>
    </div>
  </div>
</div>

Gutters (ガター)を使ってもOK

Bootstrap5では、Gutters (ガター)を設定することでも、カラム間の余白を設定できます。
上のpx-0クラスと仕組みはほぼ同じ。
横のガターをゼロにしたい場合は「gx-0」クラスを使用することもできます。

<div class="container">
  <div class="row gx-0">
    <div class="col-md-6">
      <img src="images/test.jpg" class="img-fluid">
    </div>
    <div class="col-md-6">
      ....
    </div>
  </div>
</div>

ガターは各カラム部分に加えても、rowクラスの後につけることもできます。