EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

Tailwind CSS レスポンシブデザイン：ブレークポイントシステムとモバイルファースト戦略

ブレークポイントシステム

Tailwindは5つのデフォルトブレークポイントを提供しています。レスポンシブプレフィックスを使用して、異なる画面サイズに合わせたスタイルを適用できます。

プレフィックス 最小幅 CSS メディアクエリ 代表的なデバイス
sm: 640px @media (min-width: 640px) スマホ横向き
md: 768px @media (min-width: 768px) タブレット
lg: 1024px @media (min-width: 1024px) ノートPC
xl: 1280px @media (min-width: 1280px) デスクトップモニター
2xl: 1536px @media (min-width: 1536px) 大型モニター

従来のCSSとTailwindの比較 従来の方法では複数の@mediaクエリを書き、異なるファイル間でスタイルを管理する必要がありますが、Tailwindではsm:やmd:などのプレフィックスを使ってHTML内で直接レスポンシブスタイルを宣言できます。

モバイルファースト戦略

Tailwindはモバイルファースト戦略を採用しています。プレフィックスなしのスタイルはデフォルトで最小画面に適用され、大きなブレークポイントプレフィックスが小さい画面のスタイルを上書きします。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>モバイルファースト戦略</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- レスポンシブテキスト -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">レスポンシブフォントサイズ</h3>
      <p class="text-sm md:text-base lg:text-lg xl:text-xl">
        小さい画面では text-sm がデフォルト、中画面では text-base、大画面では text-lg、特大画面では text-xl が適用されます
      </p>
    </div>

    <!-- レスポンシブパディング -->
    <div class="bg-blue-100 rounded-lg p-2 sm:p-4 md:p-6 lg:p-8">
      <p class="text-center text-blue-800">レスポンシブパディング：p-2 → sm:p-4 → md:p-6 → lg:p-8</p>
    </div>

    <!-- レスポンシブ表示/非表示 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">レスポンシブ表示/非表示</h3>
      <div class="block md:hidden bg-red-100 p-4 rounded text-center text-red-700">
        小画面のみ表示（block md:hidden）
      </div>
      <div class="hidden md:block bg-green-100 p-4 rounded text-center text-green-700">
        中画面以上で表示（hidden md:block）
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう
💡 ポイント： モバイルファーストとは、プレフィックスなしのスタイルがベースラインで、ブレークポイントプレフィックスが拡張用であることを意味します。例えば、text-sm md:text-lgは小画面で14px、中画面以上で18pxを意味します。

レスポンシブプレフィックスの実践

レスポンシブプレフィックスは任意のTailwindクラスと組み合わせて、異なる画面サイズでのレイアウト変更を実現できます。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブプレフィックスの実践</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- レスポンシブFlex レイアウト -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">レスポンシブFlex レイアウト</h3>
      <div class="flex flex-col sm:flex-row gap-4">
        <div class="flex-1 bg-blue-100 p-4 rounded text-center">項目 1</div>
        <div class="flex-1 bg-blue-200 p-4 rounded text-center">項目 2</div>
        <div class="flex-1 bg-blue-300 p-4 rounded text-center">項目 3</div>
      </div>
      <p class="text-sm text-gray-500 mt-2">小画面では縦並び（flex-col）、中画面では横並び（sm:flex-row）</p>
    </div>

    <!-- レスポンシブGrid カラム -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">レスポンシブGrid カラム</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        <div class="bg-green-100 p-4 rounded text-center">1</div>
        <div class="bg-green-200 p-4 rounded text-center">2</div>
        <div class="bg-green-300 p-4 rounded text-center">3</div>
        <div class="bg-green-400 p-4 rounded text-center">4</div>
        <div class="bg-green-500 p-4 rounded text-center text-white">5</div>
        <div class="bg-green-600 p-4 rounded text-center text-white">6</div>
        <div class="bg-green-700 p-4 rounded text-center text-white">7</div>
        <div class="bg-green-800 p-4 rounded text-center text-white">8</div>
      </div>
      <p class="text-sm text-gray-500 mt-2">grid-cols-1 → sm:grid-cols-2 → lg:grid-cols-3 → xl:grid-cols-4</p>
    </div>

    <!-- レスポンシブ間隔 -->
    <div class="bg-white rounded-lg shadow p-4 sm:p-6 md:p-8">
      <h3 class="font-semibold mb-2 sm:mb-4 md:mb-6">レスポンシブ間隔</h3>
      <div class="space-y-2 sm:space-y-4 md:space-y-6">
        <div class="bg-purple-100 p-4 rounded">項目 A</div>
        <div class="bg-purple-200 p-4 rounded">項目 B</div>
        <div class="bg-purple-300 p-4 rounded">項目 C</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }のような複数のCSSブロックを書く必要がありますが、Tailwindではgrid-cols-1 md:grid-cols-2 lg:grid-cols-3の1行で同じことが実現できます。

