Tailwind CSS レスポンシブデザイン & ダークモード (2025/2026)

レスポンシブデザイン

モバイルファースト的アプローチ (2025/2026 業界標準)

Tailwind はモバイルファースト型のブレークポイントシステムを採用しています。世界的なウェブトラフィックの 60% 以上がモバイルデバイスからであり、Google のモバイルファースト インデックスに対応するため、このアプローチは必須です。

重要な原則: プレフィックスなしのユーティリティはすべての画面サイズに適用されます。ブレークポイント プレフィックスはそのサイズ以上で適用されます。

<!-- 正解: モバイルファースト (段階的拡張) -->
<div class="text-sm md:text-base lg:text-lg">...</div>

<!-- 間違い: デスクトップファースト的思考 -->
<div class="lg:text-lg md:text-base text-sm">...</div>

デフォルトブレークポイント

プレフィックス	最小幅	一般的デバイス	CSS メディアクエリ
(なし)	0px	すべてのモバイル電話	すべてのサイズ
sm:	640px (40rem)	大型スマートフォン、小型タブレット	@media (min-width: 640px)
md:	768px (48rem)	タブレット (縦向き)	@media (min-width: 768px)
lg:	1024px (64rem)	タブレット (横向き)、ノートパソコン	@media (min-width: 1024px)
xl:	1280px (80rem)	デスクトップ	@media (min-width: 1280px)
2xl:	1536px (96rem)	大型デスクトップ	@media (min-width: 1536px)

2025/2026 デバイス対応

テストに推奨される一般的なデバイスサイズ:

• 320px: 古い iPhone、最小サポートサイズ
• 375px: モダン iPhone 標準 (~モバイルの 17%)
• 390-430px: モダン大型スマートフォン (~モバイルの 35%)
• 768px: iPad 縦向き
• 1024px: iPad 横向き、ノートパソコン
• 1280px: 標準的なノートパソコン/デスクトップ
• 1440px: 大型デスクトップ
• 1920px: フルHD ディスプレイ

カスタムブレークポイント

@theme {
  /* 特定のコンテンツニーズに向けたカスタムブレークポイントを追加 */
  --breakpoint-xs: 20rem;   /* 320px - 非常に小さいデバイス */
  --breakpoint-3xl: 100rem; /* 1600px */
  --breakpoint-4xl: 120rem; /* 1920px - フルHD */

  /* コンテンツに基づいて既存のブレークポイントをオーバーライド */
  --breakpoint-sm: 36rem;   /* 576px - コンテンツにスペースが必要な場合 */
  --breakpoint-lg: 62rem;   /* 992px - 一般的なコンテンツ幅 */
}

使用方法:

<div class="grid xs:grid-cols-2 3xl:grid-cols-6">
  <!-- カスタムブレークポイントは組み込みのものと同じように機能 -->
</div>

コンテンツドリブン型ブレークポイント (2025 ベストプラクティス)

デバイスをターゲットにするのではなく、コンテンツがブレークポイントを決定します:

@theme {
  /* デバイス仕様ではなく、コンテンツニーズに基づく */
  --breakpoint-prose: 65ch;  /* 最適な読みやすさの幅 */
  --breakpoint-content: 75rem; /* メインコンテンツ最大値 */
}

様々な幅でデザインをテストし、レイアウトが崩れるところにブレークポイントを追加してください。

レスポンシブ例

レスポンシブグリッド

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

レスポンシブタイポグラフィ

<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 leading-relaxed">
  レスポンシブ段落テキスト
</p>

レスポンシブスペーシング

<section class="py-8 md:py-12 lg:py-16 px-4 md:px-8 lg:px-12">
  <div class="max-w-4xl mx-auto">
    レスポンシブパディング付きコンテンツ
  </div>
</section>

レスポンシブナビゲーション

<nav class="flex flex-col md:flex-row items-center justify-between">
  <div class="hidden md:flex gap-4">
    <!-- デスクトップナビゲーション -->
  </div>
  <button class="md:hidden">
    <!-- モバイルメニューボタン -->
  </button>
</nav>

画面サイズに基づいて表示/非表示

<!-- モバイルで非表示、デスクトップで表示 -->
<div class="hidden md:block">デスクトップのみ</div>

<!-- モバイルで表示、デスクトップで非表示 -->
<div class="block md:hidden">モバイルのみ</div>

<!-- ブレークポイントごとに異なるコンテンツ -->
<span class="sm:hidden">XS</span>
<span class="hidden sm:inline md:hidden">SM</span>
<span class="hidden md:inline lg:hidden">MD</span>
<span class="hidden lg:inline xl:hidden">LG</span>
<span class="hidden xl:inline 2xl:hidden">XL</span>
<span class="hidden 2xl:inline">2XL</span>

コンテナクエリ (v4) - 2025 ゲームチェンジャー

