Bootstrapグリッドで等高カラムを実現！カードレイアウト完全入門【初心者向け】

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

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

Bootstrapのグリッドシステムとは、画面を横に12個のマスに分けてレイアウトを作る仕組みです。ノートに12マスの罫線を引いて、そこに箱を並べるような感覚です。Bootstrap グリッド、12分割、レスポンシブ対応という言葉は、画面サイズに合わせて自動で並び替える仕組みを意味します。

2. カードレイアウトで高さがそろわない理由

2. カードレイアウトで高さがそろわない理由

カードの中に入る文章や画像の量が違うと、箱の高さも変わります。これは引き出しの中に入れる物の量が違うと、見た目が不ぞろいになるのと同じです。Bootstrap カード 高さ 揃えたい、等高カラム できない、という検索が多い理由もここにあります。

3. 行と列を使った基本のカードグリッド

3. 行と列を使った基本のカードグリッド

まずは基本となる行と列の考え方を見てみましょう。containerは全体の箱、rowは横並びの行、colは列です。これだけ覚えればBootstrap グリッドシステムの第一歩です。

<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="card p-3">カードA</div>
        </div>
        <div class="col-4">
            <div class="card p-3">カードB</div>
        </div>
        <div class="col-4">
            <div class="card p-3">カードC</div>
        </div>
    </div>
</div>

4. フレックスの力で等高カラムを作る

4. フレックスの力で等高カラムを作る

Bootstrapでは内部でフレックスという並び方の仕組みを使っています。d-flexは横並びにする合図、h-100は高さを100パーセントにする指定です。これを使うと、カードの高さをそろえることができます。

<div class="row">
    <div class="col-md-4 d-flex">
        <div class="card p-3 h-100">文章が短いカード</div>
    </div>
    <div class="col-md-4 d-flex">
        <div class="card p-3 h-100">文章が少し長いカードの例です</div>
    </div>
    <div class="col-md-4 d-flex">
        <div class="card p-3 h-100">さらに長い文章が入ったカードの例です。説明文が増えても高さがそろいます。</div>
    </div>
</div>

5. 画像入りカードでも高さをそろえる

5. 画像入りカードでも高さをそろえる

画像が入ると高さがさらにバラつきやすくなります。ここでもグリッドとユーティリティを組み合わせます。Bootstrap カード 画像 等高 という悩みもこの方法で解決できます。

<div class="row">
    <div class="col-sm-6 col-lg-3 d-flex">
        <div class="card h-100">
            <img src="/img/sample150-100.jpg" class="card-img-top">
            <div class="card-body">カード内容A</div>
        </div>
    </div>
    <div class="col-sm-6 col-lg-3 d-flex">
        <div class="card h-100">
            <img src="/img/sample120-120.jpg" class="card-img-top">
            <div class="card-body">カード内容B テキスト多め</div>
        </div>
    </div>
</div>

6. ブレークポイントで画面サイズに対応する

6. ブレークポイントで画面サイズに対応する

ブレークポイントとは、画面の幅に応じて並び方を変える区切り線です。スマホでは縦並び、パソコンでは横並び、と自動で切り替わります。Bootstrap ブレークポイント、レスポンシブ グリッドは初心者でも便利に使えます。

7. ユーティリティクラスを使うメリット

7. ユーティリティクラスを使うメリット

ユーティリティクラスとは、細かい調整をするための短い命令です。余白、文字の位置、高さ指定などが用意されています。難しい設定ファイルを書かなくても、クラスを付けるだけで見た目を整えられるのがBootstrapの強みです。

8. よくある失敗とつまずきポイント

8. よくある失敗とつまずきポイント

等高カラムができない原因の多くは、d-flexを付け忘れる、h-100を付ける場所を間違える、rowとcolの入れ子が崩れている、という点です。箱を正しく重ねる意識を持つと、自然と解決できます。