Bootstrapでカードグリッドのギャラリーを作ろう！初心者でもわかるgapと等高カラムのスターターテンプレート

カードグリッドのギャラリーテンプレート：gapと等高カラムの実装

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

生徒

「写真を並べたようなギャラリーページを作りたいんですが、綺麗に整列させる方法ってありますか？」

先生

「Bootstrapのカードとグリッドを組み合わせれば簡単ですよ。さらに、gapや等高カラムを使えば、見た目も整ってバッチリです。」

生徒

「等高カラムって何ですか？」

先生

「カードの高さがバラバラにならないように、すべて同じ高さに揃える方法です。実際にやってみましょう！」

1. カードグリッドのギャラリーとは？

カードグリッドのギャラリーとは、画像やタイトル、説明などを「カード形式」で整然と並べたレイアウトのことです。商品一覧、写真ギャラリー、ブログの一覧ページなどでよく使われます。

Bootstrapにはカードコンポーネントとグリッドシステムが標準で用意されているので、初心者でもHTMLとクラス指定だけで見た目が整ったデザインを作成できます。

2. gapとは？スペースの調整が簡単にできる！

gap（ギャップ）は、カード同士の「すき間」を設定するためのプロパティです。Bootstrapではg-3やg-4などのクラスを使うだけで、簡単に余白を設定できます。

たとえばg-4なら、上下左右に1.5rem（24px）の隙間を自動でつけてくれます。これでごちゃごちゃせず、すっきりと見やすいギャラリーが完成します。

3. 等高カラムとは？高さが揃ったカードを作る方法

カードの中に書く内容が少ないと、カードの高さがバラバラになります。そうすると、見た目がガタガタして統一感がありません。

Bootstrapでは、h-100やd-flex flex-columnといったクラスを使って、カードの高さを揃える（等高にする）ことができます。高さを統一することで、デザインに安定感が生まれます。

4. カードグリッドのギャラリーテンプレートを作ってみよう

それでは、カードをグリッド状に並べ、gapと等高カラムも実装したスターターテンプレートを紹介します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カードグリッドのギャラリー</title>
  <meta name="description" content="Bootstrapのカードとグリッドを使ってギャラリーテンプレートを作る方法。">
  <meta name="keywords" content="Bootstrap, ギャラリー, カードグリッド, gap, 等高カラム, HTML初心者, レイアウト, テンプレート">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h1 class="mb-4 text-center">カードギャラリー</h1>
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100 d-flex flex-column">
          <img src="/img/top/rank01.jpg" class="card-img-top" alt="サンプル画像1">
          <div class="card-body">
            <h5 class="card-title">タイトル1</h5>
            <p class="card-text">短めの説明文が入ります。</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary w-100">詳細を見る</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 d-flex flex-column">
          <img src="/img/top/rank02.jpg" class="card-img-top" alt="サンプル画像2">
          <div class="card-body">
            <h5 class="card-title">タイトル2</h5>
            <p class="card-text">こちらは少し長めの説明文です。内容が多くても高さが揃います。</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary w-100">詳細を見る</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 d-flex flex-column">
          <img src="/img/top/rank03.jpg" class="card-img-top" alt="サンプル画像3">
          <div class="card-body">
            <h5 class="card-title">タイトル3</h5>
            <p class="card-text">中ぐらいの説明文です。バランスの良い見た目です。</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary w-100">詳細を見る</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示

5. スマホ対応もばっちり！レスポンシブ設計で使いやすく

このテンプレートでは、row-cols-1 row-cols-md-3というクラスを使って、画面サイズに応じて列数を自動調整しています。スマホでは1列、タブレット以上では3列になります。

これにより、スマートフォンでもパソコンでも、最適なレイアウトでカードギャラリーを表示できます。

6. ギャラリーに使えるカードの応用方法

カードの中には、画像だけでなく、動画・アイコン・価格表・ボタンなどを入れることもできます。商品一覧・写真集・ポートフォリオ・ブログの一覧など、さまざまな使い方ができます。

まずはこのスターターテンプレートを活用して、オリジナルのギャラリーページを作ってみましょう。

まとめ