レスポンシブ画像

レスポンシブ画像は、異なる画面サイズで画像が正しく表示されるようにし、はみ出しや歪みを防ぎます。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブ画像</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- レスポンシブ画像幅 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">レスポンシブ画像幅</h3>
      <img src="https://picsum.photos/1200/400" alt="レスポンシブ画像"
           class="w-full md:w-3/4 lg:w-1/2 mx-auto rounded-lg">
      <p class="text-sm text-gray-500 mt-2 text-center">w-full → md:w-3/4 → lg:w-1/2</p>
    </div>

    <!-- レスポンシブ画像グリッド -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">レスポンシブ画像グリッド</h3>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-4">
        <img src="https://picsum.photos/300/300?random=1" alt="画像 1" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=2" alt="画像 2" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=3" alt="画像 3" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=4" alt="画像 4" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=5" alt="画像 5" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=6" alt="画像 6" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=7" alt="画像 7" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=8" alt="画像 8" class="w-full aspect-square object-cover rounded-lg">
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう
💡 ポイント： w-fullを使用して画像が親コンテナからはみ出さないようにし、object-coverと組み合わせてアスペクト比を維持してください。

レスポンシブテーブル

レスポンシブテーブルは、小画面で水平スクロールを可能にし、コンテンツが詰められるのを防ぎます。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブテーブル</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <h3 class="font-semibold mb-4">レスポンシブテーブル</h3>
      <div class="overflow-x-auto">
        <table class="w-full text-sm md:text-base">
          <thead>
            <tr class="bg-gray-100">
              <th class="p-2 md:p-3 text-left">ID</th>
              <th class="p-2 md:p-3 text-left">名前</th>
              <th class="p-2 md:p-3 text-left hidden sm:table-cell">メール</th>
              <th class="p-2 md:p-3 text-left hidden md:table-cell">電話</th>
              <th class="p-2 md:p-3 text-left">状態</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b">
              <td class="p-2 md:p-3">001</td>
              <td class="p-2 md:p-3">山田</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">yamada@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">090-0000-0001</td>
              <td class="p-2 md:p-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">有効</span></td>
            </tr>
            <tr class="border-b">
              <td class="p-2 md:p-3">002</td>
              <td class="p-2 md:p-3">鈴木</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">suzuki@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">090-0000-0002</td>
              <td class="p-2 md:p-3"><span class="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-xs">保留</span></td>
            </tr>
            <tr class="border-b">
              <td class="p-2 md:p-3">003</td>
              <td class="p-2 md:p-3">佐藤</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">sato@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">090-0000-0003</td>
              <td class="p-2 md:p-3"><span class="bg-red-100 text-red-700 px-2 py-1 rounded text-xs">無効</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="text-sm text-gray-500 mt-4">一部のカラムは小画面では非表示になり、テーブルは水平スクロールします</p>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では@mediaクエリを書いてテーブルカラムの表示を制御する必要がありますが、Tailwindではhidden sm:table-cellのようなクラス名で直接宣言できます。

コンテナークエリ (@container)

