Tailwind CSSレスポンシブ実装ガイド｜コピペで使える5つのレイアウトパターン

Tailwind CSSでレスポンシブ対応したい。でも sm: や
md:
をどう組み合わせれば実務のレイアウトになるのか、ドキュメントだけだとピンとこない。

この記事では、コピペしてそのまま動く5つのレスポンシブパターンを紹介します。カードグリッド、ナビバー、サイドバー、ヒーロー、フッター。この5つを押さえれば、実務のレスポンシブ実装は一通りカバーできます。

Tailwind CSSの基本的なセットアップがまだの方は、先にTailwind
CSS入門ガイドを読んでおくとスムーズです。

ブレークポイント早見表

まず前提。Tailwind CSSはモバイルファーストです。

何もプレフィックスをつけないクラスは、全画面幅に適用されます。sm:
をつけると640px以上、md:
なら768px以上で初めて有効になります。つまりデフォルトがモバイル表示。ここを逆に理解していると全部壊れます。

覚え方はシンプルで、小さい画面のスタイルを先に書いて、大きい画面で上書きしていく。これだけです。

実装パターン5つ

ここからが本題です。各パターン、HTMLをそのままコピペすれば動きます。

パターン1:
レスポンシブカードグリッド（1列→2列→3列）

ポートフォリオ、ブログ一覧、商品リスト。グリッドレイアウトはどんなサイトでも出番があります。

画面サイズごとの挙動: –
モバイル（〜767px）: カードが1列に縦積み –
タブレット（768px〜1023px）: 2列グリッド –
デスクトップ（1024px〜）: 3列グリッド

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-4">

  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://via.placeholder.com/400x200" alt="カード画像" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="text-lg font-bold mb-2">カードタイトル</h3>
      <p class="text-gray-600 text-sm">ここに説明文が入ります。レスポンシブで自然に折り返されます。</p>
      <a href="#" class="inline-block mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">
        詳しく見る →
      </a>
    </div>
  </div>

  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://via.placeholder.com/400x200" alt="カード画像" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="text-lg font-bold mb-2">カードタイトル</h3>
      <p class="text-gray-600 text-sm">2枚目のカードです。grid-cols の数値を変えるだけで列数が変わります。</p>
      <a href="#" class="inline-block mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">
        詳しく見る →
      </a>
    </div>
  </div>

  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://via.placeholder.com/400x200" alt="カード画像" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="text-lg font-bold mb-2">カードタイトル</h3>
      <p class="text-gray-600 text-sm">3枚目のカードです。lg 以上で3列になるため、3の倍数で並べると綺麗です。</p>
      <a href="#" class="inline-block mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">
        詳しく見る →
      </a>
    </div>
  </div>

</div>

ポイントは grid-cols-1 md:grid-cols-2 lg:grid-cols-3
の3段階指定です。ベース（モバイル）を1列にしておいて、画面が広がるたびに列を増やしています。gap-6
でカード間に24pxの余白を確保しているので、列数が変わっても見た目が崩れません。

パターン2:
ナビバー（モバイルメニュー → デスクトップ横並び）

ほぼすべてのWebサイトで必要になるパターンです。モバイルではハンバーガーアイコンを表示し、デスクトップではリンクを横並びにします。

• モバイル（〜767px）: ロゴ +
  ハンバーガーアイコン。ナビリンクは非表示
• デスクトップ（768px〜）: ロゴ +
  ナビリンクを横並び表示。ハンバーガーは非表示

<nav class="bg-gray-900 text-white">
  <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">

    <!-- ロゴ -->
    <a href="/" class="text-xl font-bold">MySite</a>

    <!-- ハンバーガーアイコン（モバイルのみ） -->
    <button class="md:hidden p-2" aria-label="メニューを開く">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>

    <!-- ナビリンク（デスクトップのみ） -->
    <ul class="hidden md:flex space-x-6 text-sm">
      <li><a href="#" class="hover:text-gray-300">ホーム</a></li>
      <li><a href="#" class="hover:text-gray-300">サービス</a></li>
      <li><a href="#" class="hover:text-gray-300">ブログ</a></li>
      <li><a href="#" class="hover:text-gray-300">お問い合わせ</a></li>
    </ul>

  </div>
</nav>

核心は2つだけです。ハンバーガーアイコンに
md:hidden（768px以上で消える）、ナビリンクの
<ul> に
hidden md:flex（デフォルト非表示、768px以上でflex表示）。この
hidden → md:flex
の切り替えはTailwindレスポンシブの定番中の定番なので、体に染み込ませておいてください。

実際のメニュー開閉にはJavaScriptが必要ですが、CSSレイアウトとしてはこれで完成です。

パターン3:
サイドバーの表示/非表示切り替え

ブログやドキュメントサイトで定番のサイドバーレイアウトです。

• モバイル（〜1023px）: メインコンテンツのみ表示
• デスクトップ（1024px〜）:
  メインコンテンツ（左・75%幅）+ サイドバー（右・25%幅）

