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

Copy
1/* CSS カスタムプロパティを使用して基本となる色を定義 */
2:root {
3  --base-color: #3498db;    /* 例: ベースとなる青色 */
4  --accent-color: #e74c3c;  /* 例: アクセントとなる赤色 */
5}
6
7/* color-mix() 関数を使用して2つの色を混ぜ合わせ、新しい色を生成し適用する */
8.example-element {
9  /*
10   * `color-mix()` 関数は、指定されたカラースペース（例: `srgb`）で、
11   * 2つの色を特定の割合で混ぜ合わせます。
12   * ここでは、`--base-color`を50%、`--accent-color`を50%の割合で混ぜています。
13   */
14  background-color: color-mix(in srgb, var(--base-color) 50%, var(--accent-color) 50%);
15  
16  /* 以下は、サンプル要素の表示を整えるためのスタイルです */
17  width: 250px;
18  height: 100px;
19  border-radius: 8px;
20  display: flex;
21  justify-content: center;
22  align-items: center;
23  color: white; /* 混色された背景色に合わせて文字色を白に */
24  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25  font-size: 1.2em;
26  font-weight: bold;
27  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
28}

このコードは、CSSの新しい機能であるcolor-mix()関数を用いて、複数の色を混ぜ合わせる方法を示しています。

まず:rootセレクタでは、--base-colorと--accent-colorというCSSカスタムプロパティ（変数）を定義しています。これらは、それぞれベースとなる青色とアクセントとなる赤色として設定されています。

.example-elementクラスでは、background-colorプロパティにcolor-mix()関数を使用しています。color-mix()関数は、指定されたカラースペース（この例ではin srgbでsRGBカラースペース）内で、複数の色を特定の割合で混ぜ合わせ、新しい色を生成します。

この関数は、カラースペースの指定（例: in srgb）と、混ぜ合わせる色およびそれぞれの割合（例: var(--base-color) 50%, var(--accent-color) 50%）を引数として取ります。処理の結果として、混ぜ合わされた新しいCSSの色値が戻り値として返されます。

サンプルコードでは、--base-colorを50%、--accent-colorを50%の割合で混ぜ合わせています。これにより、青と赤が均等に混ざり合った中間色（紫色系の色）が計算され、.example-elementの背景色として適用されます。

color-mix()関数は、デザインシステムにおいて多様な色のバリエーションを生成したり、テーマカラーを柔軟に調整したりする際に非常に便利です。これにより、CSSのみで動的に新しい色を作り出すことが可能になり、Webデザインの表現力が向上します。

Copy
1/*
2 * このコードは、表示デバイスのカラー表示能力に応じてスタイルを適用する方法を示します。
3 * 'color' メディア機能は、デバイスがカラー表示に対応しているか、
4 * またはモノクロ表示であるかを判定するために使用されます。
5 */
6
7/*
8 * デバイスがカラー表示に対応している場合のスタイル
9 * (color) は、min-color: 1 と同義で、1ビット以上のカラーコンポーネントを持つデバイスにマッチします。
10 */
11@media (color) {
12  body {
13    background-color: #e0f2f7; /* 明るい青緑の背景 */
14    color: #212121; /* 濃い灰色のテキスト */
15  }
16
17  /* カラー表示デバイス向けのメッセージ */
18  .device-capability::before {
19    content: "このデバイスはカラー表示に対応しています。";
20    color: #2e7d32; /* 緑色のテキスト */
21  }
22}
23
24/*
25 * デバイスがモノクロ表示に対応している場合のスタイル
26 * (color: 0) は、0ビットのカラーコンポーネントを持つデバイス（モノクロ）にマッチします。
27 */
28@media (color: 0) {
29  body {
30    background-color: #f5f5f5; /* 明るい灰色の背景 */
31    color: #000000; /* 黒色のテキスト */
32  }
33
34  /* モノクロ表示デバイス向けのメッセージ */
35  .device-capability::before {
36    content: "このデバイスはモノクロ表示に限定されています。";
37    color: #b71c1c; /* 赤色のテキスト */
38  }
39}
40
41/*
42 * すべてのデバイスに適用される共通の基本スタイル
43 */
44body {
45  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
46  margin: 0;
47  padding: 20px;
48  min-height: 100vh;
49  display: flex;
50  flex-direction: column;
51  justify-content: center;
52  align-items: center;
53  text-align: center;
54}
55
56.device-capability {
57  margin-top: 30px;
58  padding: 15px 25px;
59  border: 1px solid currentColor; /* 現在のテキスト色を枠線色に利用 */
60  border-radius: 8px;
61  font-size: 1.1em;
62  font-weight: bold;
63}

CSSのcolorメディア機能は、ウェブページを表示するデバイスがどれくらいのカラー表示能力を持っているかに応じて、異なるスタイルを適用するために使われるメディアクエリの一つです。この機能には特定の引数を指定する必要がなく、また何らかの値を直接返すものでもありませんが、デバイスのカラー表示の有無やその能力の程度を判定するために利用されます。

サンプルコードでは、このcolorメディア機能を用いて、デバイスのカラー能力に応じたスタイルの切り替え方を示しています。

@media (color)という指定は、デバイスがカラー表示に対応している場合にスタイルを適用します。これは、最低でも1ビット以上のカラーコンポーネントを持つデバイス、例えば一般的なカラーモニターやスマートフォンなどにマッチし、(min-color: 1)とほぼ同じ意味を持ちます。この条件が満たされると、背景色が明るい青緑になり、テキストは濃い灰色で表示され、「このデバイスはカラー表示に対応しています。」というメッセージが現れます。

対照的に、@media (color: 0)という指定は、デバイスがカラーコンポーネントを全く持たない場合、つまりモノクロ表示のデバイスにスタイルを適用します。この条件では、背景色が明るい灰色になり、テキストは黒色で表示され、「このデバイスはモノクロ表示に限定されています。」というメッセージが表示されます。

このようにcolorメディア機能を使うことで、ユーザーが利用しているデバイスの表示能力に合わせた、より適切な見た目のウェブコンテンツを提供できるようになります。