コンテナークエリは、ビューポートサイズではなく親コンテナのサイズに基づいてスタイルを適用します。Tailwind v4でサポートされている新機能です。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>コンテナークエリ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- コンテナークエリの基本 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">コンテナークエリの基本</h3>
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 小さいコンテナー -->
        <div class="@container bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
          <div class="flex flex-col @md:flex-row gap-4">
            <img src="https://picsum.photos/150/150" alt="アバター" class="w-20 h-20 @md:w-24 @md:h-24 rounded-full object-cover">
            <div>
              <h4 class="font-semibold @md:text-lg">ユーザー名</h4>
              <p class="text-gray-600 text-sm @md:text-base">これはコンテナークエリの例です。親コンテナの幅に基づいてレイアウトが変更されます。</p>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2">小さいコンテナー：縦レイアウト</p>
        </div>

        <!-- 大きいコンテナー -->
        <div class="@container bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
          <div class="flex flex-col @md:flex-row gap-4">
            <img src="https://picsum.photos/150/150" alt="アバター" class="w-20 h-20 @md:w-24 @md:h-24 rounded-full object-cover">
            <div class="flex-1">
              <h4 class="font-semibold @md:text-lg">ユーザー名</h4>
              <p class="text-gray-600 text-sm @md:text-base">コンテナークエリは @container クラスと @md: などのプレフィックスを使って、親コンテナのサイズに基づいてスタイルを適用します。</p>
              <div class="hidden @lg:flex gap-2 mt-2">
                <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs">タグ 1</span>
                <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">タグ 2</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2">大きいコンテナー：横レイアウトと追加タグ</p>
        </div>
      </div>
    </div>

    <!-- コンテナークエリカード -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">コンテナークエリカード</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=10" alt="カード画像" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">カードタイトル</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">コンテナークエリにより、コンポーネントはビューポートサイズではなく自身のコンテナサイズに応じてレイアウトを変更できます。</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">詳細を見る</button>
          </div>
        </div>
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=11" alt="カード画像" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">カードタイトル</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">これにより、異なるレイアウト間でもコンポーネントが正しく対応でき、より柔軟になります。</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">詳細を見る</button>
          </div>
        </div>
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=12" alt="カード画像" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">カードタイトル</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">@container クラスでコンテナをマークし、@sm: や @md: などのプレフィックスでスタイルを適用します。</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">詳細を見る</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来のコンテナークエリでは@container (min-width: 400px) { ... }メディアクエリを書く必要がありますが、Tailwindでは@containerクラスと@sm:、@md:などのプレフィックスで直接宣言できます。

💡 ポイント： コンテナークエリのブレークポイントプレフィックスは@xs:（20rem）、@sm:（24rem）、@md:（28rem）、@lg:（32rem）、@xl:（36rem）、@2xl:（42rem）です。

❓ よくある質問

Q レスポンシブプレフィックスの順序は重要ですか？
A はい。Tailwindはモバイルファースト戦略に従っているため、ブレークポイントプレフィックスは小さいものから大きいものへ適用されます。例えば、text-sm md:text-base lg:text-lgの場合、大きいブレークポイントが小さいブレークポイントのスタイルを上書きします。
Q 特定の画面サイズで要素を非表示にするにはどうすればよいですか？
A hiddenとblockの組み合わせを使用します。例えば、hidden md:blockは小画面で非表示、中画面で表示、block md:hiddenは小画面で表示、中画面で非表示になります。
Q コンテナークエリとメディアクエリの違いは何ですか？
A メディアクエリ（sm:、md:など）はビューポート幅に応答し、コンテナークエリ（@container、@sm:など）は親コンテナの幅に応答します。コンテナークエリは異なるレイアウト間で再利用されるコンポーネントに適しています。
Q ブレークポイントをカスタマイズするにはどうすればよいですか？
A Tailwind v4では@themeディレクティブを使用してブレークポイントをカスタマイズします。例：@theme { --breakpoint-tablet: 768px; }その後、tablet:プレフィックスを使用します。

📖 まとめ

📝 課題

  1. ⭐ レスポンシブナビバーを作成してください：小画面ではハンバーメニュー（block md:hidden）、中画面ではフルナビゲーション（hidden md:flex）を表示

  2. ⭐⭐ レスポンシブな製品カードグリッドを作成してください：小画面1列（grid-cols-1）、中画面2列（md:grid-cols-2）、大画面4列（lg:grid-cols-4）、ホバーでスケールアップ（hover:scale-105）

  3. ⭐⭐⭐ レスポンシブダッシュボードレイアウトを作成してください：コンテナークエリを使ってサイドバーコンポーネントを作成し、狭いコンテナではアイコンのみに折りたたみ（@lg:でテキスト表示）、広いコンテナではフルメニューテキストを展開

100%