<div class="max-w-6xl mx-auto px-4 py-8">
  <div class="flex flex-col lg:flex-row gap-8">

    <!-- メインコンテンツ -->
    <main class="w-full lg:w-3/4">
      <h1 class="text-2xl font-bold mb-4">記事タイトル</h1>
      <p class="text-gray-700 leading-relaxed mb-4">
        ここに記事本文が入ります。モバイルでは全幅、デスクトップでは左側3/4の幅で表示されます。
      </p>
      <p class="text-gray-700 leading-relaxed mb-4">
        lg:w-3/4 は1024px以上で幅75%になるクラスです。それ未満では w-full（100%）が適用されます。
      </p>
      <p class="text-gray-700 leading-relaxed">
        flexの方向も lg:flex-row で切り替えています。モバイルでは flex-col（縦積み）がベースです。
      </p>
    </main>

    <!-- サイドバー -->
    <aside class="hidden lg:block w-full lg:w-1/4">
      <div class="bg-gray-100 rounded-lg p-4">
        <h2 class="font-bold mb-3">カテゴリ</h2>
        <ul class="space-y-2 text-sm text-gray-600">
          <li><a href="#" class="hover:text-blue-600">フロントエンド</a></li>
          <li><a href="#" class="hover:text-blue-600">バックエンド</a></li>
          <li><a href="#" class="hover:text-blue-600">DevOps</a></li>
          <li><a href="#" class="hover:text-blue-600">デザイン</a></li>
        </ul>
      </div>
      <div class="bg-gray-100 rounded-lg p-4 mt-4">
        <h2 class="font-bold mb-3">人気記事</h2>
        <ul class="space-y-2 text-sm text-gray-600">
          <li><a href="#" class="hover:text-blue-600">記事タイトル1</a></li>
          <li><a href="#" class="hover:text-blue-600">記事タイトル2</a></li>
          <li><a href="#" class="hover:text-blue-600">記事タイトル3</a></li>
        </ul>
      </div>
    </aside>

  </div>
</div>

サイドバーの hidden lg:block
が肝です。1024px未満では完全に消えて、メインコンテンツが全幅を使います。

正直、このパターンだけでブログの8割のレイアウトは組めます。

パターン4:
ヒーローセクション（テキスト配置・サイズ変更）

LPやトップページのファーストビューです。このパターンだけ少し複雑で、1つの要素に3段階のレスポンシブ指定が入ります。

<section class="bg-gradient-to-br from-blue-600 to-purple-700 text-white">
  <div class="max-w-6xl mx-auto px-4 py-16 md:py-24 lg:py-32">
    <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">

      <!-- テキストエリア -->
      <div class="text-center lg:text-left lg:w-1/2">
        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold leading-tight mb-4">
          あなたのアイデアを<br>形にする
        </h1>
        <p class="text-base md:text-lg text-blue-100 mb-8 max-w-lg mx-auto lg:mx-0">
          シンプルなツールで、複雑なことを実現する。今日から始められます。
        </p>
        <div class="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start">
          <a href="#" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-bold hover:bg-blue-50 text-center">
            無料で始める
          </a>
          <a href="#" class="border border-white px-6 py-3 rounded-lg font-bold hover:bg-white/10 text-center">
            デモを見る
          </a>
        </div>
      </div>

      <!-- 画像エリア -->
      <div class="lg:w-1/2">
        <img src="https://via.placeholder.com/600x400" alt="プロダクトイメージ"
             class="rounded-xl shadow-2xl w-full">
      </div>

    </div>
  </div>
</section>

注目すべきクラスを整理します。

• text-center lg:text-left — テキスト揃えの切り替え
• text-3xl md:text-4xl lg:text-5xl —
  フォントサイズ3段階
• flex-col sm:flex-row — ボタン群の縦→横切り替え
• py-16 md:py-24 lg:py-32 — 上下余白の段階的拡張

クラスを並べるだけなので、メディアクエリをネストで書くより格段に見通しが良いです。

パターン5:
フッターの段組み変更（1列→2列→4列）

フッターはリンク群が多くなりがちです。モバイルでは1列、タブレットで2列、デスクトップで4列に展開します。

<footer class="bg-gray-900 text-gray-300">
  <div class="max-w-6xl mx-auto px-4 py-12">

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

      <!-- 会社情報 -->
      <div>
        <h3 class="text-white font-bold text-lg mb-4">MySite</h3>
        <p class="text-sm leading-relaxed">
          Webサービスの企画・開発を行っています。お気軽にお問い合わせください。
        </p>
      </div>

      <!-- サービス -->
      <div>
        <h3 class="text-white font-bold mb-4">サービス</h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-white">Web制作</a></li>
          <li><a href="#" class="hover:text-white">アプリ開発</a></li>
          <li><a href="#" class="hover:text-white">コンサルティング</a></li>
          <li><a href="#" class="hover:text-white">保守運用</a></li>
        </ul>
      </div>

      <!-- リソース -->
      <div>
        <h3 class="text-white font-bold mb-4">リソース</h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-white">ブログ</a></li>
          <li><a href="#" class="hover:text-white">ドキュメント</a></li>
          <li><a href="#" class="hover:text-white">チュートリアル</a></li>
          <li><a href="#" class="hover:text-white">FAQ</a></li>
        </ul>
      </div>

      <!-- SNS -->
      <div>
        <h3 class="text-white font-bold mb-4">フォロー</h3>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-white">X (Twitter)</a></li>
          <li><a href="#" class="hover:text-white">GitHub</a></li>
          <li><a href="#" class="hover:text-white">YouTube</a></li>
          <li><a href="#" class="hover:text-white">note</a></li>
        </ul>
      </div>

    </div>

    <!-- コピーライト -->
    <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
      <p>&copy; 2026 MySite. All rights reserved.</p>
    </div>

  </div>
