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

Copy
1/*
2 * このメディアクエリは、デバイスがサポートするカラーパレットのエントリ数に基づいてスタイルを適用します。
3 * 'color-index' は、デバイスがインデックスカラー（パレット表示）をサポートしている場合に、
4 * そのパレットのエントリ数を報告します。
5 * 例えば、(color-index > 0) は、デバイスが0より多くの色数をパレットとして持っている場合に真となります。
6 * 現代の多くのフルカラーディスプレイではcolor-indexは0となるため、このスタイルは通常適用されません。
7 * 主に、限られた色数しか表示できない古いデバイスや特殊なディスプレイ向けの調整に利用されます。
8 */
9@media (color-index > 0) {
10  body {
11    background-color: #f0f0f0; /* インデックスカラーデバイス向けに背景色を明るく調整 */
12    color: #333333; /* 読みやすい濃いテキスト色 */
13    font-family: sans-serif; /* シンプルなフォントファミリー */
14  }
15
16  h1 {
17    color: #666666; /* 見出しの色も調整 */
18    text-align: center;
19  }
20
21  p {
22    line-height: 1.5; /* 行の高さを調整して可読性を向上 */
23  }
24
25  /* 例として、このメディアクエリが適用された場合にのみ表示される要素 */
26  .limited-color-warning {
27    display: block;
28    padding: 10px;
29    border: 1px solid #ffcc00;
30    background-color: #fffacd;
31    color: #b8860b;
32    text-align: center;
33    margin-top: 20px;
34  }
35}
36
37/* 以下は、color-indexが0またはメディアクエリが適用されない場合のデフォルトスタイル */
38body {
39  background-color: #ffffff;
40  color: #000000;
41  font-family: 'Segoe UI', Arial, sans-serif;
42  margin: 20px;
43}
44
45h1 {
46  color: #1a1a1a;
47  text-align: left;
48}
49
50p {
51  line-height: 1.6;
52}
53
54.limited-color-warning {
55  display: none; /* デフォルトでは警告メッセージを非表示 */
56}

CSSのcolor-indexは、デバイスがサポートするカラーパレットのエントリ数（色の数）を検出するためのメディア特性です。これは引数を取らず、特定の戻り値を直接返すわけではなく、メディアクエリの条件式として使用されます。この特性は、デバイスがインデックスカラー、つまりパレットを使用して色を表示する場合に、そのパレットに登録されている色の数を整数値で報告します。

サンプルコードの@media (color-index > 0)は、デバイスが0より多くの色数をパレットとして持っている場合にのみ、その中のスタイルを適用するメディアクエリです。このメディアクエリ内のスタイルは、限られた色数のディスプレイ環境でもコンテンツが見やすく、適切に表示されるように調整されています。例えば、背景色や文字色をシンプルに保ち、.limited-color-warningクラスのような要素を特定の環境でのみ表示する制御が可能です。

現代の多くのフルカラーディスプレイでは、色をパレットで管理する方式ではないため、通常color-indexの値は0となります。そのため、このメディアクエリ内のスタイルが適用されることは稀です。主に、ごく限られた色数しか表示できない古いデバイスや、特殊な産業用ディスプレイ、モノクロ表示を想定した調整など、ニッチな用途で利用されることがあります。システムエンジニアを目指す上では、このような特殊なデバイスへの対応時にその存在を認識しておくと良いでしょう。

Copy
1/*
2 * このスタイルは、ウェブページ内のコンテンツブロックに適用されます。
3 * デバイスのカラーサポート（color-index）に応じて、
4 * 背景色（background-color）と要素の重なり順序（z-index）を調整します。
5 */
6.content-block {
7  /* 通常のカラーディスプレイでのスタイル */
8  background-color: #f0f8ff; /* 薄い青色の背景 (AliceBlue) */
9  color: #333; /* 暗い灰色のテキスト */
10  padding: 20px;
11  border: 1px solid #ddd;
12  position: relative; /* z-indexプロパティを有効にするために必要 */
13  z-index: 1; /* 通常の重なり順序 (他の要素の上に表示される場合) */
14}
15
16/*
17 * デバイスがカラーパレットをサポートしない（例: モノクロームディスプレイ）場合に適用されるスタイル。
18 * `color-index: 0` は、デバイスがサポートするカラーパレットのエントリがゼロであることを示します。
19 * このメディアクエリ内で、背景色とz-indexをモノクローム環境に適した値に上書きします。
20 */
21@media screen and (color-index: 0) {
22  .content-block {
23    background-color: #fff; /* モノクロームデバイスでは背景を白に */
24    color: #000; /* テキストを黒に */
25    border-color: #000; /* 枠線を黒に */
26    z-index: 0; /* モノクロームデバイスでは重なりをシンプルにするか、目立たなくする */
27  }
28}

color-indexはCSSのメディア特性の一つで、ウェブページを表示するデバイスがサポートするカラーパレットのエントリ数に応じてスタイルを適用します。引数や戻り値はなく、デバイスの条件合致時にスタイルを適用します。

サンプルコードは、.content-block要素のスタイルをデバイスのカラーサポート状況に応じて調整する例です。@media screen and (color-index: 0)は、デバイスがカラーをサポートしない（モノクロームディスプレイなど）場合に適用されます。この条件内で、background-color（背景色）やz-index（要素の重なり順序）がモノクローム環境向けに上書きされています。

z-indexは要素の重なり順序を制御するプロパティで、数値が大きいほど手前に表示されます。color-indexを用いることで、background-colorやz-indexをデバイスの表示能力に合わせて設定し、多様な環境でユーザーに最適化されたウェブデザインを提供できます。