2025年人気No.1のNext.jsで、最新ツールとウェブを作る！ | エピソード3 スタイリングの基本

## 目標
- Next.jsでのスタイリングの方法を理解する。
- CSS Modules、Tailwind CSS、Styled-Componentsの特徴と使い方を学ぶ。
- Tailwind CSSをプロジェクトに統合し、デザインを適用する。
- 共通レイアウトを`layout.tsx`で作成する。

---

## 1. Next.jsでのスタイリングの選択肢
Next.jsでは、さまざまな方法でスタイリングが可能です。それぞれの特徴を見てみましょう：
- **CSS Modules**: スコープ付きCSSで、クラス名の衝突を防ぐ。シンプルで軽量。
- **Tailwind CSS**: ユーティリティファーストのCSSフレームワーク。迅速なデザインが可能。
- **Styled-Components**: JavaScript内でCSSを記述。コンポーネント単位のスタイリングに最適。

このエピソードでは、特に**Tailwind CSS**に焦点を当てます。2025年のトレンドとして、高速開発と直感的なデザインが求められており、Tailwindが最適です。

---

## 2. Tailwind CSSのインストールと設定
エピソード1でプロジェクト作成時にTailwind CSSを選択したので、既に使える状態です。確認と基本設定をしてみましょう。

### 手順：
1. **設定ファイルの確認**：
   - `tailwind.config.js`と`postcss.config.js`がプロジェクトルートにあることを確認。
2. **グローバルCSSの設定**：
   - `app/globals.css`を開き、以下が含まれているか確認：
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```

**ヒント**：もしTailwindが未設定の場合、`npx tailwindcss init -p`で設定ファイルを生成し、公式ドキュメントに従ってインストールしてください。

---

## 3. Tailwind CSSを使ったページデザイン
Tailwindを使って、既存のページにスタイルを追加します。

### Homeページのスタイリング：
`app/page.tsx`を以下のように編集：
```tsx
import Link from 'next/link';

export default function Home() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
      <h1 className="text-4xl font-bold text-blue-600 mb-4">Next.jsからのHello World!</h1>
      <p className="text-lg text-gray-700 mb-6">2025年のNext.js学習シリーズへようこそ。</p>
      <nav className="space-x-4">
        <Link href="/about" className="text-blue-500 hover:underline">Aboutへ</Link>
        <Link href="/contact" className="text-blue-500 hover:underline">Contactへ</Link>
        <Link href="/post/1" className="text-blue-500 hover:underline">投稿 #1へ</Link>
      </nav>
    </div>
  );
}
```

### Aboutページのスタイリング：
`app/about/page.tsx`を編集：
```tsx
export default function About() {
  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-3xl font-semibold text-green-600 mb-4">Aboutページ</h1>
      <p className="text-gray-600">これはNext.jsで作ったAboutページです。Tailwindで簡単に美しく。</p>
    </div>
  );
}
```

**確認**：
- `npm run dev`でサーバーを起動し、ブラウザでデザインが適用されているか確認。

---

## 4. 共通レイアウトの作成
すべてのページに共通するレイアウト（ヘッダーやフッターなど）を`app/layout.tsx`で定義します。

### 手順：
1. `app/layout.tsx`を以下のように編集：
   ```tsx
   import './globals.css';
   import Link from 'next/link';

   export const metadata = {
     title: 'Next.js 2025シリーズ',
     description: '2025年のウェブ開発を学ぶ',
   };

   export default function RootLayout({ children }) {
     return (
       <html lang="ja">
         <body className="font-sans antialiased">
           <header className="bg-blue-800 text-white p-4">
             <nav className="max-w-4xl mx-auto flex justify-between">
               <Link href="/" className="text-xl font-bold">ホーム</Link>
               <div className="space-x-4">
                 <Link href="/about" className="hover:underline">About</Link>
                 <Link href="/contact" className="hover:underline">Contact</Link>
               </div>
             </nav>
           </header>
           <main>{children}</main>
           <footer className="bg-gray-200 p-4 text-center text-gray-600">
             © 2025 Next.js学習シリーズ
           </footer>
         </body>
       </html>
     );
   }
   ```

**確認**：
- すべてのページにヘッダーとフッターが表示され、デザインが統一されていることを確認。

---

## 実践：Tailwindでデザインされたウェブサイト
- **Home**: 中央揃えのモダンなデザイン。
- **About**: シンプルで読みやすいレイアウト。
- **共通レイアウト**: ヘッダーとフッターで一貫性を持たせる。

Tailwindのクラスを自由に試して、好みのデザインに調整してみてください。

---

## エピソード3の終了
- Next.jsでのスタイリングの選択肢とTailwind CSSの使い方を学びました。
- ページに美しいデザインを追加し、共通レイアウトを作成しました。

**次回のエピソード**：データ取得とAPIルートの作成を学び、動的なコンテンツを扱います。

---

この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！