</footer>

構造はパターン1のカードグリッドとほぼ同じです。grid-cols-1 md:grid-cols-2 lg:grid-cols-4
で段組み数を変えているだけ。一度グリッドの書き方を覚えれば、列数の数字を差し替えるだけで使い回せます。

よくあるミス3選

5つのパターンを見てきました。ここで、Tailwindのレスポンシブでやりがちなミスを3つ挙げておきます。

ミス1: sm:
がスマホ用だと思っている

まじでこれが一番多い。

sm:
は「small」だからスマホ用、と思ってしまうのは自然です。でも違います。sm:
は 640px以上
で有効になるプレフィックスです。スマホ用のスタイルはプレフィックスなし（ベース）で書きます。

<!-- ❌ 間違い: sm: をスマホ向けに使ってしまう -->
<p class="sm:text-sm md:text-base lg:text-lg">テキスト</p>

<!-- ✅ 正解: ベースがスマホ、sm: 以上で変更 -->
<p class="text-sm sm:text-base lg:text-lg">テキスト</p>

ベースに書いたスタイルが全画面幅に適用されて、ブレークポイントで上書きしていく。この順番を間違えると、レイアウトが意図と真逆になります。

ミス2:
不要なブレークポイントの指定

全サイズ分書く必要はありません。変化するポイントだけ指定すれば十分です。

<!-- ❌ 冗長: 全ブレークポイントを指定 -->
<div class="p-2 sm:p-3 md:p-4 lg:p-6 xl:p-8 2xl:p-10">

<!-- ✅ 簡潔: 変化点だけ指定 -->
<div class="p-2 md:p-4 xl:p-8">

sm: と md:
で見た目がほとんど変わらないなら、どちらか一方で良いです。ブレークポイントを6段階全部使っているコードを見かけたら、たいてい3段階に減らせます。

ミス3:
max-width の発想で書いてしまう

従来のCSS（Bootstrap含む）では max-width
指定が主流でした。「このサイズ以下で適用」の発想です。Tailwindは逆で、min-width（このサイズ以上で適用）です。

/* 従来のCSS（max-width） */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

/* Tailwind（min-width） */
/* ベースで非表示、md以上で表示 */

<aside class="hidden md:block">サイドバー</aside>

「小さい画面がデフォルト、大きくなったら変える」。この発想に切り替えるだけで、Tailwindのレスポンシブは驚くほどシンプルに書けます。

まとめ

5つのレスポンシブパターンを紹介しました。

どのパターンも、やっていることは同じです。ベースにモバイルのスタイルを書いて、ブレークポイントで上書きする。これがTailwindレスポンシブの全てです。

この5パターンのクラスをTailwind
CSS便利クラス集と組み合わせれば、大半のWebページのレイアウトは組めます。カスタムブレークポイントやテーマの拡張が必要になったら、Tailwind
CSSカスタマイズ入門も参照してください。

Tailwind CSS全体の体系的な学習にはTailwind
CSS完全ガイドをどうぞ。

参考になれば幸いです。

FAQ

Q.
ブレークポイントの値はカスタマイズできますか？

はい。tailwind.config.js の theme.screens
で自由に変更・追加できます。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1920px', // カスタム追加
    },
  },
}

追加した 3xl:
プレフィックスはそのまま使えます。ただし、デフォルトの値を変更すると既存のレスポンシブ指定が全て影響を受けるので注意してください。

Q.
container クラスとブレークポイントの関係は？

Tailwindの container クラスは、各ブレークポイントで
max-width を自動設定するユーティリティです。sm
なら640px、md
なら768px、という具合に各段階で幅が固定されます。

<div class="container mx-auto px-4">
  <!-- sm: max-width: 640px -->
  <!-- md: max-width: 768px -->
  <!-- lg: max-width: 1024px -->
  <!-- ... -->
</div>

この記事で使った max-w-6xl mx-auto
のほうが幅を明示的にコントロールできるので、個人的にはそちらを使うことが多いです。

Q.
Tailwind v4ではレスポンシブの書き方は変わりますか？

Tailwind
v4ではCSS-firstの設定アプローチに変わりますが、sm:・md:
などのレスポンシブプレフィックスの使い方自体は同じです。この記事のコード例はv3.xベースですが、レスポンシブのクラス指定パターンはv4でもそのまま通用します。