コンテナクエリはコンポーネントレベルのレスポンシブを実現し、ビューポートサイズに依存しません。2025 の再利用可能なコンポーネントに必須です。

@plugin "@tailwindcss/container-queries";

<!-- 親をクエリコンテナとしてマーク -->
<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:gap-8">
    <!-- ビューポートではなくコンテナサイズに応答 -->
  </div>
</div>

<!-- 複数の文脈向けの名前付きコンテナ -->
<div class="@container/card">
  <div class="@lg/card:grid-cols-2 grid grid-cols-1">
    <!-- 特に 'card' コンテナに応答 -->
  </div>
</div>

コンテナクエリ ブレークポイント

クラス	最小幅	ユースケース
@xs	20rem (320px)	小型ウィジェット
@sm	24rem (384px)	コンパクトカード
@md	28rem (448px)	標準カード
@lg	32rem (512px)	広いカード
@xl	36rem (576px)	フルサイズコンポーネント
@2xl	42rem (672px)	大型コンテナ
@3xl	48rem (768px)	ページセクション

コンテナクエリ vs ビューポートクエリの使い分け

コンテナクエリ	ビューポートクエリ
再利用可能なコンポーネント	ページレベルレイアウト
様々な文脈でのカード	ナビゲーションバー
サイドバーウィジェット	ヒーローセクション
CMS/埋め込みコンテンツ	フルサイズセクション

最大幅ブレークポイント

特定のサイズ以下の画面をターゲット:

<!-- md 未満の画面 (< 768px) でのみ表示 -->
<div class="md:hidden">小さい画面のみ</div>

<!-- カスタム最大幅メディアクエリ -->
<div class="[@media(max-width:600px)]:text-sm">
  カスタム最大幅
</div>

ダークモード

戦略: メディア (デフォルト)

ダークモードはユーザーの OS 設定に従い prefers-color-scheme を使用します:

@import "tailwindcss";
/* 追加の設定は不要 */

<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-white">タイトル</h1>
  <p class="text-gray-600 dark:text-gray-300">コンテンツ</p>
</div>

戦略: セレクタ (手動トグル)

CSS クラスでダークモードをコントロール:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

<!-- .dark クラスを html または body に追加してダークモードを有効化 -->
<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-900">
      コンテンツ
    </div>
  </body>
</html>

JavaScript トグル

// シンプルなトグル
function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

// localStorage による永続化
function initDarkMode() {
  const isDark = localStorage.getItem('darkMode') === 'true' ||
    (!localStorage.getItem('darkMode') &&
     window.matchMedia('(prefers-color-scheme: dark)').matches);

  document.documentElement.classList.toggle('dark', isDark);
}

function toggleDarkMode() {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.setItem('darkMode', isDark);
}

// ページロード時に初期化
initDarkMode();

3 種類のトグル (ライト/ダーク/システム)

const themes = ['light', 'dark', 'system'];

function setTheme(theme) {
  localStorage.setItem('theme', theme);
  applyTheme();
}

function applyTheme() {
  const theme = localStorage.getItem('theme') || 'system';
  const isDark = theme === 'dark' ||
    (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);

  document.documentElement.classList.toggle('dark', isDark);
}

// システム設定の変更をリッスン
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', () => {
    if (localStorage.getItem('theme') === 'system') {
      applyTheme();
    }
  });

applyTheme();

データ属性戦略

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

<html data-theme="dark">
  <body>
    <div class="bg-white dark:bg-gray-900">コンテンツ</div>
  </body>
</html>

Next.js でのダークモード (next-themes)

npm install next-themes

// app/providers.tsx
'use client';

import { ThemeProvider } from 'next-themes';

export function Providers({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {children}
    </ThemeProvider>
  );
}

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

// components/ThemeToggle.tsx
'use client';

import { useTheme } from 'next-themes';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      テーマを切り替え
    </button>
  );
}

ダークモードカラーパレット

<!-- テキスト色 -->
<p class="text-gray-900 dark:text-gray-100">主要テキスト</p>
<p class="text-gray-600 dark:text-gray-400">補助テキスト</p>
<p class="text-gray-400 dark:text-gray-500">ミュート済みテキスト</p>

<!-- 背景色 -->
<div class="bg-white dark:bg-gray-900">ページ背景</div>
<div class="bg-gray-50 dark:bg-gray-800">カード背景</div>
<div class="bg-gray-100 dark:bg-gray-700">昇格した背景</div>

<!-- ボーダー色 -->
<div class="border border-gray-200 dark:border-gray-700">ボーダー要素</div>

<!-- インタラクティブ要素 -->
<button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">
  ボタン
</button>

CSS 変数を使用したダークモード

