レスポンシブデザイン
画面サイズに応じたスタイルを適用する
ブレークポイント
| プレフィックス | 最小幅 | デバイス |
|---|---|---|
| sm: | 640px | スマホ（横向き） |
| md: | 768px | タブレット |
| lg: | 1024px | ノートPC |
| xl: | 1280px | デスクトップ |
| 2xl: | 1536px | 大画面 |
モバイルファースト
重要：プレフィックスなしのクラスは全サイズに適用。 プレフィックス付きは「その幅以上」に適用されます。
基本的な使い方
小さい画面から順に指定
html
<!-- モバイル: 1列、タブレット: 2列、PC: 3列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- 解説 -->
<!-- grid-cols-1: 全サイズでデフォルト -->
<!-- md:grid-cols-2: 768px以上で2列 -->
<!-- lg:grid-cols-3: 1024px以上で3列 -->プレビュー
モバイル → 1列
768px〜 → 2列
1024px〜 → 3列
実践例
レスポンシブなカードグリッド
画面幅に応じて列数を変更
html
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div class="p-6 bg-white rounded-lg shadow">
カード1
</div>
<div class="p-6 bg-white rounded-lg shadow">
カード2
</div>
<!-- ... -->
</div>プレビュー
カード1
カード2
カード3
レスポンシブなナビゲーション
モバイルでハンバーガーメニュー
html
<nav class="flex items-center justify-between p-4">
<div class="text-xl font-bold">Logo</div>
<!-- モバイル: 表示 -->
<button class="md:hidden">
<svg class="w-6 h-6"><!-- ハンバーガーアイコン --></svg>
</button>
<!-- デスクトップ: 表示 -->
<div class="hidden md:flex gap-6">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</div>
</nav>プレビュー
レスポンシブなテキスト
画面サイズでフォントサイズを変更
html
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold">
レスポンシブな見出し
</h1>
<p class="text-sm md:text-base lg:text-lg">
本文テキスト
</p>プレビュー
レスポンシブな見出し
本文テキスト（画面幅で大きくなる）
レスポンシブなスペーシング
画面サイズでpaddingを変更
html
<!-- モバイルで小さく、PCで大きく -->
<div class="p-4 md:p-8 lg:p-12">
コンテンツ
</div>
<!-- コンテナ幅 -->
<div class="max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl mx-auto">
中央寄せコンテナ
</div>プレビュー
モバイル → p-4 (16px)
md → p-8 (32px)
lg → p-12 (48px)
表示・非表示の切り替え
hidden と block
画面サイズで表示を切り替え
html
<!-- モバイルのみ表示 -->
<div class="block md:hidden">
モバイル用コンテンツ
</div>
<!-- タブレット以上で表示 -->
<div class="hidden md:block">
PC用コンテンツ
</div>
<!-- 特定の範囲だけ表示 -->
<div class="hidden sm:block lg:hidden">
640px〜1024px で表示
</div>プレビュー
📱 block md:hidden (モバイルのみ)
💻 hidden md:block (タブレット以上)
Flexboxのレスポンシブ
縦並び→横並び
モバイルで縦、PCで横
html
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1">サイドバー</div>
<div class="flex-1">メインコンテンツ</div>
</div>
<!-- 順序の変更 -->
<div class="flex flex-col-reverse md:flex-row">
<div>後ろ（モバイル）/ 左（PC）</div>
<div>前（モバイル）/ 右（PC）</div>
</div>プレビュー
サイドバー
メインコンテンツ