【CSS Modules】color-gamutメディア機能の使い方

Copy
1/*
2 * デフォルトスタイル: ディスプレイの色域情報がない場合、またはsRGB以下の色域の場合に適用されます。
3 * 通常、すべてのディスプレイは少なくともsRGB色域をサポートしています。
4 */
5body {
6  font-family: sans-serif;
7  text-align: center;
8  padding: 20px;
9  background-color: #f0f0f0; /* 薄いグレーの背景 */
10  color: #333; /* 濃いグレーの文字色 */
11}
12
13/* 色域情報を表示する要素のスタイル */
14.color-gamut-info {
15  margin-top: 20px;
16  padding: 15px;
17  border-radius: 8px;
18  border: 1px solid #ccc; /* 薄いグレーの枠線 */
19  background-color: #ffffff; /* 白い背景 */
20  font-size: 1.1em;
21  min-height: 50px; /* 内容がなくてもある程度の高さを確保 */
22  display: flex; /* 中央揃えのため */
23  align-items: center; /* 垂直方向中央揃え */
24  justify-content: center; /* 水平方向中央揃え */
25  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影 */
26}
27
28/*
29 * @media (color-gamut: srgb) は、ディスプレイがsRGB色域をサポートしている場合に適用されます。
30 * sRGBは最も一般的な色域で、ほとんどのディスプレイがサポートしている基準です。
31 */
32@media (color-gamut: srgb) {
33  .color-gamut-info {
34    background-color: #e6ffe6; /* sRGBを表現する薄い緑色 */
35    border-color: #4CAF50; /* sRGBを表現する濃い緑色の枠線 */
36    color: #2e7d32; /* sRGBを表現する濃い緑色の文字色 */
37  }
38  /* ::before擬似要素で、CSSだけでメッセージを表示します。 */
39  .color-gamut-info::before {
40    content: "現在のディスプレイはsRGB色域をサポートしています。";
41  }
42}
43
44/*
45 * @media (color-gamut: p3) は、ディスプレイがDisplay P3色域をサポートしている場合に適用されます。
46 * Display P3はsRGBよりも広い色域で、一部の最新デバイス（例: Apple製品など）でサポートされています。
47 * このメディアクエリがマッチした場合、上記sRGBのスタイルを上書きします。
48 */
49@media (color-gamut: p3) {
50  .color-gamut-info {
51    background-color: #ffe6f2; /* P3を表現する薄いピンク色 */
52    border-color: #d81b60; /* P3を表現する濃いピンク色の枠線 */
53    color: #880e4f; /* P3を表現する濃いピンク色の文字色 */
54  }
55  .color-gamut-info::before {
56    content: "現在のディスプレイはDisplay P3色域をサポートしています。";
57  }
58}
59
60/*
61 * @media (color-gamut: rec2020) は、ディスプレイがRec. 2020色域をサポートしている場合に適用されます。
62 * Rec. 2020は非常に広い色域で、HDRディスプレイなど、最先端のプロフェッショナル向けデバイスでサポートされています。
63 * このメディアクエリがマッチした場合、上記P3およびsRGBのスタイルを上書きします。
64 */
65@media (color-gamut: rec2020) {
66  .color-gamut-info {
67    background-color: #e6f2ff; /* Rec. 2020を表現する薄い青色 */
68    border-color: #2196F3; /* Rec. 2020を表現する濃い青色の枠線 */
69    color: #0d47a1; /* Rec. 2020を表現する濃い青色の文字色 */
70  }
71  .color-gamut-info::before {
72    content: "現在のディスプレイはRec. 2020色域をサポートしています。";
73  }
74}

color-gamutは、CSSのメディア特性の一つで、ユーザーが使用しているディスプレイが表現できる色の範囲、つまり「色域」に応じてウェブページのスタイルを調整するために使われます。これはメディアクエリ（@mediaルール）内で使用され、デバイスの特性に基づいて異なるCSSスタイルを適用する際に役立ちます。color-gamut自体には引数や戻り値はありませんが、メディアクエリ内でsrgb、p3、rec2020といった特定のキーワードを指定することで、その色域に対応するスタイルを記述できます。

サンプルコードでは、まずディスプレイの色域情報がない場合、またはsRGB以下の色域の場合に適用されるデフォルトスタイルが設定されています。その後に、@media (color-gamut: srgb)で最も一般的なsRGB色域に対応するスタイルが記述されており、ここでは薄い緑色の背景などが適用されます。さらに、@media (color-gamut: p3)ではsRGBよりも広いDisplay P3色域に対応するスタイルが定義されており、P3をサポートするディスプレイでは薄いピンク色の背景が適用され、sRGBのスタイルを上書きします。最後に、@media (color-gamut: rec2020)では非常に広いRec. 2020色域に対応するスタイルが定義され、これはHDRディスプレイなどの最先端デバイスで利用され、薄い青色の背景などが適用されます。

