【備忘録】Next.jsでCSSを書く方法まとめ（App Router対応）
※本記事は、Next.js公式チュートリアルの備忘録です
https://nextjs.org/learn/dashboard-app/optimizing-fonts-images
👕 まず、CSSって何するもの？
CSSは「見た目（デザイン）を整える言語」。
たとえば文字の大きさを変えたり、色をつけたり、余白をとったりするのに使う。
h1 {
color: red;
font-size: 32px;
}
このコードを使えば、<h1>の文字が赤くて大きくなる。
👇 Next.jsではCSSの書き方が3種類ある
Next.jsではCSSを次の3つの方法で書ける。
| 種類 | どんなときに使う？ | 特徴 |
|---|---|---|
| CSS Modules | コンポーネントごとにCSSを分けたいとき | ファイルごとにCSSが「限定」される |
| グローバルCSS | 全体に影響するスタイルを一括で書きたいとき | ページ全体に効くCSS（リセットCSSなど） |
| Tailwind CSS | クラス名でスタイルをすばやく当てたいとき | 書く量が少なくてすむ。ユーティリティ型のCSS。 |
それぞれの特徴を順番に見ていく。
1. CSS Modules（モジュール）
❓ そもそも「モジュール」って？
モジュール＝「ひとまとまりの部品」みたいなイメージ。
JavaScriptやCSSを小さく分けて管理できる。
✅ なにがいいの？
CSS Modulesを使うと、そのCSSはそのファイルだけに影響するようになる。
たとえば「ページAで使ってるクラス名」が「ページBで間違って上書きされる」みたいな事故が起きにくい。
✅ 使い方の具体例
app/
page.tsx ← ページのコード
page.module.css ← ページ専用のCSS（.module.css がポイント）
// page.tsx
import styles from './page.module.css'
export default function Page() {
return <h1 className={styles.title}>こんにちは</h1>
}
/* page.module.css */
.title {
color: blue;
font-size: 28px;
}
📝 ポイントまとめ
-
.module.cssという名前にすると、自動的に「このCSSはこのファイル専用」になる -
import styles fromでCSSを読み込んで、className={styles.〇〇}で使う - クラス名が自動的にユニーク（他と被らない名前）に変換される
2. グローバルCSS
❓ 「グローバル」ってなに？
グローバル＝「全体に影響する」という意味。
つまり、全ページ・全コンポーネントに共通で使えるCSS。
✅ どうやって使うの？
app/
layout.tsx
globals.css ← ここにグローバルCSSを書く
// layout.tsx
import './globals.css'
export default function Layout({ children }) {
return <html><body>{children}</body></html>
}
✅ 何を書くといい？
- リセットCSS（ブラウザごとの差をなくすため）
- 共通フォント・共通背景色
- 通常HTMLタグ（h1、pなど）のデフォルトスタイル
3. Tailwind CSS（テイルウィンド）
❓ 「ユーティリティ」ってなに？
まずは「ユーティリティ」という考え方から理解する。
「ユーティリティ（utility）」は、便利な道具・小さな機能の部品みたいな意味。
CSSでいうと「1つのクラス名で1つの効果だけを持つ」という考え方。
従来のCSS：
.my-button {
color: red;
font-size: 18px;
font-weight: bold;
margin-top: 16px;
}
↑ 1つのクラスにいろんな効果をまとめて書く
ユーティリティ的なCSS：
.text-red { color: red; }
.text-lg { font-size: 18px; }
.font-bold { font-weight: bold; }
.mt-4 { margin-top: 16px; }
↑ 1つのクラスは1つの効果だけ
❓ で、Tailwind CSSってなに？
Tailwind CSS = 「ユーティリティクラスをたくさん用意してくれたCSSフレームワーク」
つまり、上の例みたいな「1つの効果だけのクラス」を何千個も作って、使いやすくしてくれたもの。
| Tailwindのクラス名 | 効果 | 普通のCSSだと |
|---|---|---|
text-red-500 |
文字を赤色にする | color: #ef4444; |
mt-4 |
上にマージンをつける | margin-top: 1rem; |
text-xl |
文字を大きくする | font-size: 1.25rem; |
font-bold |
太字にする | font-weight: 700; |
bg-gray-100 |
背景を薄いグレーにする | background-color: #f3f4f6; |
🔧 Tailwind = CSSの"部品屋さん" という感じで、必要な部品（クラス名）を組み合わせて使う。
✅ インストール方法
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js の中で、どのフォルダを対象にするか書く：
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
✅ globals.css に以下を追加
@tailwind base;
@tailwind components;
@tailwind utilities;
✅ 実際の使い方
export default function Page() {
return (
<h1 className="text-3xl font-bold text-blue-600">
Tailwindで書くとラク
</h1>
)
}
これだけで文字サイズ・太さ・色がすべて反映される。
✅ clsxライブラリでクラス名を切り替える
状態やその他の条件に基づいて要素を条件付きでスタイル設定する必要がある場合がある。
clsxはクラス名を簡単に切り替えられるライブラリ。
基本的な使用方法：
InvoiceStatusを受け入れるコンポーネントを作成するとする。statusは'pending'または'paid'になる。
-
'paid'の場合、色は緑になる -
'pending'の場合、色は灰色になる
clsxを使って、条件付きでクラスを適用できる：
npm install clsx
import clsx from 'clsx';
export default function InvoiceStatus({ status }: { status: string }) {
return (
<span
className={clsx(
'inline-flex items-center rounded-full px-2 py-1 text-xs',
{
'bg-gray-100 text-gray-500': status === 'pending',
'bg-green-500 text-white': status === 'paid',
},
)}
>
{status === 'pending' ? 'Pending' : 'Paid'}
</span>
);
}
clsxの便利な点：
- 条件分岐でクラスをつけたり外したりできる
- 複数の条件を組み合わせられる
-
undefinedやnullを自動で無視してくれる
詳細についてはclsxの公式ドキュメントを参照。
✍️ 自分の中での整理（まとめ）
| 項目 | CSS Modules | グローバルCSS | Tailwind CSS |
|---|---|---|---|
| ファイル名 | 〇〇.module.css | globals.css | globals.css（中身がTailwind専用） |
| スコープ（影響範囲） | そのファイル内だけ | 全ページ | 書いたタグだけ |
| 書き方 | className={styles.〇〇} |
ふつうのCSS |
className="text-xl font-bold" のように直接書く |
| 学習コスト | やや低め | 低い | 最初は高いけど慣れると速い |
🔚 最後に（自分メモ）
- CSS Modulesは「安全なCSSの書き方」。まずはこれから始めるのが良さそう。
- グローバルCSSは「全体の初期設定」っぽい感じで、最低限にするのがよさげ。
- Tailwindは覚えるのが大変だけど、クラスをいちいち書かなくていいので超時短。
- 「ユーティリティクラス」って言葉も怖くない。小さなCSSの部品って思えばOK。