CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － レスポンシブカラム

Web APP CSS
スポンサーリンク

レスポンシブカラムのゴールをまずイメージする

レスポンシブカラムは、ざっくり言うとこういう動きです。

  • スマホ：1カラム（縦一列）
  • タブレット：2カラム
  • PC：3〜4カラム

「画面幅に応じてカラム数が変わるカード一覧」や「サービス紹介ブロック」でよく使います。
ここでは、CSS と Tailwind CSS での書き方を、“実務でそのまま使えるテンプレート” ベースで解説していきます。

基本パターン1：メディアクエリで 1 → 2 → 3 カラム

CSS版：Grid＋メディアクエリの王道パターン

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 768px以上で2カラム */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1024px以上で3カラム */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
CSS
<div class="cards">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
</div>
HTML

ここでのポイントは、「最初は1カラム」→「画面が広がるごとに列数を増やす」 という発想です。
Grid の grid-template-columns をブレークポイントごとに変えるだけで、カラム数が自然に変化します。

Tailwind版：クラスだけで 1 → 2 → 3 カラム

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-4 rounded shadow">カード1</div>
  <div class="bg-white p-4 rounded shadow">カード2</div>
  <div class="bg-white p-4 rounded shadow">カード3</div>
  <div class="bg-white p-4 rounded shadow">カード4</div>
</div>
HTML

grid-cols-1
md:grid-cols-2
lg:grid-cols-3

この3つで、「スマホ1・タブレット2・PC3カラム」が完成します。

Tailwind のブレークポイント（デフォルト）

  • md ≒ 768px
  • lg ≒ 1024px

を使っているだけです。

基本パターン2：minmax＋auto-fit で「自動でカラム数が変わる」

CSS版：カードの最小幅だけ決めて、あとは自動

