0Pricing
CSS Academy · レッスン

CSS Modules: スコープ付きスタイル

ビルド環境でCSS Modulesを使い、クラス名のスコープをコンポーネント内に自動的に限定します。

「CSS Modules: スコープ付きスタイル」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

CSS Modulesとは

CSS Modulesは、CSSクラス名を定義されたコンポーネントファイルのスコープ内に自動的に限定します。各クラス名はビルド時に一意の識別子へ変換されるため、グローバルへのスタイル漏れを防止できます。

ファイルの命名規則

CSSファイルには.module.cssという拡張子を付けます（Sassの場合は.module.scss）。

/* Button.module.css */
.button {
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

CSS Modulesをインポートする

モジュールをJavaScriptオブジェクトとしてインポートします。クラス名はプロパティになります。

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

function Button({ children }) {
  return <button className={styles.button}>{children}</button>;
}
// Renders as: class="Button_button__aB2cD" (unique hash)

クラスの合成

composesを使うと、別のモジュールのクラスを拡張できます。

/* Button.module.css */
.primary {
  composes: base from "./Base.module.css";
  background: royalblue;
}

グローバルクラス

:global()を使うと、特定のクラスをローカルスコープの対象外にできます。

/* styles.module.css */
.container :global(.third-party-class) {
  /* targets third-party className without scoping */
  color: red;
}

ViteでCSS Modulesを使用する

ViteにはCSS Modulesのサポートが組み込まれています。*.module.cssに一致するファイルは自動的に処理されます。

// vite.config.js
export default {
  css: {
    modules: {
      localsConvention: 'camelCase' // .my-class → styles.myClass
    }
  }
}

webpackでCSS Modulesを使用する

css-loaderの設定でmodulesを有効にします。

{
  loader: 'css-loader',
  options: {
    modules: {
      localIdentName: '[name]__[local]--[hash:base64:5]'
    }
  }
}

クラス名の合成

テンプレートリテラル、またはclsx／classnamesライブラリを使って、複数のモジュールクラスを組み合わせます。

import styles from './Card.module.css';
import clsx from 'clsx';

function Card({ featured }) {
  return (
    <div className={clsx(styles.card, featured && styles.featured)}>
      Content
    </div>
  );
}

ランタイムコストなし

CSS Modulesは完全にビルド時に解決されるため、ランタイムのJavaScriptオーバーヘッドはありません。出力されるのは、クラス名が変更された標準CSSです。そのため、パフォーマンスが重要なアプリケーションに適しています。

TypeScriptのサポート

typed-css-modules、またはViteのcssModuleTypes設定を使うと、CSS Modules用のTypeScript型定義を生成し、型安全にクラス名へアクセスできます。

CSS ModulesとCSS-in-JSの比較

CSS Modulesの特徴：

  • ビルド時のみ処理されるため、ランタイムのJSコストがない
  • 標準CSS／Sassと統合でき、慣れた構文を使える
  • JSの補間による動的なスタイルには対応しない
  • styled-componentsやEmotionと比べて、テーマに基づく動的なスタイルには柔軟性が低い

確認問題

CSS Moduleは、異なる2つのコンポーネントファイル間でクラス名が衝突するのをどのように防ぎますか。

まとめ

CSS Modulesは、クラス名をビルド時に一意の識別子へ変換することで、自動的にスコープ化します。JavaScriptオブジェクトとしてインポートし、プロパティとしてクラスにアクセスします。:global()を使うとグローバルセレクターとして使用でき、composesを使うとクラスを合成できます。ランタイムコストがなく、CSS／Sassの構文を完全に利用できるため、静的なスタイルにおいてCSS-in-JSの軽量な代替手段となります。

よくある質問

「CSS Modules: スコープ付きスタイル」レッスンは無料ですか？

はい。「CSS Modules: スコープ付きスタイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「CSS Modules: スコープ付きスタイル」で何を学びますか？

ビルド環境でCSS Modulesを使い、クラス名のスコープをコンポーネント内に自動的に限定します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「CSS Modules: スコープ付きスタイル」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Styled-components: Tagged Template Literals
  2. Emotion: css()とstyled()
  3. CSS Modules: スコープ付きスタイル
  4. Vanilla Extract: ゼロランタイムCSS-in-JS
← CSS Academyに戻る