Next.jsで学ぶReact講座（完全初心者向け・30日） | 第3章：Next.jsらしさ – CSSの当て方

Next.jsでCSSをどう当てるかの全体像

React / Next.js は「JSXで見た目を書く」ので、最初は
「CSSはどこに書けばいいの？」
となりがちです。

Next.js ではいくつか方法がありますが、初心者がまず押さえるべきは「CSS Modules」 です。
これは、

• ファイルごとに CSS を閉じ込められる
• クラス名の衝突を勝手に防いでくれる
• Next.js で最初から標準サポートされている

という、かなり「Next.js らしい」安心なやり方です。

CSS Modulesとは何か

コンポーネント専用のCSSファイルを作る仕組み

CSS Modules は、簡単に言うと

「このコンポーネント専用の CSS ファイル」を作って
そこに書いたクラスだけを
そのコンポーネントから import して使う

という仕組みです。

ファイル名のルールは、

○○.module.css

です。
例えば Button コンポーネント用なら、Button.module.css というファイルにします。

この「.module.css」を付けることで、

• クラス名が自動でユニークな名前に変換される
• 他のファイルのクラス名とぶつからなくなる

というメリットがあります。

classNameの付け方と使い方

コンポーネント＋CSS Modulesの基本パターン

具体例で見てみます。
ボタンコンポーネントを作るイメージです。

まず、CSSファイル：

/* app/components/PrimaryButton.module.css */
.button {
  background-color: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: #1d4ed8;
}

次に、Reactコンポーネント側：

// app/components/PrimaryButton.tsx
import type { ReactNode } from "react";
import styles from "./PrimaryButton.module.css";

type Props = {
  children: ReactNode;
  onClick?: () => void;
};

export default function PrimaryButton({ children, onClick }: Props) {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
}

// app/components/PrimaryButton.tsx
import type { ReactNode } from "react";
import styles from "./PrimaryButton.module.css";

type Props = {
  children: ReactNode;
  onClick?: () => void;
};

export default function PrimaryButton({ children, onClick }: Props) {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
}

ここでのポイントは、

import styles from "./PrimaryButton.module.css";
で CSS を読み込んでいること。

className={styles.button}
という形で、.button クラスを当てていること。

です。

styles.button の中身は、実際には button_abc123 のような「ユニークなクラス名」に変換されます。
なので、他の CSS ファイルにも .button と書いていても衝突しません。

複数クラスを付けたい場合

クラスを複数付けたいときは、文字列連結やテンプレートリテラルを使います。

CSS:

/* Card.module.css */
.card {
  padding: 16px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.highlight {
  border: 2px solid #f97316;
}

コンポーネント:

import styles from "./Card.module.css";

type Props = {
  highlight?: boolean;
};

export default function Card({ highlight, children }: React.PropsWithChildren<Props>) {
  const className = highlight
    ? `${styles.card} ${styles.highlight}`
    : styles.card;

  return <div className={className}>{children}</div>;
}

import styles from "./Card.module.css";

type Props = {
  highlight?: boolean;
};

export default function Card({ highlight, children }: React.PropsWithChildren<Props>) {
  const className = highlight
    ? `${styles.card} ${styles.highlight}`
    : styles.card;

  return <div className={className}>{children}</div>;
}

このように styles.xxx を組み合わせることで、
普通の CSS と同じ感覚でクラスを切り替えられます。

スタイルの分離という考え方

JSXから「ベタ書きスタイル」を追い出す

最初のうちは、どうしてもインラインスタイル（style={{ ... }}）を使いがちです。

<button style={{ padding: "8px 16px", backgroundColor: "blue" }}>
  送信
</button>

<button style={{ padding: "8px 16px", backgroundColor: "blue" }}>
  送信
</button>

小さな実験ならこれでもOKですが、
大きくなると「どこにどんなスタイルを書いたか」が分散して、管理が難しくなります。

CSS Modules に切り出すと、

見た目の情報は .module.css にまとまる
コンポーネントは「構造とふるまい」を書くことに集中できる

という状態になります。

例えば、こんな風に整理されます。

JSX側（構造とロジック）:

<button className={styles.button}>送信</button>

<button className={styles.button}>送信</button>

CSS側（見た目）:

.button {
  padding: 8px 16px;
  background-color: blue;
  color: white;
}

「見た目の調整をしたいときは CSS ファイルだけ開けばいい」という状態は、
実務でも学習でも、かなり大きなメリットになります。

コンポーネントごとに CSS ファイルを作る癖

最低限、次のようなルールを自分に課すときれいに保ちやすいです。

コンポーネントファイル Xxx.tsx を作ったら、その見た目が複雑になってきたタイミングで
同じ場所に Xxx.module.css を作り、スタイルをそちらへ移動する

こうしておくと、

• コードベースを見たときに「このコンポーネントのCSSはすぐ隣にある」と分かる
• 他のページの CSS と混ざらない

という状態になります。

最低限のデザインを整える

「ダサくない程度」にするための小さな工夫

完璧なデザインはまだ目指さなくて大丈夫です。
まずは「最低限、素っ裸ではない」レベルを目標にします。

例えば、ページ全体を軽く整える app/globals.css（Next.js プロジェクトに最初からあることが多い）で、

• ベースのフォント
• 背景色
• ページ全体の余白

だけ整えておきます。

app/globals.css の一例:

/* app/globals.css */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #f3f4f6;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px;
}