@theme {
  /* ライトモードの色 (デフォルト) */
  --color-bg-primary: oklch(1 0 0);
  --color-bg-secondary: oklch(0.98 0 0);
  --color-text-primary: oklch(0.15 0 0);
  --color-text-secondary: oklch(0.4 0 0);
}

/* ダークモードのオーバーライド */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: oklch(0.15 0 0);
    --color-bg-secondary: oklch(0.2 0 0);
    --color-text-primary: oklch(0.95 0 0);
    --color-text-secondary: oklch(0.7 0 0);
  }
}

<div class="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)]">
  セマンティック色
</div>

タイポグラフィプラグイン ダークモード

<article class="prose dark:prose-invert">
  <!-- マークダウンコンテンツは自動的にダークモードに対応 -->
</article>

レスポンシブとダークモードの組み合わせ

<!-- 画面サイズとテーマの両方に基づいた異なるレイアウトと色 -->
<div class="
  grid grid-cols-1 md:grid-cols-2
  bg-white dark:bg-gray-900
  p-4 md:p-8
  text-gray-900 dark:text-white
">
  <div class="hidden dark:md:block">
    ダークモードで md+ 画面でのみ表示
  </div>
</div>

ベストプラクティス (2025/2026)

1. モバイルから始めて拡張

<!-- 正解: モバイルファースト進行 -->
<div class="text-sm md:text-base lg:text-lg">

<!-- 間違い: デスクトップファースト的思考 (コード増加、バグ増加) -->
<div class="lg:text-lg md:text-base text-sm">

2. タッチフレンドリーなインタラクティブ要素

WCAG 2.2 では最小 24x24px が必須ですが、44x44px が推奨です:

<!-- タッチフレンドリーなボタン (44px 最小) -->
<button class="min-h-11 min-w-11 px-4 py-2.5">
  クリック
</button>

<!-- タッチフレンドリーなナビゲーションリンク -->
<a href="#" class="block py-3 px-4 min-h-11">
  ナビゲーション項目
</a>

<!-- タッチターゲット間の適切な間隔 -->
<div class="flex gap-3">
  <button class="min-h-11 px-4 py-2">ボタン 1</button>
  <button class="min-h-11 px-4 py-2">ボタン 2</button>
</div>

3. フルイド タイポグラフィ (ブレークポイント跳躍を排除)

@theme {
  --text-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --text-fluid-lg: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  --text-fluid-xl: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

<h1 class="text-fluid-xl font-bold">スムーズにスケールする見出し</h1>
<p class="text-fluid-base leading-relaxed">スムーズにスケールする本文テキスト。</p>

4. セマンティックダークモード色を使用

@theme {
  /* 生の色ではなくセマンティックな名前を使用 */
  --color-surface: oklch(1 0 0);
  --color-surface-dark: oklch(0.15 0 0);
  --color-on-surface: oklch(0.1 0 0);
  --color-on-surface-dark: oklch(0.95 0 0);
}

5. すべてのブレークポイントをテスト

開発時に debug-screens プラグインを使用:

npm install -D @tailwindcss/debug-screens

@plugin "@tailwindcss/debug-screens";

6. コンポーネントで繰り返しを削減

/* components.css */
@layer components {
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm;
  }

  .section {
    @apply py-12 md:py-16 lg:py-24;
  }
}

7. カラーコントラストを検討

両モードで十分なコントラストを確保 (WCAG 2.2):

• 通常テキスト: 最小 4.5:1 コントラスト比
• 大型テキスト (18pt+): 最小 3:1 コントラスト比
• インタラクティブ要素: 隣接する色に対して 3:1

<!-- 両モードで良好なコントラスト -->
<button class="
  bg-blue-600 text-white
  dark:bg-blue-500 dark:text-white
  hover:bg-blue-700 dark:hover:bg-blue-400
  /* アクセシビリティ用フォーカスリング */
  focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
">
  アクション
</button>

8. 減速モーション設定を尊重

モーション削減を好むユーザーに対応:

<div class="
  transition-transform duration-300
  hover:scale-105
  motion-reduce:transition-none
  motion-reduce:hover:scale-100
">
  モーション設定に対応
</div>

9. パフォーマンス最適化レスポンシブ画像

<!-- 下部の画像は遅延読み込み -->
<img
  src="image.jpg"
  alt="説明"
  loading="lazy"
  class="w-full h-auto"
/>

<!-- レスポンシブ srcset -->
<img
  src="medium.jpg"
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(min-width: 1024px) 50vw, 100vw"
  alt="レスポンシブ画像"
  loading="lazy"
  class="w-full h-auto"
/>

10. セーフエリア処理 (ノッチ付きデバイス)

@utility safe-area-pb {
  padding-bottom: env(safe-area-inset-bottom);
}

<!-- ボトムナビゲーションはデバイスノッチに対応 -->
<nav class="fixed bottom-0 inset-x-0 safe-area-pb bg-white border-t">
  ナビゲーション
</nav>