【CSS Modules】forced-colorsメディア機能の使い方

Copy
1/*
2 * forced-colors メディア特性は、ユーザーがオペレーティングシステムの
3 * 強制カラーモード（ハイコントラストモードなど）を有効にしているかどうかを検出します。
4 * 'active' の値は、強制カラーモードが有効であることを示します。
5 * このメディアクエリ内でスタイルを定義することで、ハイコントラスト環境に
6 * 最適化されたデザインを提供できます。
7 */
8
9/* 通常のリンクのスタイル */
10.nav-link {
11  color: #007bff; /* 青色のテキスト */
12  background-color: transparent;
13  padding: 5px 10px;
14  border: 1px solid transparent;
15  text-decoration: none;
16}
17
18/* 強制カラーモードが「active」の場合に適用されるスタイル */
19@media (forced-colors: active) {
20  .nav-link {
21    /*
22     * 強制カラーモードでは、ブラウザがユーザーのシステム設定に基づいて
23     * 色を上書きするため、背景色やボーダーが意図せず見えなくなることがあります。
24     * ここでは、テキストの色を currentColor (システムの色) に合わせ、
25     * 明確なボーダーを追加することで、要素の視認性を確保します。
26     * background-color を transparent に設定することで、システムの背景色を妨げません。
27     */
28    color: LinkText; /* 強制カラーモードのリンクテキスト色 */
29    background-color: transparent; /* 背景色を透明にする */
30    border: 2px solid LinkText; /* システムのリンク色に合わせたボーダー */
31    text-decoration: none; /* 下線がシステムのテーマで強調される場合があるため、明示的に指定 */
32  }
33
34  .nav-link:hover,
35  .nav-link:focus {
36    color: HighlightText; /* 強制カラーモードのハイライトテキスト色 */
37    background-color: Highlight; /* 強制カラーモードのハイライト背景色 */
38    border-color: Highlight;
39  }
40}

forced-colorsは、ユーザーがオペレーティングシステムの強制カラーモード、例えばWindowsのハイコントラストモードなどを有効にしているかどうかを検出するためのCSSメディア特性です。この特性の値がactiveである場合、強制カラーモードが現在適用されていることを示します。これにより、開発者はハイコントラスト環境に特化したスタイルを適用し、ウェブサイトのアクセシビリティと視認性を向上させることができます。

サンプルコードでは、まず一般的な環境におけるリンク（.nav-link）の基本的なスタイルを定義しています。その後、@media (forced-colors: active)というメディアクエリ内で、強制カラーモードが有効な場合に適用されるスタイルを記述しています。このモードでは、ブラウザがユーザーのシステム設定に基づいて色を上書きするため、通常の色指定では意図しない表示になることがあります。そこで、テキスト色にはシステムのリンクテキスト色を表すLinkTextを、背景色にはtransparentを指定し、システムの背景色を妨げないようにしています。さらに、2px solid LinkTextのような明確なボーダーを追加することで、要素の境界をはっきりとさせ、視認性を確保しています。

ホバー時やフォーカス時には、システムのハイライト色（HighlightTextやHighlight）を使用することで、インタラクティブな要素に対するフィードバックもシステム設定に合わせ、違和感なく操作できるように工夫されています。このforced-colorsメディア特性自体には、特定の引数や戻り値は設定されていません。

Copy
1/*
2 * 強制カラーモードがアクティブな場合に適用されるスタイルを定義します。
3 * forced-colors: active は、Windowsのハイコントラストテーマなど、
4 * ユーザーエージェントが色の表示を強制的に変更している場合にマッチします。
5 * このメディアクエリを使用することで、アクセシビリティを向上させることができます。
6 */
7@media (forced-colors: active) {
8  /*
9   * 全ての要素に対して、ユーザーエージェントの強制カラー設定が適用される際に、
10   * 境界線を明示的に設定して要素の視認性を高める一例です。
11   * System Colors (例: WindowText, CanvasText, Highlight) を使用することが推奨されます。
12   */
13  .element {
14    /* 背景色と文字色はユーザー設定によって上書きされやすいため、
15     * ここでは視認性の高い境界線を設定します。 */
16    border: 2px solid WindowText; /* システムのウィンドウテキスト色を使用 */
17    background-color: Canvas;     /* システムの背景色（キャンバス）を使用 */
18    color: CanvasText;            /* システムの文字色を使用 */
19    padding: 10px;
20    margin-bottom: 10px;
21  }
22
23  /* ボタンなど、インタラクティブな要素に対するスタイル調整の例 */
24  button {
25    border: 2px solid ButtonText; /* システムのボタンテキスト色を使用 */
26    background-color: ButtonFace; /* システムのボタンフェイス色を使用 */
27    color: ButtonText;            /* システムのボタンテキスト色を使用 */
28    padding: 8px 15px;
29  }
30
31  /* リンクのスタイル調整の例 */
32  a {
33    color: LinkText; /* システムのリンクテキスト色を使用 */
34    text-decoration: underline; /* リンクであることを明確にするために下線を強制 */
35  }
36}
37
38/*
39 * 通常の表示モードでのスタイル (forced-colors が active でない場合)
40 * この部分は @media ブロックの外に定義し、基本的なスタイルを提供します。
41 */
42.element {
43  background-color: #f0f0f0;
44  color: #333;
45  border: 1px solid #ccc;
46  padding: 10px;
47  margin-bottom: 10px;
48}
49
50button {
51  background-color: #007bff;
52  color: white;
53  border: none;
54  padding: 8px 15px;
55  cursor: pointer;
56}
57
58a {
59  color: #007bff;
60  text-decoration: none;
61}

forced-colorsは、CSSのメディアクエリの一つで、ユーザーが強制カラーモードを有効にしているかどうかを判定するために使用されます。強制カラーモードとは、オペレーティングシステムが色の表示を強制的に変更するテーマ（例えばWindowsのハイコントラストテーマ）のことで、視覚障がいのある方など、特定の色の組み合わせでないとコンテンツを読みにくいユーザーのアクセシビリティを向上させる目的で提供されています。

このメディアクエリは引数を取らず、特定の値を返すこともありません。@media (forced-colors: active)のように記述することで、強制カラーモードがアクティブな場合にのみ適用されるスタイルを定義できます。

サンプルコードでは、強制カラーモードが有効な際に、要素の視認性を高めるためのスタイルが適用されています。例えば、.elementクラスには、システムのウィンドウテキスト色（WindowText）を境界線に、システムの背景色（Canvas）を背景に、システムの文字色（CanvasText）を文字色に設定することで、通常のスタイルよりも明瞭に区別できるように調整されています。これにより、どんなハイコントラストテーマが適用されてもコンテンツが読みやすくなります。同様に、buttonやa要素もシステムのボタンやリンクの色（ButtonText、LinkTextなど）に合わせてスタイルが調整され、機能が明確に伝わるように工夫されています。このように、通常のスタイルとは別に、アクセシビリティを考慮したスタイルを提供することが可能です。