TailwindCSS col-span 完全攻略｜つまずきポイント3選を実例で解説

TailwindCSS col-span でカラムを結合したいのに効かない、はみ出してしまう、ブレークポイントごとに冗長な記述になる——こうした典型的な落とし穴を、実例コードと画像で解説する3つのテクニック集です。

TailwindCSS col-span（カラム結合）でつまずいた経験はありませんか？「コードは書いたのに見た目が変わらない」「ヘッダーだけ全幅にしたいのに記述が長くなる」「特集カードがはみ出してレイアウトが崩れる」——これらは多くの開発者が一度は通る落とし穴です。

この記事では、col-span を使うときに見落としがちな3つのポイントを、NG/OK のコードと実際の表示画像を並べながら解説します。

「この問題、見覚えありませんか？」——col-span-2 を書いたのに、見た目が縦並びのまま変わらない。実はこれが今回の1つ目のテクニックの題材です。

私の体験談

その前に、私の体験談を紹介させてください。

私はこの記事を執筆するまで、col-span-full について認識がありませんでした。公式ドキュメントを参照していて、初めて存在を知ったクラスです。

正直に言うと、col-span 自体は公式の説明で大体理解できそうでしたが、col-span-full については解説が見当たらず、 正しく使えるようになるまで時間がかかりそう という印象を持ちました。同時に、この記事を執筆するきっかけになりました。

同じように「col-span ってシンプルに見えるけど、実は罠があるのかも？」と思っている方の役に立てれば嬉しいです。

今回紹介する3つのテクニック

col-span まわりで開発者が躓きやすいポイントを、3つに絞って取り上げます。それぞれ「読者がやりがちな誤解 → NGコード → OKコード → 解説 → ポイント」の流れで進めます。コードはすべて Tailwind Play で再現できる形で示します。

テクニック1: 子要素に col-span-2 を書いたのに効かない

誤解シナリオ:

読者Aさんは、カード一覧の中で「特集カードだけ横長に大きく見せたい」と思っています。

1. 「カードを横方向に結合するクラスはないかな？」と公式ドキュメントを調べる
2. 公式ドキュメント（Grid Column - Tailwind CSS）で col-span-2 というクラスを見つける
3. 「これだ！横に2カラム分結合できるんだ」と思い、特集カードの子要素に col-span-2 を適用
4. 「あれ？見た目が全く変わらない…」と困惑する

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="bg-white p-6 rounded">
    <div class="col-span-2 bg-slate-200 p-4 mb-2">特集カード（col-span-2 効かない）</div>
    <div class="bg-slate-200 p-4 mb-2">カード2</div>
    <div class="bg-slate-200 p-4 mb-2">カード3</div>
  </div>
</div>

3つのカードがただ縦に並ぶだけで、col-span-2 は何の影響も与えていません。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-3 gap-2 bg-white p-6 rounded">
    <div class="col-span-2 bg-slate-200 p-4">特集カード</div>
    <div class="bg-slate-200 p-4">カード2</div>
    <div class="bg-slate-200 p-4">カード3</div>
  </div>
</div>

特集カードが横2カラム分の幅を占有し、カード2が右隣、カード3が次の行に流れています。

解説:

col-span-* は CSS Grid の grid-column プロパティに対応しています。Grid プロパティは「親要素に display: grid（Tailwindでは grid クラス）が指定されている」場合にのみ機能します。

子要素に col-span-2 だけ書いても、親が Grid コンテナでなければ「列という概念自体が存在しない」ため、何も起こりません。Flexbox（flex クラス）の親に書いても同様に効きません。

公式の「Spanning columns」セクションには <div class="grid grid-cols-3 gap-4"> ... <div class="col-span-2"> ... のように親子セットの例が載っていますが、初学者は子要素のクラスだけに目が行きやすく、親の grid を見落としがちです。

ポイント:

子要素を横に結合したいときは、親に grid grid-cols-N、子に col-span-X をセットで指定しましょう。

テクニック2: col-span-full を知らずにブレークポイントごとに切替している

誤解シナリオ:

読者Bさんは、レスポンシブな Grid レイアウトの中で「ヘッダー（または CTA バナー）だけは画面幅に関わらず全幅で表示したい」と思っています。

1. 親に grid-cols-2 md:grid-cols-3 lg:grid-cols-4 のようにブレークポイントで列数を切り替えている
2. 公式ドキュメントで col-span-2 〜 col-span-12 を見つける
3. 「全幅にするには、親の列数と同じ数を指定すればいいんだ」と理解
4. 「親の列数が変わるから、ブレークポイントごとに col-span も切り替える必要があるな…」と判断
5. col-span-2 md:col-span-3 lg:col-span-4 のように冗長な記述になり、列数を変えるたびに修正が必要になる

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 bg-white p-6 rounded">
    <div class="col-span-2 md:col-span-3 lg:col-span-4 bg-slate-700 text-white p-4 rounded text-center">
      ヘッダー（全幅にしたい）
    </div>
    <div class="bg-slate-200 p-4">カード1</div>
    <div class="bg-slate-200 p-4">カード2</div>
    <div class="bg-slate-200 p-4">カード3</div>
    <div class="bg-slate-200 p-4">カード4</div>
  </div>