これだけでも、

• 文字がキレイになる
• 背景色がうっすらグレーになって「アプリ感」が出る
• main コンテンツが中央寄せになって読みやすくなる

とかなり印象が変わります。

カード風のレイアウトを1つ用意しておく

よく使う「カード」コンポーネントのスタイルをひとつ持っておくと、
どんなコンテンツもそれなりに見えるようになります。

Card.module.css:

.card {
  background-color: white;
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  margin-bottom: 16px;
}

Card.tsx:

import styles from "./Card.module.css";

export default function Card({ children }: React.PropsWithChildren) {
  return <section className={styles.card}>{children}</section>;
}

import styles from "./Card.module.css";

export default function Card({ children }: React.PropsWithChildren) {
  return <section className={styles.card}>{children}</section>;
}

これを使ってページを組むと、最低限こうなります。

// app/page.tsx
import Card from "./components/Card";

export default function Page() {
  return (
    <main>
      <Card>
        <h1>Next.js × React 入門</h1>
        <p>この講座では、React と Next.js の基本を学びます。</p>
      </Card>

      <Card>
        <h2>今日の目標</h2>
        <p>まずは CSS Modules を使って、見た目を少し整えてみましょう。</p>
      </Card>
    </main>
  );
}

// app/page.tsx
import Card from "./components/Card";

export default function Page() {
  return (
    <main>
      <Card>
        <h1>Next.js × React 入門</h1>
        <p>この講座では、React と Next.js の基本を学びます。</p>
      </Card>

      <Card>
        <h2>今日の目標</h2>
        <p>まずは CSS Modules を使って、見た目を少し整えてみましょう。</p>
      </Card>
    </main>
  );
}

内容はシンプルでも、
「カードで区切られているだけ」で、かなり読みやすくなります。

まとめと次の一歩

ここまでのポイントを整理すると、

CSS Modules は、Xxx.module.css を作って import styles from "./Xxx.module.css"; し、className={styles.xxx} で当てる仕組み。
クラス名は自動的にユニーク化されるので、クラス名の衝突を気にせず、気楽に .title や .button といった名前が使える。
見た目は .module.css に、構造とロジックは .tsx に分けることで、「スタイルの分離」ができ、あとからの調整が圧倒的に楽になる。
globals.css で全体のフォント・背景・余白をざっくり整え、CSS Modules でカードやボタンなど最低限のコンポーネントを用意しておくと、「それなりに見える」アプリがすぐ作れる。

次にやってみてほしいのは、

• Button と Card のコンポーネントを CSS Modules 付きで用意する
• それを使って、トップページに「カード＋ボタン」の簡単なレイアウトを組んでみる

というステップです。
コードの動きだけでなく、「見た目も自分でコントロールできている感覚」が出てくると、一気に楽しくなってきます。