CSS Modules しーえすえす もじゅーるず

---

CSS Modulesとは

CSS Modules とは、CSSファイルをコンポーネント単位でスコープ（有効範囲）を分離する仕組みです。通常のCSSではクラス名がページ全体に影響するため、大きなプロジェクトになると「同じクラス名が別の場所で定義されて見た目が崩れる」という衝突問題が頻繁に起きます。CSS Modules はビルド時にクラス名をファイルごとにユニークな文字列へ自動変換することで、この問題を根本から解決します。

たとえば Button.module.css に書いた .button は、ビルド後に Button_button__x3kF9 のような一意の名前に変換されます。開発者は人間が読みやすい名前のまま書き続けられ、衝突はツールが防いでくれるという仕組みです。React・Vue・Next.js などのモダンなフロントエンド開発環境で広く採用されており、コンポーネント設計と相性が抜群です。

CSS Modules は新しいCSSの文法を覚える必要がほとんどなく、既存のCSSの書き方をほぼそのまま使えるのが大きな特徴です。後述する CSS-in-JS などと比べて学習コストが低く、「CSSはCSSファイルに書きたい」という開発者に支持されています。

---

CSS Modulesの仕組み

クラス名変換の流れ

【開発時に書くコード】

Button.module.css         Button.jsx
─────────────────         ──────────────────────────
.button {                 import styles from
  color: white;             './Button.module.css';
  background: blue;
}                         <button className={styles.button}>
                            送信
                          </button>

         ↓ ビルドツール（Webpack / Vite など）が変換

【ブラウザに渡るコード】

生成されるCSS                生成されるHTML
──────────────────────────   ─────────────────────────────────
.Button_button__x3kF9 {      <button class="Button_button__x3kF9">
  color: white;                送信
  background: blue;          </button>
}

CSS Modulesが解決する主な問題

問題	通常のCSS	CSS Modules
クラス名の衝突	起きやすい（全体スコープ）	起きない（ファイル単位で自動変換）
クラス名の管理コスト	命名規則（BEMなど）が必要	自由に短い名前でOK
どこで使われているか追跡	難しい	JSのimportで明示的に管理
削除時の影響確認	全ファイル調査が必要	importを外すだけで安全に削除可能
学習コスト	低い	低い（通常のCSSとほぼ同じ）

:global と :local の使い分け

CSS Modules では基本的にすべてのクラスがローカルスコープになりますが、:global を使えば特定のクラスを従来どおりグローバルに適用できます。

/* Button.module.css */

/* ローカルスコープ（デフォルト）→ 自動でリネームされる */
.button {
  color: white;
}

/* グローバルスコープ → そのままの名前で出力される */
:global(.active) {
  font-weight: bold;
}

覚え方：「モジュールはそれぞれ専用の名札ホルダー」

ファイル（モジュール）ごとに「名札ホルダー」が用意されていて、中のクラス名は外に漏れない、と覚えましょう。他の引き出しに入っている同じ名前のクラスとは別物として扱われます。

---

歴史と背景

• 2015年 — Glen Maddern と Mark Dalgleish が CSS Modules を提案・公開。当時急増していた React コンポーネント開発でのスタイル管理の課題が背景にあった
• 2015年〜 — Webpack の css-loader が CSS Modules をサポートし、React コミュニティに急速に普及
• 2016年 — Create React App（CRA）に採用の動きが広がり、初心者でも使いやすい環境が整う
• 2020年 — Next.js が CSS Modules を組み込みでサポート。設定なしに .module.css ファイルが使えるようになり、デファクトスタンダードとして定着
• 2021年以降 — Vite でも標準サポート。ファイル名に .module.css をつけるだけで有効になるシンプルさが評価され、Vue・Svelte などのエコシステムにも広がる
• 現在 — CSS-in-JS との選択肢として並立しつつ、「CSSをCSSとして書きたい」派の定番ソリューションとして根強い人気を持つ

---

関連するスタイリング手法との比較

モダンなフロントエンド開発には複数のスタイリング手法があります。CSS Modules はそのひとつであり、それぞれにトレードオフがあります。

手法の選び方まとめ

状況	おすすめ手法
既存CSSの資産を活かしたい	CSS Modules
Propsで動的にスタイルを変えたい	CSS-in-JS（styled-components / Emotion）
デザインシステムを統一したい	Tailwind CSS
Next.js で手軽に始めたい	CSS Modules（標準サポートのため）
チームにCSS熟練者が少ない	Tailwind CSS

Next.js での使い方（最小例）

// components/Card.module.css
.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
}
.title {
  font-size: 1.25rem;
  font-weight: bold;
}

// components/Card.jsx
import styles from './Card.module.css';

export default function Card({ title }) {
  return (
    <div className={styles.card}>
      <h2 className={styles.title}>{title}</h2>
    </div>
  );
}

---

関連用語

• コンポーネント — UIを部品単位で分割・再利用する設計単位
• Tailwind CSS — ユーティリティクラスを組み合わせてスタイルを記述するCSSフレームワーク
• CSS-in-JS — JavaScriptのコード内にCSSを記述するスタイリング手法
• Webpack — JavaScriptやCSSを束ねるモジュールバンドラー
• Vite — 高速なフロントエンドビルドツール
• React — コンポーネントベースのUIライブラリ
• Next.js — Reactベースのフルスタックウェブフレームワーク
• BEM — CSS命名規則のひとつ（Block Element Modifier）