レスポンシブデザインの基本概念
レスポンシブデザインとは、スマートフォン・タブレット・PCなど、様々な画面サイズに対してレイアウトが最適に表示されるよう設計することです。現在のWebアクセスの60%以上がモバイルデバイスからであり、レスポンシブ対応は必須要件となっています。
本記事では、Tailwind CSSを使ったレスポンシブ実装を実践的に解説します。
Tailwindのブレークポイント体系
Tailwind CSSはモバイルファーストの設計で、プレフィックスなしのクラスが最小サイズ（〜640px）に適用され、プレフィックスありが指定サイズ以上に適用されます。
プレフィックスなし → 全サイズ（モバイル〜）
sm: → 640px 以上
md: → 768px 以上
lg: → 1024px 以上
xl: → 1280px 以上
2xl: → 1536px 以上
ナビゲーションのレスポンシブ対応
<!-- モバイル：ハンバーガーメニュー、PC：横並びナビ -->
<nav class="bg-white shadow-sm">
<div class="max-w-6xl mx-auto px-4">
<div class="flex items-center justify-between h-16">
<!-- ロゴ -->
<a href="/" class="text-xl font-bold text-gray-800">WR</a>
<!-- PCナビゲーション（md以上で表示） -->
<ul class="hidden md:flex gap-8 text-sm text-gray-600">
<li><a href="/service" class="hover:text-gray-900 transition-colors">サービス</a></li>
<li><a href="/case" class="hover:text-gray-900 transition-colors">開発実績</a></li>
<li><a href="/company" class="hover:text-gray-900 transition-colors">会社案内</a></li>
<li><a href="/contact" class="hover:text-gray-900 transition-colors">お問い合わせ</a></li>
</ul>
<!-- ハンバーガーボタン（md未満で表示） -->
<button
class="md:hidden p-2 rounded-md text-gray-600 hover:text-gray-900"
x-on:click="open = !open"
>
<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>
</div>
<!-- モバイルメニュー -->
<div class="md:hidden pb-4" x-show="open" x-cloak>
<ul class="flex flex-col gap-4 text-sm text-gray-600">
<li><a href="/service" class="block py-2 hover:text-gray-900">サービス</a></li>
<li><a href="/case" class="block py-2 hover:text-gray-900">開発実績</a></li>
<li><a href="/company" class="block py-2 hover:text-gray-900">会社案内</a></li>
<li><a href="/contact" class="block py-2 hover:text-gray-900">お問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
グリッドレイアウトのレスポンシブ対応
<!--
モバイル：1列
タブレット（md）：2列
PC（lg）：3列
-->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-sm p-6">
<h3 class="font-bold text-lg mb-2">Webシステム開発</h3>
<p class="text-gray-600 text-sm leading-relaxed">
PHP/LaravelとPostgreSQLを使った業務システム・ECサイト・予約システムの開発
</p>
</div>
<!-- ... -->
</div>
フレックスレイアウトのレスポンシブ対応
<!-- ヒーローセクション：モバイルは縦積み、PCは横並び -->
<section class="flex flex-col lg:flex-row items-center gap-12 py-20">
<div class="w-full lg:w-1/2">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
システム開発で<br class="hidden md:block">ビジネスを加速する
</h1>
<p class="mt-6 text-gray-600 leading-relaxed md:text-lg">
PHP・Python・Node.jsを軸に、Webシステム開発から<br>
データ分析・EC自動化まで対応します。
</p>
<a href="/contact"
class="inline-block mt-8 px-8 py-4 bg-amber-700 text-white rounded-full
text-sm font-medium hover:bg-amber-800 transition-colors">
お問い合わせ
</a>
</div>
<div class="w-full lg:w-1/2">
<img src="/images/hero.webp"
alt="開発イメージ"
class="w-full rounded-2xl shadow-lg"
loading="eager">
</div>
</section>
テキストサイズのレスポンシブ対応
<!-- レスポンシブなタイポグラフィ -->
<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 text-gray-600">
説明テキスト
</p>
スペーシングのレスポンシブ対応
<!-- モバイルはコンパクト、PCはゆったり -->
<section class="py-12 md:py-20 lg:py-32">
<div class="max-w-6xl mx-auto px-4 md:px-6 lg:px-8">
<!-- コンテンツ -->
</div>
</section>
カスタムブレークポイント
tailwind.config.js でプロジェクト固有のブレークポイントを追加できます。
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xs': '480px', // 追加
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
},
}
コンテナクエリ（Tailwind v3.2+）
親要素のサイズに応じてスタイルを変えるコンテナクエリも使えます。
<div class="@container">
<div class="@sm:flex @sm:gap-4">
<!-- 親が640px以上のときflex横並び -->
</div>
</div>
実装のチェックリスト
- Chrome DevToolsのデバイスシミュレータで各ブレークポイントを確認
- iPhone SE（375px）・iPhone 14（390px）・iPad（768px）・1280px・1920pxで確認
- タッチターゲット（ボタン・リンク）が44px以上あるか確認
- フォントサイズが16px以上か確認（モバイルでの自動ズームを防ぐ）
- 水平スクロールが発生していないか確認
まとめ
Tailwind CSSのブレークポイントプレフィックスを使えば、メディアクエリを直接書かずに直感的なレスポンシブ対応が可能です。弊社ではすべてのWebプロジェクトでモバイルファーストのレスポンシブデザインを実装しています。
Webサイト・Webアプリの開発についてはお気軽にご相談ください。
