Bootstrapグリッドシステム完全入門！画面サイズでカラム数を切り替える方法（.col-12 → .col-md-6 → .col-lg-4）

画面サイズでカラム数を切り替える（.col-12 → .col-md-6 → .col-lg-4）

先生と生徒の会話形式で理解しよう

生徒

「スマホとパソコンで、同じページなのに表示が変わるのはどうしてですか？」

先生

「それは画面の大きさに合わせて、レイアウトを切り替えているからです。」

生徒

「自分でも、そんなことができるんですか？」

先生

「Bootstrapのグリッドシステムを使えば、とても簡単にできますよ。」

1. Bootstrapのグリッドシステムとは何か

Bootstrapのグリッドシステムとは、画面を横に12個のマスに分けて、レイアウトを考える仕組みです。パソコンを触ったことがない方は、ノートを定規で12等分したイメージをすると分かりやすいです。この12個のマスをどう使うかで、表示の形が決まります。

Bootstrapでは、この仕組みを使って、スマホ・タブレット・パソコンなど、画面サイズが違っても見やすいWebページを作れます。これをレスポンシブデザインと呼びます。

2. カラムと行の基本的な考え方

グリッドでは、横の並びを行、縦の区切りをカラムと呼びます。行の中にカラムを入れて配置します。12分割の中で、カラムがいくつ分使うかを指定します。

例えば12個すべて使えば横いっぱい、6個なら半分、4個なら3分の1という感覚です。難しく考えず、ブロックを並べる感覚で大丈夫です。

3. col-12で画面いっぱいに表示する

まずは一番シンプルな指定です。col-12は、どんな画面サイズでも横いっぱいに表示されます。スマホでもパソコンでも、1段で表示されます。


<div class="container">
    <div class="row">
        <div class="col-12 bg-primary text-white p-3">
            画面いっぱいのカラム
        </div>
    </div>
</div>

ブラウザ表示

4. col-md-6で中くらいの画面から2分割

次に、画面サイズで表示を変える方法です。mdは中くらいの画面を意味します。スマホでは縦並び、タブレットやパソコンでは横に2つ並びます。

これは、スマホは縦に見た方が読みやすく、少し大きな画面では横に並べた方が便利だからです。


<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 bg-success text-white p-3">
            左のカラム
        </div>
        <div class="col-12 col-md-6 bg-warning p-3">
            右のカラム
        </div>
    </div>
</div>

ブラウザ表示

5. col-lg-4で大きな画面は3分割

lgは大きな画面、つまりパソコン向けの指定です。col-lg-4は12分割のうち4つ使うので、横に3つ並びます。

スマホでは1列、タブレットでは2列、パソコンでは3列という動きになります。これがBootstrapグリッドの一番便利なところです。


<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 bg-info">1</div>
        <div class="col-12 col-md-6 col-lg-4 bg-secondary text-white">2</div>
        <div class="col-12 col-md-6 col-lg-4 bg-danger text-white">3</div>
    </div>
</div>

ブラウザ表示

6. ブレークポイントという考え方

画面サイズで切り替わる境目をブレークポイントと呼びます。難しい言葉ですが、表示が変わるタイミングだと思ってください。

Bootstrapでは、sm、md、lgなどが用意されていて、それぞれスマホ、小さめタブレット、パソコン向けという目安があります。細かく覚えなくても、使いながら慣れていけば大丈夫です。

7. 実際のWebサイトでよくある使い方

商品一覧、ブログのカード表示、画像ギャラリーなどは、このグリッド指定がよく使われます。スマホでは縦に1つずつ、パソコンでは横に並ぶ形です。

Bootstrapを使うことで、画面サイズごとに細かくCSSを書かなくても、クラスを付けるだけで対応できます。


<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4 p-2">
            <img src="/img/sample120-120.jpg" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-4 p-2">
            <img src="/img/sample120-120.jpg" class="img-fluid">
        </div>
        <div class="col-12 col-md-6 col-lg-4 p-2">
            <img src="/img/sample120-120.jpg" class="img-fluid">
        </div>
    </div>
</div>

ブラウザ表示