Bootstrapを使ったカードグリッドのギャラリー構築は、画像や文章を整然と並べたいときに大変便利であり、見た目の印象を大きく左右する重要なレイアウト技術です。とくに、写真や商品紹介、記事一覧など、多くの種類のコンテンツを直感的に並べて閲覧しやすい状態にするためには、カード構造とグリッドシステムを組み合わせた設計が非常に効果的です。さらに、g-4などのgap指定はカード同士の隙間を自然に整え、デザイン全体の美しさを高めます。カードは内容量によって高さが大きく変わるため、h-100やd-flex flex-columnのような高さ調整の仕組みを使うことで、整列の乱れを防ぎ、統一感を保つことができます。これにより、閲覧者にとって見やすく、操作しやすいレイアウトを実現できます。また、実際のカードギャラリーでは、画像、タイトル、説明文、リンクボタンなど複数の要素を自然に配置する必要があります。そのため、カードの全体構造を柔軟に扱いながら、視覚的なまとまりを意識して配置することがポイントになります。スマートフォン対応の重要性も増しており、row-cols-1 row-cols-md-3を使ったレスポンシブ設計によって、どの画面幅でも美しく配置されるギャラリーを作ることが可能です。1列から3列への自然な切り替えは、写真一覧や商品カタログなど、多様な使い方に向いています。下記のようなテンプレート構造を再度確認することで、カードギャラリーがどのように組み上がっているのか、より深く理解できるでしょう。HTMLタグやBootstrapのクラスを組み合わせるだけで、誰でも洗練されたデザインを作れる点は魅力のひとつです。


<div class="container my-4">
  <h2 class="text-center mb-4">サンプルギャラリーレイアウト</h2>
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
      <div class="card h-100 d-flex flex-column">
        <img src="/img/top/rank01.jpg" class="card-img-top" alt="サンプル画像A">
        <div class="card-body">
          <h5 class="card-title">サンプルカードA</h5>
          <p class="card-text">短めの説明文です。</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary w-100">詳細へ</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 d-flex flex-column">
        <img src="/img/top/rank02.jpg" class="card-img-top" alt="サンプル画像B">
        <div class="card-body">
          <h5 class="card-title">サンプルカードB</h5>
          <p class="card-text">こちらは長めの説明文が入っており、内容が多くても高さが揃います。</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary w-100">詳細へ</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 d-flex flex-column">
        <img src="/img/top/rank03.jpg" class="card-img-top" alt="サンプル画像C">
        <div class="card-body">
          <h5 class="card-title">サンプルカードC</h5>
          <p class="card-text">中くらいの説明文でバランスが良い例です。</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-primary w-100">詳細へ</a>
        </div>
      </div>
    </div>
  </div>
</div>

ブラウザ表示

このようなギャラリー構造は、画像一覧、ブログ記事のカード型リンク、商品ラインアップなど幅広い用途に適しており、カード同士の高さを揃えることで一体感のあるページレイアウトが完成します。カードが縦方向に伸びる構造にすることで、内容の多さに左右されず、見栄えを保ちながら自然な読みやすさを演出できます。画像や文章の配置を工夫すれば、情報量が多くても整理され、閲覧者の理解を助ける役割を果たします。さらに、gap指定を適切に使えば、視線の流れが途切れず、一覧性が高い構成をつくることができます。初心者でも扱いやすく、実務でも頻繁に使われるレイアウトだけに、基礎をしっかりと理解しておくことは大きな強みになります。カード・グリッド・gap・等高カラムという要素を組み合わせれば、どのようなコンテンツでも整ったレイアウトが作れるため、写真ギャラリー、商品カタログ、ポートフォリオ、ニュース一覧など幅広い分野に応用できます。今後はカード内容や画像の比率、列数の調整などを工夫しながら、より豊かな表現へと発展させていきましょう。

先生と生徒の振り返り会話

生徒「カードギャラリーの仕組みがよく分かりました！高さを揃えたりgapを調整するだけで一気に見やすくなりますね。」

先生「そうですね。カードはとても柔軟で、内容が多くても少なくても綺麗に整えられるのが魅力です。」

生徒「スマホで1列、パソコンで3列になる仕組みも便利です。どんな画面幅でも見やすいですね。」

先生「その通りです。レスポンシブ設計を意識すれば、使いやすさと見た目の両方が向上しますよ。」