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

1. カードグリッドのギャラリーとは？初心者でも迷わない基本の考え方

1. カードグリッドのギャラリーとは？初心者でも迷わない基本の考え方

カードグリッドのギャラリーとは、画像・タイトル・説明文・ボタンなどの要素を一つの「カード」という箱にまとめ、それをタイル状に規則正しく並べたレイアウトのことです。プログラミング未経験の方でも、Amazonの商品一覧やスマートフォンの写真アプリをイメージすると分かりやすいでしょう。

従来のWeb制作では、これらを等間隔に並べるために複雑な計算が必要でしたが、Bootstrapのグリッドシステムを使えば、HTMLに特定のクラス名を書き加えるだけで、自動的に整列してくれます。まずは、最もシンプルな「画像と文字を組み合わせたカード」が並ぶ構造を見てみましょう。

<div class="container">
    <div class="row">
        <div class="col-md-6 mb-4">
            <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>
        </div>
        <div class="col-md-6 mb-4">
            <div class="card">
                <img src="/img/sample120-120.jpg" class="card-img-top" alt="サンプル画像">
                <div class="card-body">
                    <h5 class="card-title">レイアウトの仕組み</h5>
                    <p class="card-text">row（行）の中にcol（列）を入れることで、横並びのギャラリーが完成します。</p>
                </div>
            </div>
        </div>
    </div>
</div>

このように、Bootstrapを使えばデザインの知識がなくても「枠組み」がすぐに作れます。ギャラリー形式は、ブログの最新記事リスト、ポートフォリオ、チーム紹介ページなど、現代のWebサイトには欠かせないデザインパターンです。次のセクションでは、このカード同士の隙間をさらに美しく調整するテクニックを解説します。

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

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

Webデザインで最も頭を悩ませるのが、要素同士の「すき間（余白）」の調整です。これまではCSSで複雑な計算をして余白を作っていましたが、Bootstrapのgap（ギャップ）を使えば、驚くほど簡単に解決できます。

gapは、グリッド（row）やフレックスボックス（d-flex）の中で、カードやボタンが隣り合わせになった時の「境界線の距離」を一括で設定できるプロパティです。例えば、g-3やg-4といったクラスを親要素に書き足すだけで、子要素同士の距離が魔法のように等間隔に整います。

<div class="container mt-4">
    <div class="row g-4">
        <div class="col-md-6">
            <div class="p-3 border bg-light text-center">
                <img src="/img/sample150-100.jpg" alt="サンプル画像1" class="img-fluid mb-2">
                <p>カード 1</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="p-3 border bg-light text-center">
                <img src="/img/sample150-100.jpg" alt="サンプル画像2" class="img-fluid mb-2">
                <p>カード 2</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="p-3 border bg-light text-center">
                <img src="/img/sample150-100.jpg" alt="サンプル画像3" class="img-fluid mb-2">
                <p>カード 3</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="p-3 border bg-light text-center">
                <img src="/img/sample150-100.jpg" alt="サンプル画像4" class="img-fluid mb-2">
                <p>カード 4</p>
            </div>
        </div>
    </div>
</div>

上のサンプルでは、row g-4と記述することで、4つのカードがくっつかずに、綺麗な余白を持って並んでいるのがわかります。もし隙間をもっと広くしたい場合はg-5に、狭くしたい場合はg-2に変更するだけで、全体のデザインバランスを自由自在に操ることができます。

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

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

Webデザインでよくある悩みが、「カードの中身（文章量）が違うと、高さがバラバラで見栄えが悪くなる」という問題です。特に、説明文の長さが異なる複数のカードを横並びにした際、下のラインが揃っていないと、ユーザーに「未完成」で「読みづらい」という印象を与えてしまいます。

2026年現在のGoogle検索では、ユーザー体験（UX）や視覚的な分かりやすさが重要視されています。Bootstrapを使えば、複雑なCSSを書かなくてもh-100（height: 100%）というクラスを追加するだけで、中身の量に関わらず隣のカードと高さを自動で揃える「等高カラム」が簡単に実現できます。

まずは、プログラミング未経験の方でもすぐに試せる、高さを揃えるための基本的なコード例を見てみましょう。

<div class="container">
    <div class="row">
        <div class="col-md-6 mb-3">
            <div class="card h-100">
                <img src="/img/sample150-100.jpg" class="card-img-top" alt="サンプル画像1">
                <div class="card-body">
                    <h5 class="card-title">短いテキストのカード</h5>
                    <p class="card-text">このカードは文章が少ないです。</p>
                    <a href="#" class="btn btn-primary">詳細を見る</a>
                </div>
            </div>
        </div>
        <div class="col-md-6 mb-3">
            <div class="card h-100">
                <img src="/img/sample150-100.jpg" class="card-img-top" alt="サンプル画像2">
                <div class="card-body">
                    <h5 class="card-title">長いテキストのカード</h5>
                    <p class="card-text">こちらは文章が長めに設定されています。通常、文章が長いとカード自体が下に伸びてしまいますが、「h-100」を指定することで、左側のカードもこの高さに合わせて自動で伸びてくれます。</p>
                    <a href="#" class="btn btn-primary">詳細を見る</a>
                </div>
            </div>
        </div>
    </div>
</div>

解説：なぜ「h-100」が必要なのか？

Bootstrapのグリッドシステム（rowとcol）は、標準で「Flexbox」という仕組みを使っています。そのため、横並びの枠組み自体は同じ高さになっていますが、その中に入っている「カード（card）」自体は、中身の量に合わせて縮もうとします。

そこで、カードのクラスにh-100を記述します。これは「親要素（この場合はcol）の高さに対して100%（いっぱい）の高さにする」という意味です。これにより、中身が少なくても隣の長いカードと同じ高さまで「背伸び」してくれるようになり、グリッド全体がビシッと揃った美しいレイアウトが完成します。

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

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. スマホ対応もばっちり！レスポンシブ設計で使いやすく

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

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

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

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

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・等高カラムという要素を組み合わせれば、どのようなコンテンツでも整ったレイアウトが作れるため、写真ギャラリー、商品カタログ、ポートフォリオ、ニュース一覧など幅広い分野に応用できます。今後はカード内容や画像の比率、列数の調整などを工夫しながら、より豊かな表現へと発展させていきましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

Bootstrapのカードグリッドギャラリーとは、どんなレイアウトのことですか？

Bootstrapのカードグリッドギャラリーとは、画像・タイトル・説明文・ボタンなどをカード形式でまとめ、それらをグリッド状に整然と並べたレイアウトのことです。写真ギャラリー、商品一覧、ブログ記事一覧などによく使われ、HTML初心者でも見た目が整ったページを作りやすいのが特徴です。