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

Copy
1/*
2 * `@font-face`ルール内でフォントファイルの場所を指定する`src`ディスクリプタの例です。
3 * `src`は、ブラウザがカスタムフォントリソースを読み込むためのパスを提供します。
4 * この定義はCSS Modulesを使用するプロジェクトでもグローバルに適用されます。
5 */
6@font-face {
7  font-family: 'MyCustomFont'; /* カスタムフォントの名前を定義します */
8  src: url('./fonts/MyCustomFont-Regular.woff2') format('woff2'), /* WOFF2形式のフォントファイルパスと形式 */
9       url('./fonts/MyCustomFont-Regular.woff') format('woff');   /* WOFF形式のフォントファイルパスと形式 */
10  font-weight: normal; /* フォントの太さ */
11  font-style: normal;  /* フォントのスタイル */
12  font-display: swap;  /* フォントの読み込みと表示の戦略 */
13}

CSSのsrcは、主に@font-faceルール内で使用される重要なディスクリプタです。ウェブページでカスタムフォントを利用する際に、そのフォントファイルがどこにあるかをブラウザに教える役割を持ちます。これにより、ユーザーのシステムにインストールされていない独自のフォントも、ウェブサイト上で正しく表示できるようになります。

このsrcディスクリプタは、特定の引数を受け取ったり、値を返したりするものではありません。その代わり、値としてurl()関数を使ってフォントファイルのパスを指定し、必要に応じてformat()関数でフォントの形式（例：woff2, woff）を明示します。複数のフォント形式をカンマで区切って指定することで、異なるブラウザ環境での互換性を高めることが可能です。ブラウザはリストの先頭から順に読み込みを試み、サポートしている最初の形式を利用します。

サンプルコードでは、MyCustomFontという名前のカスタムフォントを定義しています。srcには、まずMyCustomFont-Regular.woff2というWOFF2形式のフォントファイルを指定し、次にMyCustomFont-Regular.woffというWOFF形式のファイルを指定しています。これは、WOFF2形式に対応しているブラウザではそちらを優先的に使用し、対応していない場合はWOFF形式を利用するという意図を示しています。@font-faceルールはCSS Modulesを使用するプロジェクトにおいてもグローバルに適用されるため、一度定義すればプロジェクト全体で利用可能になります。

Copy
1/* ファイル名: src-definitions.module.css */
2/* このファイルは、他のCSS Modulesで共通利用するリソースのパスを定義します。 */
3/* `@value`ルールを使用して、アイコン画像のパスを`src`という名前で定義しています。 */
4@value src: url("./assets/icon.svg");
5
6/* ファイル名: component-styles.module.css */
7/* このファイルは、src-definitions.module.cssで定義された`src`の値をインポートして使用します。 */
8/* `src`という名前の値を`iconPath`としてインポートしています。 */
9@value iconPath from "./src-definitions.module.css";
10
11.buttonWithIcon {
12  /* インポートした`iconPath`（元は`src`）を背景画像として設定します。 */
13  background-image: iconPath;
14  background-size: 24px 24px; /* アイコンのサイズを指定 */
15  background-repeat: no-repeat; /* アイコンの繰り返しを防止 */
16  background-position: left center; /* アイコンの位置を左中央に指定 */
17  padding-left: 30px; /* アイコンのスペースを確保するため、左側にパディングを追加 */
18  display: flex;
19  align-items: center;
20  border: 1px solid #ccc;
21  padding: 8px 12px;
22  cursor: pointer;
23  font-family: sans-serif;
24  font-size: 16px;
25  color: #333;
26}
27
28/*
29* このコードはCSS Modulesの構文を使用しています。
30* 実際のアプリケーションでは、JavaScriptのビルドツール（例: Webpack, Vite）と組み合わせて使用されます。
31* `src-definitions.module.css`で定義された`@value src`が、ビルド時に実際の画像パスに置換され、
32* `component-styles.module.css`の`.buttonWithIcon`セレクタに適用されます。
33*
34* この例では、`./assets/icon.svg`というパスにあるSVGアイコンが使用されることを想定しています。
35* 実際のプロジェクトのファイル構造に合わせてパスを調整してください。
36*/

このコードは、CSS Modulesにおける@valueルールとsrcという名前を使ったリソースパスの定義および利用方法を示しています。CSS Modulesは、スタイルをモジュール化し、画像パスなどの共通値を管理しやすくするための機能です。

まず、src-definitions.module.cssファイルでは、@value src: url("./assets/icon.svg");と記述されています。これは、@valueルールを使って、アイコン画像のパスであるurl("./assets/icon.svg")にsrcという名前を付けて定義していることを意味します。これにより、このsrcは他のCSS Modulesファイルから参照可能な共通の値として機能します。

次に、component-styles.module.cssファイルでは、@value iconPath from "./src-definitions.module.css";という構文で、src-definitions.module.cssで定義されたsrcの値をiconPathという別の名前でインポートしています。インポートされたiconPathは、.buttonWithIconセレクタ内でbackground-image: iconPath;のように、通常のCSSプロパティの値として利用されています。

ここで扱われるsrcは、@valueルールによって定義される「名前」であり、特定の引数や戻り値を持つ機能ではありません。@valueで定義された値は、インポート先のファイルで変数のように利用され、ビルド時に実際のパスに展開されます。これにより、複数の箇所で同じリソースパスを使用する場合でも、一元的に管理し、変更時の手間を減らすことができます。この仕組みは、JavaScriptのビルドツールと組み合わせて活用されることが一般的です。