CSS基礎

🎨 スタイリング戦略

Next.jsは、アプリケーションのスタイリングに複数の方法を提供します。プロジェクトの規模やチームの好みに応じて最適な方法を選択できます。

1. CSS Modules

CSS Modulesは、コンポーネントごとに独立したスタイルを適用するための推奨される方法です。各CSSファイルは自動的に一意のクラス名を生成するため、クラス名の衝突を防ぐことができます。

利点: グローバルな名前空間の汚染を防ぎ、コンポーネントの再利用性を高めます。
使用法: ファイル名を.module.cssで終わらせます。

.button {
  background-color: blue;
  color: white;
}

import styles from '../styles/Button.module.css';

function Button() {
  return <button className={styles.button}>Click me</button>;
}

2. Styled-Components / Emotion

Styled-ComponentsやEmotionといったCSS-in-JSライブラリを使用すると、スタイルをJavaScriptコード内に直接記述できます。これにより、コンポーネントとスタイルを1つのファイルにまとめることができます。

利点: コンポーネントのプロパティに基づいて動的なスタイルを適用するのが簡単です。JavaScriptの機能（変数、関数など）をスタイルに利用できます。
使用法: ライブラリをインストールし、コンポーネントを作成します。

import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  border: none;
`;

function Button({ primary }) {
  return <StyledButton primary={primary}>Styled Button</StyledButton>;
}

3. Tailwind CSS

Tailwind CSSは、ユーティリティファーストのCSSフレームワークです。事前に定義されたクラス（例：flex, text-center, p-4）をHTMLに直接適用することで、素早くデザインを構築できます。

利点: カスタムCSSを書く必要がほとんどなく、開発スピードが大幅に向上します。ビルド時に不要なCSSが削除されるため、最終的なファイルサイズが非常に小さくなります。
使用法: クラス名を直接HTMLに追加します。

<button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Tailwind Button
</button>

📦 UIコンポーネントライブラリ

4. MUI (Material-UI)

MUIは、GoogleのMaterial Designに基づいた包括的なReactコンポーネントライブラリです。豊富なコンポーネントと強力なテーマシステムを提供します。

利点: 多数のコンポーネント、強力なテーマシステム、アクセシビリティ対応
注意点: バンドルサイズが大きめ、独自のスタイリングシステムを持つ

Next.js App Routerでのセットアップ

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material-nextjs

import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from './theme';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <AppRouterCacheProvider>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            {children}
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

// theme.ts
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

export default theme;

注意点:

AppRouterCacheProviderは、サーバーサイドレンダリング時のスタイル処理に必要です
CssBaselineは、ブラウザ間のスタイルの違いを統一します（MUIのリセットCSS）

5. shadcn/ui

shadcn/uiは、Tailwind CSSとRadix UIを基盤とした再利用可能なコンポーネント集です。コンポーネントのコードを直接プロジェクトに取り込む方式を採用しており、高いカスタマイズ性を提供します。

利点: 高いカスタマイズ性、Tailwind CSSとの親和性、コンポーネントの所有権
注意点: コンポーネントのコードをプロジェクトに含める必要がある

Next.js App Routerでのセットアップ

# 新規プロジェクトの場合
npx create-next-app@latest my-app --typescript --tailwind --eslint

# 既存プロジェクトの場合
npx shadcn-ui@latest init

初期化時に、以下の設定が自動的に行われます：

Tailwind CSSの設定
components.jsonの作成
パスエイリアスの設定（@/componentsなど）
必要な依存関係のインストール

// components.json（自動生成）
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "slate"
  }
}

// コンポーネントの追加
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog

使用例:

// components/ui/button.tsx（自動生成される）
import { Button } from "@/components/ui/button"

export default function MyPage() {
  return (
    <div>
      <Button variant="default">Click me</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  )
}

注意点:

shadcn/uiはTailwind CSSが必要です
コンポーネントのコードがプロジェクトに含まれるため、完全にカスタマイズ可能です
TypeScriptとApp Router（RSC）を前提としています

🔧 リセットCSSとブラウザ間の違い

CSS Reset / Normalize.css

ブラウザによって、デフォルトのスタイル（マージン、パディング、フォントサイズなど）が異なります。リセットCSSを使用することで、これらの違いを統一し、一貫した見た目を実現できます。

主要なリセットCSSライブラリ

Normalize.css: ブラウザ間の違いを調整しつつ、有用なデフォルトスタイルは保持
CSS Reset: すべてのスタイルを完全にリセット（より強力だが、デフォルトスタイルも失われる）
Tailwind CSSの@tailwind base: Tailwind CSSに組み込まれたリセットCSS

Tailwind CSSとNormalize.cssの併用

npm install normalize.css

@import 'normalize.css';

/* Tailwind CSSディレクティブ（Normalize.cssの後に記述） */
@tailwind base;
@tailwind components;
@tailwind utilities;

順序が重要:

normalize.cssを最初にインポートすることで、ブラウザ間の違いを統一
その後、Tailwind CSSの@tailwind baseで、さらに統一されたベーススタイルを適用

MUIのCssBaseline

MUIを使用する場合、CssBaselineコンポーネントがリセットCSSの役割を果たします。

import CssBaseline from '@mui/material/CssBaseline';

<ThemeProvider theme={theme}>
  <CssBaseline />
  {children}
</ThemeProvider>

注意点:

MUIとNormalize.cssを同時に使用すると、スタイルの競合が発生する可能性があります
MUIを使用する場合は、CssBaselineのみを使用することを推奨します

ブラウザ間の主な違いと対応方法

1. ボックスモデルの違い

問題:

古いブラウザ（IE）では、box-sizingのデフォルトがcontent-boxでした
現代のブラウザでは、通常border-boxが推奨されます

解決策:

/* Tailwind CSSは自動的に適用 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* または、Tailwind CSSの@tailwind baseを使用 */

2. フォントの違い

問題:

ブラウザによって、デフォルトフォントファミリーが異なります
フォントサイズの計算方法も異なる場合があります

解決策:

/* Tailwind CSSのベーススタイル */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

3. フォーム要素のスタイリング

問題:

ブラウザによって、<input>、<select>、<button>などの見た目が大きく異なります

解決策:

UIコンポーネントライブラリ（MUI、shadcn/ui）を使用
カスタムCSSで統一されたスタイルを適用

/* カスタムリセット */
input, select, button {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

4. FlexboxとGridの対応

問題:

古いブラウザでは、FlexboxやGridが完全にサポートされていない場合があります

解決策:

Autoprefixerを使用（Tailwind CSSに含まれています）
PostCSSで自動的にベンダープレフィックスを追加

// postcss.config.js（Tailwind CSSと一緒に自動設定）
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

🔄 複数のスタイリング手法の組み合わせ

組み合わせのベストプラクティス

1. Tailwind CSS + shadcn/ui（推奨）

shadcn/uiは、Tailwind CSSを前提として設計されているため、最も相性が良い組み合わせです。

メリット:

完全にカスタマイズ可能
バンドルサイズが小さい
開発速度が速い

構成例:

@tailwind base;
@tailwind components;
@tailwind utilities;

// shadcn/uiのコンポーネントは、Tailwindのクラスを使用
// components/ui/button.tsx

2. MUI単体使用

MUIは包括的なコンポーネントライブラリであり、単体で使用することを推奨します。

メリット:

豊富なコンポーネント
強力なテーマシステム
アクセシビリティ対応

注意点:

Tailwind CSSと併用すると、スタイルの競合が発生する可能性があります
バンドルサイズが大きくなりがちです

3. Tailwind CSS + CSS Modules（ハイブリッド）

特定のコンポーネントのみCSS Modulesを使用し、それ以外はTailwind CSSを使用する方法です。

使用例:

// 複雑なアニメーションなど、Tailwindでは表現が難しい場合
import styles from './ComplexComponent.module.css';

export default function ComplexComponent() {
  return (
    <div className={`${styles.container} bg-gray-100 p-4`}>
      <h1 className="text-2xl font-bold">Title</h1>
      {/* 複雑なスタイルはCSS Modulesで */}
    </div>
  );
}

組み合わせ時の注意点

❌ 避けるべき組み合わせ

MUI + Tailwind CSS（直接的な併用）
- スタイルの競合が発生する可能性が高い
- MUIのコンポーネントにTailwindクラスを適用しても、MUIのスタイルが優先される

// ❌ 悪い例: MUIのコンポーネントにTailwindクラスを適用
import { Button } from '@mui/material';

<Button className="bg-blue-500">Click me</Button>
// MUIのスタイルが優先され、Tailwindのクラスが効かない場合がある

複数のリセットCSSの併用
- Normalize.cssとMUIのCssBaselineを同時に使用すると、スタイルが重複または競合する

✅ 推奨される組み合わせ

Tailwind CSS + shadcn/ui
- 最も推奨される組み合わせ
- 完全に統合されたスタイリングシステム
MUI単体
- MUIのエコシステムを最大限に活用
- テーマシステムとコンポーネントが統一されている
Tailwind CSS + CSS Modules（部分的）
- 必要に応じてCSS Modulesを使用
- 大部分はTailwind CSSでスタイリング

選定フローチャート

スタイリング手法の選定
│
├─ 豊富なコンポーネントが必要？
│  └─ YES → MUI（単体使用）
│
├─ 高いカスタマイズ性が必要？
│  └─ YES → Tailwind CSS + shadcn/ui
│
├─ 開発速度を最優先？
│  └─ YES → Tailwind CSS + shadcn/ui
│
└─ バンドルサイズを最小化したい？
   └─ YES → Tailwind CSS + shadcn/ui（またはCSS Modules）

実践的な推奨事項

新規プロジェクト: Tailwind CSS + shadcn/uiを推奨
- 高いカスタマイズ性
- バンドルサイズが小さい
- モダンな開発体験
既存のMUIプロジェクト: MUIを継続使用
- 既存のコンポーネントとの互換性
- テーマシステムの活用
エンタープライズアプリケーション: MUI
- 豊富なコンポーネント
- 強力なテーマシステム
- アクセシビリティ対応

これらの方法を適切に選択・組み合わせることで、Next.jsアプリケーションのスタイリングを効率的に行えます。プロジェクトの要件やチームのスキルに応じて、最適な方法を選択してください。