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つだけ入りますよね）。

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

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

ブレークポイントまとめ

前回学習したブレークポイントと名称、そして今回のブレークポイントを複数にした場合について整理しましょう。
Bootstrapで用意されているブレークポイントは5つ。一覧は下図のとおりです。

BootstrapのCSSは「画面幅が～px以上なら」という書き方をしています（モバイルファースト設計）。
ですので、例えばmd-と書かれたクラスは、PCモニターで見た場合も有効です。

今回作ったように、ブレークポイント名違いで複数クラスが指定されている時。
この場合は、Webページを閲覧しているデバイスに対して有効なクラスの中で、最も大きいブレークポイントのものが適用されます。

【実習】

前回の実習で作成した、grid.htmlの2カラム部分があると思います。
このファイルをカラムを、複数のブレークポイントに変更してみましょう。

イメージは以下です。

• スマホでみた時：12カラムずつの縦並び
• タブレットでみた時：6：6の横並び
• パソコンで見た時：画像が4、テキスト部分が8カラムの横並び

方法

タブレットで見た時（6：6）の指定は、すでにcol-md-6クラスで出来ています。
ですので、追加するのはExtra large＝ブレークポイント名xlを入れたクラスですね。

画像を囲っている方のdivにcol-xl-4クラスを、テキストを囲っているdivにcol-xl-8クラスを追加します。

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xl-4">
            <img src="images/test.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-6 col-xl-8">
            <h1>sampletext</h1>
            <p>samplet extsampletextsam pletextsampletextsamplete xtsampl etextsa mpletextsamplet exts amplet extsamp lete xtsam p letext sampl ete xtsamp letextsample text sample text sampletext sampletext samplete xtsample textsa mplet extsam ple text
            </p>
        </div>
    </div>
</div>

デバイスサイズによる表示の切り替わりは、検証ツールを使って確認します。

PC幅で見た場合は、col-md-6クラスのスタイル指定を、col-xl-6クラスのスタイル指定が上書きしていることも確認できると思います。

この検証ツールを使った表示確認方法は、実務でも使うことが多いです。
コーディングの学習と組み合わせて、慣れていきましょう。