レスポンシブデザイン
この章では、Tailwind CSS でレスポンシブデザインを実装する方法を学びます。
ブレークポイント
Tailwind CSS はモバイルファーストアプローチを採用しています。
| プレフィックス | 最小幅 | CSS |
|---|---|---|
sm | 40rem (640px) | @media (width >= 40rem) |
md | 48rem (768px) | @media (width >= 48rem) |
lg | 64rem (1024px) | @media (width >= 64rem) |
xl | 80rem (1280px) | @media (width >= 80rem) |
2xl | 96rem (1536px) | @media (width >= 96rem) |
モバイルファーストの考え方
<!-- モバイル時は 1 カラム、md 以上で 2 カラム、lg 以上で 3 カラム -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
ブレークポイントは「以上」を表す
クラスは「そのブレークポイント以上で適用」されます。md: は 768px 以上で有効です。
基本的な使い方
レイアウトの変更
<!-- モバイル: 縦並び、デスクトップ: 横並び -->
<div class="flex flex-col md:flex-row">
<div class="md:w-1/3">サイドバー</div>
<div class="md:w-2/3">メインコンテンツ</div>
</div>
サイズの変更
<!-- ブレークポイントごとにパディングを変更 -->
<div class="p-4 md:p-6 lg:p-8 xl:p-10">
レスポンシブなパディング
</div>
<!-- ブレークポイントごとにフォントサイズを変更 -->
<h1 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl">
レスポンシブな見出し
</h1>
表示・非表示
<!-- モバイルで非表示、md 以上で表示 -->
<div class="hidden md:block">
デスクトップのみ表示
</div>
<!-- モバイルで表示、md 以上で非表示 -->
<div class="block md:hidden">
モバイルのみ表示
</div>
max-* バリアント
最大幅を指定する max-* バリアント (v3.2 で導入) も利用できます。
<!-- 768px 未満でのみ適用 -->
<div class="max-md:hidden">768px 未満で非表示</div>
<!-- 1024px 未満でのみ適用 -->
<div class="max-lg:flex-col">1024px 未満で縦並び</div>
v4 のカスタムブレークポイント
v4 では CSS で直接ブレークポイントを定義できます。
@import "tailwindcss";
@theme {
--breakpoint-xs: 480px;
--breakpoint-3xl: 1920px;
}
<div class="xs:block 3xl:max-w-7xl">
カスタムブレークポイント
</div>
任意の値
<!-- 特定の幅でのみスタイルを適用 -->
<div class="min-[500px]:flex min-[800px]:grid">
任意のブレークポイント
</div>
<div class="max-[600px]:hidden">
600px 未満で非表示
</div>
実践例
ナビゲーション
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between h-16">
<!-- ロゴ -->
<div class="flex items-center">
<a href="/" class="font-bold text-xl">Logo</a>
</div>
<!-- デスクトップメニュー -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
<a href="#" class="text-gray-600 hover:text-gray-900">About</a>
<a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
</div>
<!-- モバイルメニューボタン -->
<div class="flex items-center md:hidden">
<button class="p-2">
<svg class="w-6 h-6">...</svg>
</button>
</div>
</div>
</div>
</nav>
ヒーローセクション
<section class="py-12 md:py-20 lg:py-28 px-4">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold">
レスポンシブヒーロー
</h1>
<p class="mt-4 md:mt-6 text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">
様々な画面サイズに対応したヒーローセクション
</p>
<div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
<button class="px-6 py-3 bg-blue-500 text-white rounded-lg">
始める
</button>
<button class="px-6 py-3 border border-gray-300 rounded-lg">
詳しく見る
</button>
</div>
</div>
</section>
カードグリッド
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
<div class="bg-white rounded-lg shadow-sm p-4 md:p-6">
<img src="..." class="w-full aspect-video object-cover rounded-sm" />
<h3 class="mt-4 text-lg md:text-xl font-bold">カード 1</h3>
<p class="mt-2 text-sm md:text-base text-gray-600">説明...</p>
</div>
<!-- 繰り返し -->
</div>
2 カラムレイアウト
<div class="flex flex-col lg:flex-row gap-8">
<!-- メインコンテンツ -->
<main class="lg:w-2/3 xl:w-3/4">
<article class="prose max-w-none">
コンテンツ...
</article>
</main>
<!-- サイドバー -->
<aside class="lg:w-1/3 xl:w-1/4">
<div class="lg:sticky lg:top-4">
サイドバーコンテンツ
</div>
</aside>
</div>
テーブル (モバイル対応)
<!-- デスクトップ: テーブル表示 -->
<table class="hidden md:table w-full">
<thead>
<tr class="border-b">
<th class="text-left p-4">名前</th>
<th class="text-left p-4">メール</th>
<th class="text-left p-4">ステータス</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="p-4">田中太郎</td>
<td class="p-4">tanaka@example.com</td>
<td class="p-4">アクティブ</td>
</tr>
</tbody>
</table>
<!-- モバイル: カード表示 -->
<div class="md:hidden space-y-4">
<div class="bg-white rounded-lg shadow-sm p-4">
<div class="font-bold">田中太郎</div>
<div class="text-sm text-gray-600">tanaka@example.com</div>
<div class="mt-2">
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-sm">
アクティブ
</span>
</div>
</div>
</div>
フッター
<footer class="bg-gray-900 text-white py-12 px-4">
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2 md:col-span-1">
<h3 class="font-bold text-lg mb-4">Company</h3>
<p class="text-gray-400 text-sm">
会社説明...
</p>
</div>
<div>
<h3 class="font-bold mb-4">Product</h3>
<ul class="space-y-2 text-gray-400 text-sm">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">Resources</h3>
<ul class="space-y-2 text-gray-400 text-sm">
<li><a href="#">Blog</a></li>
<li><a href="#">Docs</a></li>
</ul>
</div>
<div>
<h3 class="font-bold mb-4">Legal</h3>
<ul class="space-y-2 text-gray-400 text-sm">
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
レスポンシブのベストプラクティス
1. モバイルファーストで設計
<!-- Good: モバイルファースト -->
<div class="text-sm md:text-base lg:text-lg">
テキスト
</div>
<!-- Bad: デスクトップファースト -->
<div class="text-lg max-lg:text-base max-md:text-sm">
テキスト
</div>
2. コンテンツに基づいたブレークポイント
<!-- レイアウトが崩れる箇所でブレークポイントを設定 -->
<div class="grid grid-cols-1 min-[600px]:grid-cols-2 min-[900px]:grid-cols-3">
...
</div>
3. 過度な変更を避ける
<!-- Good: 必要最小限の変更 -->
<div class="p-4 md:p-8">...</div>
<!-- Avoid: 過度な変更 -->
<div class="p-2 sm:p-3 md:p-4 lg:p-5 xl:p-6 2xl:p-8">...</div>
まとめ
- モバイルファーストアプローチ (小→大)
sm:/md:/lg:/xl:/2xl:でブレークポイント指定max-*バリアントでブレークポイント未満の条件を指定可能 (v3.2 以降)hiddenとblock/flexで表示切り替え- レイアウト、サイズ、間隔をレスポンシブに調整
次に読む
- 状態バリアント —
hover/focus等のインタラクティブな状態 - コンテナクエリ — ビューポートではなくコンテナサイズで切り替える
- Tailwind CSS ガイド 目次 — 全 18 章の構成に戻る