【CSS Modules】@color-profileアットルールの使い方

Copy
1/*
2 * `@color-profile`は、CSSで色空間プロファイルを定義するためのat-ruleです。
3 * これにより、標準の色空間（sRGBなど）に別名を付けたり、ICCプロファイルを参照したりできます。
4 * 定義されたプロファイルは、`color()`関数で色を指定する際に利用できます。
5 */
6
7/*
8 * 'my-srgb-alias'という名前で、標準sRGB色空間のエイリアスを定義します。
9 * `src`プロパティには、`srgb`のような既存の色空間キーワードやICCプロファイルへのURLを指定します。
10 */
11@color-profile my-srgb-alias {
12  src: srgb; /* sRGB色空間をソースとして指定 */
13}
14
15/*
16 * 'my-display-p3-alias'という名前で、Display P3色空間のエイリアスを定義します。
17 * Display P3はsRGBよりも広い色域を持ち、より鮮やかな色を表現できます。
18 */
19@color-profile my-display-p3-alias {
20  src: display-p3; /* Display P3色空間をソースとして指定 */
21}
22
23/*
24 * 定義した色プロファイルを使用して、要素の色を設定する例です。
25 * `color()`関数は、第一引数に色プロファイル名、その後に色成分を取ります。
26 */
27.example-element {
28  /*
29   * my-srgb-aliasプロファイルを使って、sRGB色空間で赤色を定義します。
30   * 成分はR, G, Bの順で、それぞれ0から255の範囲です。
31   */
32  color: color(my-srgb-alias 255 0 0); /* テキスト色を赤に設定 */
33
34  /*
35   * my-display-p3-aliasプロファイルを使って、Display P3色空間で鮮やかな緑色を定義します。
36   * Display P3はsRGBと比較して緑色の表現が特に豊かです。
37   */
38  background-color: color(my-display-p3-alias 0 1 0); /* 背景色を緑に設定 */
39
40  padding: 20px;
41  border: 2px solid #ccc;
42}

CSSの@color-profileは、Webコンテンツの色をより細かく制御するための特別なルール（at-rule）です。このルールを使うことで、一般的なモニターで使われるsRGBのような標準的な色空間に、開発者が分かりやすい独自の別名（エイリアス）を付けたり、特定の色の表現方法を定義したICCプロファイルというファイルを読み込んだりすることができます。

この@color-profileルール自体には、直接的な引数や戻り値はありません。しかし、一度プロファイルを定義すると、その名前を使ってCSS全体で利用できる新しい色プロファイルが登録されるという役割を持っています。

具体的な使い方は、まず@color-profileに続けて独自の色プロファイル名を指定し、その中でsrcプロパティを使ってソースとなる色空間を定義します。例えば、@color-profile my-srgb-alias { src: srgb; } と記述することで、my-srgb-aliasという名前でsRGB色空間が利用可能になります。同様に、Display P3のような、より広い色域を持つ色空間のエイリアスも作成できます。

定義した色プロファイルは、CSSのcolor()関数と組み合わせて使用します。color()関数の最初の引数に定義したプロファイル名を指定し、その後ろにその色空間に応じた赤・緑・青などの色成分の値を並べることで、要素の色を設定できます。例えば、color: color(my-srgb-alias 255 0 0); は、my-srgb-alias（sRGB）の色空間で純粋な赤色を指定しています。このように、@color-profileを利用することで、ウェブコンテンツの色表現の幅を広げ、より意図した通りの色を正確に表示することが可能になります。

Copy
1/*
2  @color-profile at-rule:
3  外部のICCカラープロファイル（例: sRGB、Display P3など）を定義し、
4  CSS内でそのプロファイルを名前で参照できるようにするルールです。
5  これにより、ウェブコンテンツで特定の色空間を正確に扱い、
6  デバイス間で一貫性のある色表現を実現できます。
7*/
8@color-profile my-custom-srgb {
9  /*
10    src: 定義するICCカラープロファイルファイルへのパスを指定します。
11    実際には、ここに具体的な.iccファイル（例: "assets/srgb.icc"）のURLを記述します。
12    このファイルはウェブサーバーからアクセス可能である必要があります。
13  */
14  src: url("path/to/your/srgb-profile.icc");
15
16  /*
17    rendering-intent: 色空間変換時のレンダリングインテントを指定します。
18    これにより、色域が異なる場合に、色の表現をどのように調整するかを決定します。
19    利用可能な値: perceptual (知覚的), relative-colorimetric (相対的な色測定),
20                 saturation (彩度優先), absolute-colorimetric (絶対的な色測定)
21  */
22  rendering-intent: perceptual;
23}
24
25/*
26  定義したカスタムカラープロファイルをCSSの`color()`関数で利用する例です。
27  `color()`関数は、特定の色空間内の色を成分で指定するために使用されます。
28*/
29.element-with-custom-color {
30  /*
31    `my-custom-srgb`という名前で定義された色空間内で、
32    0% 0% 0%の成分を持つ色（この場合は黒）を指定します。
33    これは、指定されたICCプロファイルの特性に基づいて色が表示されることを意味します。
34    より高度な色管理や広色域ディスプレイへの対応が必要な場合に使用します。
35  */
36  color: color(my-custom-srgb 0% 0% 0%);
37
38  /*
39    背景色には、組み込みのDisplay P3プロファイルを使用して色を指定する例です。
40    `color()`関数はカスタムプロファイルだけでなく、標準的な色空間もサポートします。
41  */
42  background-color: color(display-p3 0.1 0.2 0.3); /* P3色空間の赤、緑、青の成分で色を指定 */
43
44  padding: 15px;
45  border: 2px solid currentColor; /* テキストの色と同じ色のボーダー */
46}

@color-profileは、ウェブページで色をより正確に管理するためのCSS at-ruleです。このルールを使用することで、外部のICCカラープロファイルを定義し、CSS内でそのプロファイルを名前で参照できるようになります。これにより、ウェブコンテンツで特定の色空間を正確に扱い、様々なデバイス間で一貫性のある色表現を実現することが可能になります。

このルールは、@color-profile [名前] { ... }という形式で記述します。例えば、@color-profile my-custom-srgbのように名前を付けて、独自のカラープロファイルを定義します。定義の中では、srcプロパティを使って、定義したいICCカラープロファイルファイル（例: .iccファイル）へのパスをURL形式で指定します。このファイルはウェブサーバーからアクセス可能である必要があります。さらに、rendering-intentプロパティでは、色域が異なる場合に色の表現をどのように調整するか（例: perceptual 知覚的）を指定できます。

定義したカスタムカラープロファイルは、color()関数内で利用します。例えば、.element-with-custom-color { color: color(my-custom-srgb 0% 0% 0%); }のように記述することで、my-custom-srgbという名前で定義された色空間内で特定の色を、そのプロファイルの特性に基づいて指定できます。これは、高度な色管理や広色域ディスプレイへの対応が必要な場面で特に有効です。color()関数は、カスタムプロファイルだけでなく、display-p3のような標準的な色空間もサポートしており、柔軟な色指定が可能です。@color-profile自体は引数や戻り値を持たず、色プロファイルを定義する役割に特化しています。