【CSS Modules】prefixアットルール記述子の使い方

Copy
1/*
2 * my-component.module.css
3 * このファイルはCSS Modulesとして扱われることを想定しています。
4 * CSS Modulesでは、定義されたクラス名（例: .myButton）はコンパイル時に
5 * 自動的にユニークな名前（例: myComponent_myButton__abc12）に変換され、
6 * グローバルな名前の衝突を防ぎます。これはクラス名に実質的な「prefix」が付与される仕組みです。
7 *
8 * また、以下のコードに含まれる一部のCSSプロパティは、ビルドツール（例: PostCSS Autoprefixer）によって
9 * 自動的にブラウザ間の互換性を保つためのベンダープレフィックス（例: -webkit-, -moz-）が付与されることがあります。
10 */
11.myButton {
12  /* Flexbox関連のプロパティは、以前はベンダープレフィックスが必要でした */
13  display: flex;
14  align-items: center;
15  justify-content: center;
16
17  /* その他のプロパティも、ツールによってプレフィックスが付与される可能性があります */
18  user-select: none;
19  transform: translateY(0);
20  transition: all 0.3s ease-in-out;
21
22  padding: 10px 20px;
23  border: none;
24  border-radius: 5px;
25  background-color: #007bff;
26  color: white;
27  font-size: 16px;
28  cursor: pointer;
29}
30
31.myButton:hover {
32  background-color: #0056b3;
33  transform: translateY(-2px);
34}

このサンプルコードは、CSS Modulesを使用したスタイル定義の例を示しています。CSS Modulesは、CSSのクラス名がグローバルに衝突するのを防ぐための仕組みです。具体的には、.myButton のようなクラス名を記述すると、ビルドプロセス中に自動的に myComponent_myButton__abc12 のようにユニークな名前へ変換されます。このユニークな名前は、元のクラス名にファイル名やハッシュ値が付与されることで生成され、これが実質的に「prefix（接頭辞）」として機能します。

この自動的なプレフィックス付与により、開発者は他のファイルで同じクラス名を使っても名前の衝突を心配することなく、独立してコンポーネントのスタイルを定義できます。これは、大規模なアプリケーション開発においてCSSの管理を非常に容易にします。

また、コード内の display: flex; や transform: translateY(0); といった一部のCSSプロパティは、ブラウザ間の互換性を保つために -webkit- や -moz- といった「ベンダープレフィックス」が以前は手動で必要でした。しかし、現代の開発ではPostCSS Autoprefixerのようなビルドツールがこれらのベンダープレフィックスを自動的に付与してくれるため、開発者はクリーンな標準構文で記述することができます。

本サンプルコードでは、ボタンの基本的なスタイル（パディング、背景色、角丸など）や、マウスカーソルを合わせた際のホバー効果を定義しています。prefixという概念自体は、特定の引数や戻り値を持つCSSの構文や関数ではありません。これは、CSS Modulesによるクラス名の自動変換や、ビルドツールによるベンダープレフィックス付与といった、CSSをより効率的かつ安全に扱うための仕組み全般を指すものとして理解してください。

Copy
1/*
2 * このファイルはCSS Modulesとして扱われることを想定しています。
3 * 通常、ファイル名には .module.css の拡張子を付けます (例: my-component.module.css)。
4 */
5
6/*
7 * CSS Modulesでは、ここで定義されるクラス名（例: .button）は、
8 * ビルド時に自動的にユニークなスコープ付きクラス名に変換されます
9 * (例: myComponent_button_hashABC)。
10 *
11 * リファレンス情報にある「prefix」の概念は、通常、CSS Modulesの
12 * ビルドツールの設定を通じて実現されます。例えば、Webpackのcss-loader
13 * などで、生成されるスコープ付きクラス名に特定のプレフィックス
14 * (例: 'myComponent_') を付与するように設定できます。
15 * これにより、CSSファイル内で特定の`@prefix`ルールを直接記述することなく、
16 * 命名規則としてプレフィックスが適用されたセレクタが生成されます。
17 */
18.button {
19  background-color: #007bff; /* ボタンの背景色を青に設定 */
20  color: white;              /* ボタンの文字色を白に設定 */
21  padding: 10px 20px;        /* ボタンの内側に余白を設定 */
22  border: none;              /* 枠線をなくす */
23  border-radius: 4px;        /* 角を丸くする */
24  cursor: pointer;           /* マウスカーソルをポインターに変更 */
25  font-size: 16px;           /* フォントサイズを設定 */
26  transition: background-color 0.3s ease; /* 背景色の変化を滑らかにする */
27}
28
29/*
30 * ホバー時のスタイルを定義します。
31 * この :hover 疑似クラスも、スコープ付きセレクタの一部として機能します。
32 */
33.button:hover {
34  background-color: #0056b3; /* ホバー時に背景色を少し濃い青にする */
35}
36
37/*
38 * 他のクラスも同様にスコープ化され、アプリケーションコード内で安全に使用できます。
39 * 例えば、JavaScript/TypeScriptファイルで以下のようにインポートして使用します。
40 * import styles from './my-component.module.css';
41 * <div className={styles.container}>
42 *   <button className={styles.button}>クリック</button>
43 * </div>
44 */
45.container {
46  display: flex;             /* 子要素を横並びにする（Flexboxレイアウト） */
47  justify-content: center;   /* 水平方向の中央寄せ */
48  align-items: center;       /* 垂直方向の中央寄せ */
49  margin-top: 20px;          /* 上部に外側の余白を設定 */
50  gap: 15px;                 /* 子要素間のスペースを設定 */
51}

このコードは、CSS Modulesという仕組みを使ったスタイルの定義例です。CSS Modulesは、スタイルが他の部分に影響を与えないように、クラス名を自動的にユニークな名前に変換する機能を持っています。通常、.module.cssという拡張子のファイルにスタイルを記述すると、定義されたクラス名（例: .button）は、ビルド時に自動的にmyComponent_button_hashABCのような形式の、スコープ付きクラス名に変換されます。

リファレンス情報にあるprefixとは、このユニークなクラス名を生成する際に、先頭に特定の文字列（接頭辞）を付加する概念を指します。これは、CSSファイルに直接記述するものではなく、Webpackなどのビルドツールの設定を通じて適用されます。例えば、myComponent_button_hashABCというクラス名の場合、myComponent_の部分がプレフィックスにあたります。これにより、異なるコンポーネント間で同じクラス名を使っても、スタイルが衝突する心配がなくなります。

サンプルコードでは、一般的なCSSの記述方法で.buttonや.containerなどのクラスが定義されています。これらのクラスは、ビルドプロセスを経て、一意のプレフィックスが付与されたクラス名へと変換されます。JavaScriptなどのアプリケーションコードからは、import styles from './my-component.module.css';のようにインポートし、styles.buttonやstyles.containerとして安全に利用できます。prefix自体は引数を取らず、特定の値を返すこともありません。これは、CSSの直接的な記述ルールではなく、CSS Modulesのビルド設定における命名規則の一部として機能するためです。