Tailwind CSS でレスポンシブレイアウトを組む

概要

Tailwind CSS のブレークポイントプレフィックス（sm: / md: / lg:）を使い、モバイルファーストでレスポンシブなレイアウトを実装する。1カラム → 2カラム → 3カラムへの切り替えと、ナビゲーションの表示切り替えパターンを示す。

インストール

npm install tailwindcss

実装

レスポンシブグリッドレイアウト

// components/ProductGrid.tsx
type Product = {
  id: number;
  name: string;
  price: number;
};

type Props = {
  products: Product[];
};

export function ProductGrid({ products }: Props) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {products.map((product) => (
        <div
          key={product.id}
          className="rounded-lg border border-gray-200 p-4 shadow-sm"
        >
          <h3 className="font-semibold text-gray-900">{product.name}</h3>
          <p className="mt-1 text-sm text-gray-500">¥{product.price.toLocaleString()}</p>
        </div>
      ))}
    </div>
  );
}

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

// components/Header.tsx
"use client";

import { useState } from "react";

export function Header() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <header className="border-b border-gray-200 bg-white">
      <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
        <span className="text-lg font-bold">My App</span>

        {/* デスクトップ: 常に表示 */}
        <nav className="hidden gap-6 md:flex">
          <a href="/" className="text-sm text-gray-600 hover:text-gray-900">ホーム</a>
          <a href="/products" className="text-sm text-gray-600 hover:text-gray-900">製品</a>
          <a href="/about" className="text-sm text-gray-600 hover:text-gray-900">会社概要</a>
        </nav>

        {/* モバイル: ハンバーガーボタン */}
        <button
          className="md:hidden"
          onClick={() => setMenuOpen(!menuOpen)}
          aria-label="メニューを開く"
        >
          <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
              d={menuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
          </svg>
        </button>
      </div>

      {/* モバイルメニュー */}
      {menuOpen && (
        <nav className="flex flex-col gap-2 border-t border-gray-200 px-4 py-3 md:hidden">
          <a href="/" className="text-sm text-gray-600">ホーム</a>
          <a href="/products" className="text-sm text-gray-600">製品</a>
          <a href="/about" className="text-sm text-gray-600">会社概要</a>
        </nav>
      )}
    </header>
  );
}

ページレイアウト

// app/page.tsx
import { Header } from "@/components/Header";
import { ProductGrid } from "@/components/ProductGrid";

const products = [
  { id: 1, name: "商品 A", price: 1200 },
  { id: 2, name: "商品 B", price: 3400 },
  { id: 3, name: "商品 C", price: 5600 },
  { id: 4, name: "商品 D", price: 7800 },
  { id: 5, name: "商品 E", price: 9000 },
  { id: 6, name: "商品 F", price: 2100 },
];

export default function Page() {
  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <main className="mx-auto max-w-5xl px-4 py-8">
        <h1 className="mb-6 text-2xl font-bold text-gray-900">製品一覧</h1>
        <ProductGrid products={products} />
      </main>
    </div>
  );
}

ポイント

• Tailwind はモバイルファースト設計のため、プレフィックスなしのクラスがモバイル（最小）に適用され、sm: 以上で上書きされる
• grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 で 1 → 2 → 3 カラムのグリッドを実現できる
• hidden md:flex でモバイル非表示・デスクトップ表示を切り替える（md:hidden は逆）
• ブレークポイント: sm = 640px / md = 768px / lg = 1024px / xl = 1280px
• max-w-5xl mx-auto px-4 でコンテンツ幅とサイドパディングを統一するパターンが多い