Bootstrapカードグリッドの作り方完全ガイド！rowとcolとgapで等間隔レイアウト

カードグリッドの作り方：row+col と gap で等間隔レイアウト

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

生徒

「Bootstrapでカードを並べたいんですが、きれいに同じ間隔で並ばなくて困っています」

先生

「カードを並べるときは、rowとcol、それからgapを組み合わせると簡単に整います」

生徒

「rowとかcolって聞いたことはあるけど、何をしているのか分かりません…」

先生

「では、机の上に箱を並べるイメージで、最初からゆっくり説明しますね」

1. Bootstrapのカードグリッドとは何か

Bootstrapのカードグリッドとは、カードと呼ばれる四角い情報の箱を、画面の中に規則正しく並べる方法のことです。ブログの記事一覧、商品一覧、写真の一覧などでよく使われます。パソコンやスマートフォンの画面サイズが変わっても、自動で並び方が調整されるのが大きな特徴です。

プログラミング未経験の方は、「グリッド」と聞くと難しく感じるかもしれませんが、実際はマス目のついたノートに付箋を並べるような感覚です。Bootstrapでは、そのマス目を自動で用意してくれるので、自分で細かい計算をする必要はありません。

2. rowとcolの役割を机と箱で考える

rowは横一列の机、colは机の上に置く箱だと考えると分かりやすいです。まず机であるrowを用意し、その上に箱であるcolを並べていきます。Bootstrapでは、この考え方がすべてのレイアウトの基本になります。

colは自動で横幅を分け合ってくれる仕組みを持っています。そのため、難しい数字を覚えなくても、同じ大きさのカードを横に並べることができます。


<div class="row">
    <div class="col">箱1</div>
    <div class="col">箱2</div>
    <div class="col">箱3</div>
</div>

ブラウザ表示

3. カードコンポーネントの基本構造

カードは、情報をまとめて表示するための部品です。タイトル、文章、画像などを一つの枠にまとめることで、見た目がとても整理されます。Bootstrapではcardという決まった形が用意されているため、初心者でも簡単に使えます。

まずは、一つのカードがどのような形をしているのかを確認してみましょう。


<div class="card">
    <img src="/img/sample150-100.jpg" class="card-img-top" alt="サンプル画像">
    <div class="card-body">
        <h5 class="card-title">カードのタイトル</h5>
        <p class="card-text">ここに説明文が入ります。</p>
    </div>
</div>

ブラウザ表示

4. rowとcolでカードを横に並べる方法

カードを複数並べたい場合は、cardをcolの中に入れます。こうすることで、カード同士が自然に横並びになります。画面が狭くなると、自動で縦に並び替わるのもBootstrapの便利な点です。

難しい操作は一切なく、箱の中にカードを入れるだけなので、直感的に理解できます。


<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-body">カード1</div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">カード2</div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">カード3</div>
        </div>
    </div>
</div>

ブラウザ表示

5. gapを使って等間隔に並べる考え方

カード同士の間隔をそろえると、見た目が一気にきれいになります。gapは、箱と箱のすき間をまとめて調整できる仕組みです。以前は余白を一つずつ指定する必要がありましたが、gapを使うと一言で指定できます。

これは、椅子と椅子の間を同じ距離で並べるようなイメージです。一つ決めるだけで、すべて同じ間隔になります。


<div class="row gap-3">
    <div class="col">
        <div class="card"><div class="card-body">A</div></div>
    </div>
    <div class="col">
        <div class="card"><div class="card-body">B</div></div>
    </div>
</div>

ブラウザ表示

6. 画像付きカードグリッドの実践例

実際のWebサイトでは、画像付きカードグリッドがよく使われます。商品写真や記事のサムネイルを並べることで、内容が一目で伝わります。Bootstrapのカードとグリッドを組み合わせることで、これも簡単に実現できます。


<div class="row row-cols-1 row-cols-md-3 gap-4">
    <div class="col">
        <div class="card">
            <img src="/img/sample120-120.jpg" class="card-img-top" alt="画像">
            <div class="card-body">
                <p class="card-text">説明文</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="/img/sample120-120.jpg" class="card-img-top" alt="画像">
            <div class="card-body">
                <p class="card-text">説明文</p>
            </div>
        </div>
    </div>
</div>

ブラウザ表示