改3.Bootstrapのブレークポイントを理解して実装する

ユーザーは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の余白があらかじめ指定されています。

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

◆3.やってみましょう

◆2で作成したgrid.htmlの、2カラム部分

の余白を無くしてピッタリとくっつけてみましょう。

<div class="col-md-6 col-lg-3 px-0">
    <img src="images/test.jpg" class="img-fluid">
</div>
<div class="col-md-6 col-lg-3 px-0">
    <!-- h1などをテキスト部分が入る  -->
</div>

両方に「 px-0」クラスを追加します。