このように、color-gamutを用いることで、ユーザーのディスプレイの能力に合わせた最適な色彩表現を実現し、視覚的に豊かなウェブ体験を提供することが可能です。

Copy
1/*
2 * 広色域ディスプレイ対応のCSSスタイル
3 * `color-gamut`メディア特性を使用して、デバイスがサポートする色域に基づいてスタイルを調整します。
4 *
5 * `p3` は、Display P3色空間をサポートしていることを示します。
6 * この色空間は、従来のsRGB色空間よりも広範囲の色を表現できます。
7 */
8
9/* 標準的なWeb環境 (sRGB色域) での基本スタイル */
10body {
11  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12  background-color: #f0f0f0; /* sRGBのライトグレー */
13  color: #333333; /* sRGBのダークグレー */
14  margin: 0;
15  padding: 20px;
16  text-align: center;
17}
18
19h1 {
20  color: #007bff; /* sRGBの鮮やかな青 */
21  margin-bottom: 20px;
22}
23
24.content-box {
25  background-color: white;
26  border-radius: 8px;
27  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
28  margin: 20px auto;
29  padding: 30px;
30  max-width: 600px;
31}
32
33/*
34 * 広色域 (Display P3) ディスプレイ向けのスタイル
35 * `@media (color-gamut: p3)` は、Display P3色空間をサポートするデバイスにのみ適用されます。
36 *
37 * `color()`関数は、特定の色空間 (例: `display-p3`) で色を定義するためのCSS関数です。
38 * これにより、sRGBでは表現できない、より鮮やかで豊かな色を指定できます。
39 * 各値は0から1の範囲で、赤、緑、青のチャンネルを表します。
40 */
41@media (color-gamut: p3) {
42  body {
43    /* 広色域ディスプレイで、より鮮やかな背景色を設定 */
44    /* sRGBでは表現が難しい、彩度の高いミントグリーン */
45    background-color: color(display-p3 0.2 0.8 0.3);
46  }
47
48  h1 {
49    /* 広色域ディスプレイで、より鮮やかな見出し色を設定 */
50    /* sRGBでは表現が難しい、非常に鮮やかなシアン */
51    color: color(display-p3 0.1 0.7 0.95);
52  }
53
54  .content-box {
55    /* 広色域ディスプレイで、ボックスの影もより豊かに表現 */
56    /* 透明度を持つ、わずかに青みがかった濃い影 */
57    box-shadow: 0 6px 12px color(display-p3 0.05 0.05 0.1 / 0.25);
58  }
59
60  /*
61   * 注意: `color(display-p3 ...)` で指定された広色域の色は、
62   * 対応するディスプレイでのみ正しく表示されます。
63   * 非対応のディスプレイでは、ブラウザが最も近いsRGB色にマッピングします。
64   */
65}

CSSのcolor-gamutは、表示デバイスがサポートする色域（表現できる色の範囲）に基づいてスタイルを適用するためのメディア特性です。この特性自体に引数や戻り値はなく、デバイスが特定の色域をサポートしているかの条件として利用されます。サンプルコードでは、広色域ディスプレイの一つである「Display P3」に対応するスタイルを定義する方法を示しています。p3は、従来のsRGB色空間よりも広範囲の豊かな色を表現できるDisplay P3色空間をサポートしていることを意味します。

コードの最初の部分は、標準的なsRGB色域の環境での基本スタイルを定義しています。その後、@media (color-gamut: p3)ブロック内で、Display P3色空間をサポートするデバイスにのみ適用されるスタイルを指定しています。

ここで使われているcolor()関数は、特定の色空間、例えばdisplay-p3を指定して色を定義するためのCSS関数です。これにより、従来のsRGBでは表現できないような、より鮮やかで豊かな色を直接指定することが可能になります。サンプルでは、背景色や見出しの色、ボックスの影に広色域の色を適用しています。

color(display-p3 ...)で指定された広色域の色は、対応するディスプレイでのみその真価を発揮し、より正確で鮮やかに表示されます。非対応のディスプレイでは、ブラウザが自動的に最も近いsRGB色にマッピングして表示するため、色が多少異なる場合があります。このcolor-gamutメディア特性を使うことで、ユーザーのデバイス環境に応じた最適な色の表現を提供できます。