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

吉田先生

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


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

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

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

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

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

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

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

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

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

# ブレークポイントがひとつだけのコード
<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">

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

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

カラム間の余白を無くす

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

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

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

×