.cards-auto {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
CSS
<div class="cards-auto">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
  <div class="card">カード5</div>
</div>
HTML

ここでのキモは minmax(220px, 1fr) です。

  • 最小幅：220px
  • 最大幅：1fr（余りを分け合う）

画面が広いときは 4〜5カラム、
狭くなると 3 → 2 → 1 カラムと、“勝手にいい感じ” に変化します。

Tailwind版：任意値でそのまま書く

<div class="grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(220px,1fr))]">
  <div class="bg-white p-4 rounded shadow">カード1</div>
  <div class="bg-white p-4 rounded shadow">カード2</div>
  <div class="bg-white p-4 rounded shadow">カード3</div>
  <div class="bg-white p-4 rounded shadow">カード4</div>
  <div class="bg-white p-4 rounded shadow">カード5</div>
</div>
HTML

Tailwind には auto-fit 用の専用クラスはないので、
[grid-template-columns:...] の「任意値」で書きます。

深掘りポイント
レスポンシブカラムで一番“ラク”なのは、この auto-fit + minmax パターンです。
「カードの最小幅だけ決めて、あとは Grid に任せる」という割り切りができると、一気に楽になります。

Flexboxで作るレスポンシブカラム（シンプル版）

Grid が使えない状況や、もっとシンプルにやりたいときは Flexbox でも作れます。

CSS版：wrap＋幅指定

.flex-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.flex-cards > .card {
  flex: 1 1 calc(50% - 16px);
}

/* 768px以上で3カラム相当 */
@media (min-width: 768px) {
  .flex-cards > .card {
    flex: 1 1 calc(33.333% - 16px);
  }
}

/* 480px未満では1カラムにしたい場合 */
@media (max-width: 479px) {
  .flex-cards > .card {
    flex: 1 1 100%;
  }
}
CSS
<div class="flex-cards">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
</div>
HTML

Flexbox では「幅をパーセントで指定して wrap させる」という発想になります。
ただし、Grid に比べると「縦の揃い方」などは少し制御しづらいです。

Tailwind版：Flex＋basis＋wrap

<div class="flex flex-wrap gap-4">
  <div class="basis-full sm:basis-[calc(50%-0.5rem)] lg:basis-[calc(33.333%-0.5rem)] bg-white p-4 rounded shadow">
    カード1
  </div>
  <div class="basis-full sm:basis-[calc(50%-0.5rem)] lg:basis-[calc(33.333%-0.5rem)] bg-white p-4 rounded shadow">
    カード2
  </div>
  <div class="basis-full sm:basis-[calc(50%-0.5rem)] lg:basis-[calc(33.333%-0.5rem)] bg-white p-4 rounded shadow">
    カード3
  </div>
</div>
HTML

正直、レスポンシブカラムは Tailwind なら Grid を使った方が圧倒的に素直です。
Flex でやるのは「どうしても Grid が使えないとき」くらいでいい。

実戦でよく使うレスポンシブカラムテンプレート

サービス紹介セクション（1 → 2 → 3 カラム）

<section class="max-w-6xl mx-auto px-4 py-12">
  <h2 class="text-2xl font-bold mb-8">サービス一覧</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white p-6 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">サービスA</h3>
      <p class="text-sm text-gray-600">説明テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">詳しく見る</button>
    </div>
    <div class="bg-white p-6 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">サービスB</h3>
      <p class="text-sm text-gray-600">説明テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">詳しく見る</button>
    </div>
    <div class="bg-white p-6 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">サービスC</h3>
      <p class="text-sm text-gray-600">説明テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">詳しく見る</button>
    </div>
  </div>
</section>
HTML

ここでは

  • 外側のレイアウト：Grid（レスポンシブカラム）
  • カードの中身：Flex（縦方向の余白とボタンの下寄せ）

というきれいな役割分担になっています。

ブログカード一覧（minmax＋auto-fit）

<section class="max-w-6xl mx-auto px-4 py-12">
  <h2 class="text-2xl font-bold mb-8">最新記事</h2>
  <div class="grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(260px,1fr))]">
    <article class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">記事タイトル1</h3>
      <p class="text-sm text-gray-600">概要テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">続きを読む</button>
    </article>
    <article class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">記事タイトル2</h3>
      <p class="text-sm text-gray-600">概要テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">続きを読む</button>
    </article>
    <article class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">記事タイトル3</h3>
      <p class="text-sm text-gray-600">概要テキストが入ります。</p>
      <button class="mt-auto self-start text-sm text-blue-600">続きを読む</button>
    </article>
  </div>
</section>
HTML

minmax(260px, 1fr) の「260px」が、
「このカードはこれ以上細くしたくない」という“最低ライン”です。
ここを 220〜300px の間で調整するだけで、
見た目と読みやすさのバランスがかなり変わります。

レスポンシブカラム設計の考え方（ここが一番大事）

1. 「カラム数ベース」で考えるか、「最小幅ベース」で考えるかを決める

カラム数ベース
「スマホ1・タブレット2・PC3」と、
ブレークポイントごとに列数を決めるやり方。
→ grid-cols-1 md:grid-cols-2 lg:grid-cols-3

最小幅ベース
「カードの最小幅だけ決めて、あとは自動で詰める」やり方。
→ repeat(auto-fit, minmax(◯◯px, 1fr))

どちらが正解ではなく、
「デザインの性格」によって使い分けます。

2. スマホの見え方を最優先で決める

レスポンシブ設計は、
「スマホでどう見せたいか」から決めるのが鉄則です。

  • 1カラムで縦に読みやすく
  • 文字サイズ・行間を十分に
  • カードの横幅が細くなりすぎないように

その上で、
「じゃあタブレットでは2カラムにしようか」
「PCでは3カラムに増やそうか」
と足していくイメージです。

3. Tailwind なら「まず grid-cols-1 md:grid-cols-2」から始めていい

迷ったら、最初はこれで十分です。

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
HTML

慣れてきたら

lg:grid-cols-3
[grid-template-columns:repeat(auto-fit,minmax(240px,1fr))]
HTML

のように、少しずつ“攻めた”書き方を足していけばOKです。

まとめ

レスポンシブカラムは、
「画面幅に応じてカラム数やカード幅を変える」レイアウトの基礎です。

CSS なら

  • Grid＋メディアクエリ
  • repeat(auto-fit, minmax(...))

Tailwind なら

  • grid-cols-1 md:grid-cols-2 lg:grid-cols-3
  • [grid-template-columns:repeat(auto-fit,minmax(◯◯px,1fr))]

を軸に考えると、かなりスムーズに組めます。

スポンサーリンク
タイトルとURLをコピーしました