</div>

動作はしていますが、親の grid-cols-* を変えるたびに col-span-* も全部書き直す必要があり、保守コストが高くなります。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 bg-white p-6 rounded">
    <div class="col-span-full bg-slate-700 text-white p-4 rounded text-center">
      ヘッダー（全幅）
    </div>
    <div class="bg-slate-200 p-4">カード1</div>
    <div class="bg-slate-200 p-4">カード2</div>
    <div class="bg-slate-200 p-4">カード3</div>
    <div class="bg-slate-200 p-4">カード4</div>
  </div>
</div>

見た目は NG と同じですが、コードは劇的にシンプルになりました。親の列数が 2/3/4 のどれに変わっても、ヘッダーは常に全幅です。

解説:

col-span-full は内部的に grid-column: 1 / -1（最初の列線から最後の列線まで）を指定しており、親の grid-template-columns の列数に関係なく「常に全幅」を意味します。

公式ドキュメント「Spanning columns」セクションの一覧には col-span-full が並んで記載されていますが、初学者は「col-span-1, col-span-2, col-span-3…」という数値の流れに目が行きやすく、full の存在を見落としがちです。また「全幅 = 親の列数と同じ数値を指定」と先に思い込んでしまうと、ブレークポイントごとの切替コードを書いてから「もっといい方法ないかな」と気付くまでに時間がかかります。

特に、ダッシュボードのヘッダー・セクション見出し・CTA バナー・フッターのように「グリッド内に存在するが幅は親いっぱい」という要素では、col-span-full 1クラスで完結します。

ポイント:

親の列数に関わらず子要素を全幅にしたいときは、col-span-full を使いましょう。

テクニック3: 親の grid-cols より大きい col-span を書いて Grid がはみ出す

誤解シナリオ:

読者Cさんは、3カラムのカード一覧の中で「最初の特集カードだけ画面いっぱいの大きさで見せたい」と思っています。

1. 親に grid-cols-3 を指定済み
2. 公式ドキュメントで col-span-1 〜 col-span-12 を見つける
3. 「全幅で大きく見せたい！画面の端まで広げたい！」と思い、勘で大きめの値 col-span-6 を指定
4. 表示すると、特集カードが親要素の幅をはみ出して右側に飛び出し、後続のカードの配置も崩れる
5. 「col-span-6 ってきっと『画面の6分割幅』みたいな絶対指定だと思ったのに…」と困惑する

NGパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-3 gap-2 bg-white p-6 rounded">
    <div class="col-span-6 bg-slate-700 text-white p-4 rounded">特集カード（col-span-6）</div>
    <div class="bg-slate-200 p-4">カード2</div>
    <div class="bg-slate-200 p-4">カード3</div>
    <div class="bg-slate-200 p-4">カード4</div>
  </div>
</div>

特集カードが親要素の右端を超えてはみ出し、後続のカードの配置も崩れています。

OKパターン:

<div class="bg-slate-700 p-8">
  <div class="grid grid-cols-3 gap-2 bg-white p-6 rounded">
    <div class="col-span-2 bg-slate-700 text-white p-4 rounded">特集カード（2/3 幅）</div>
    <div class="bg-slate-200 p-4">カード2</div>
    <div class="bg-slate-200 p-4">カード3</div>
    <div class="bg-slate-200 p-4">カード4</div>
  </div>
</div>

特集カードは親の 2/3 幅を占有、カード2 が右隣の 1/3 幅、カード3・カード4 は次の行に綺麗に並んでいます。

解説:

col-span-N の N は「絶対的な幅」ではなく「親の grid-cols-M における列の数」です。grid-cols-3 の親は grid-template-columns: repeat(3, minmax(0, 1fr)) で「親要素の幅を3分割した1単位」を定義しています。

ここに col-span-6 を子に書くと、CSS Grid の仕様に従って「6列分の幅」を確保しようとしますが、親の明示的な列は3つしかないため、暗黙的な列（implicit grid lines）が4列目以降に追加されます。結果として子要素は親のコンテナ幅をはみ出し、後続要素の配置（grid-auto-flow の動き）も崩れます。

「画面の半分」「全幅」のような絶対サイズを指定したい意図なら、col-span-N ではなく w-1/2 や w-full、または前述の col-span-full が適切です。col-span-N は常に「親の列数のうち N 列分」という相対指定として理解しましょう。

ポイント:

col-span-N を指定するときは、N が親の grid-cols-M の M 以下になるようにしましょう。全幅にしたいときは col-span-full を使いましょう。

まとめ

TailwindCSS col-span でつまずきやすい3つのポイントを解説しました。

• テクニック1: 子要素に col-span-* を書く前に、親に grid grid-cols-N を指定する
• テクニック2: ブレークポイントごとの冗長な切替は不要、全幅は col-span-full 一発で済む
• テクニック3: col-span-N は絶対サイズではなく親の列数のうち N 列分、はみ出し注意

col-span は一見シンプルなクラスですが、「親との関係」「-full の存在」「相対指定であること」の3点を押さえると、レスポンシブな Grid レイアウトが格段に書きやすくなります。

それではまた、別の記事でお会いしましょう。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）