【CSS Modules】prefers-contrastメディア機能の使い方

Copy
1/*
2 * 基本的なWebページのスタイルを定義します。
3 * これは、ユーザーが特にコントラスト設定をしていない場合に適用されます。
4 */
5body {
6  font-family: sans-serif;
7  background-color: #f0f0f0; /* 薄いグレーの背景色 */
8  color: #333333; /* 濃いグレーの文字色 */
9  padding: 20px;
10  margin: 0;
11  line-height: 1.6;
12}
13
14h1 {
15  color: #007bff; /* 青色の見出し色 */
16  margin-bottom: 15px;
17}
18
19p {
20  margin-bottom: 10px;
21}
22
23/*
24 * ユーザーが高コントラストモードを要求している場合に適用されるスタイルを定義します。
25 * (prefers-contrast: high) は、OSレベルで高コントラスト設定が有効な場合にマッチします。
26 */
27@media (prefers-contrast: high) {
28  body {
29    background-color: black; /* 背景色を黒に設定 */
30    color: white; /* 文字色を白に設定 */
31    border: 2px solid white; /* 要素の境界線を強調 */
32  }
33
34  h1 {
35    color: yellow; /* 見出し色を黄色に設定して目立たせる */
36  }
37
38  /*
39   * リンクなど、他の要素も高コントラストな配色に調整できます。
40   */
41  a {
42    color: cyan; /* リンク色をシアンに設定 */
43    text-decoration: underline;
44  }
45}
46
47/*
48 * ユーザーが低コントラストモードを要求している場合に適用されるスタイルを定義します。
49 * (prefers-contrast: low) は、OSレベルで低コントラスト設定が有効な場合にマッチします。
50 * この例では、背景をさらに明るく、文字色をより薄く設定します。
51 */
52@media (prefers-contrast: low) {
53  body {
54    background-color: #ffffff; /* 背景色を白に */
55    color: #666666; /* 文字色を薄いグレーに */
56  }
57
58  h1 {
59    color: #999999; /* 見出し色も薄いグレーに */
60  }
61}

「prefers-contrast」は、CSSのメディア特性の一つで、ユーザーがOSやブラウザの設定で要求するコントラストレベルに応じて、ウェブページのスタイルを調整するために使用されます。これにより、視覚的なニーズが異なる様々なユーザーに対して、より読みやすく、アクセシブルなウェブ体験を提供できます。この特性自体は引数や戻り値を持たず、ユーザーの設定状態を問い合わせるための条件として利用されます。

サンプルコードでは、まずデフォルトのウェブページスタイルが定義されています。これは、ユーザーが特にコントラスト設定をしていない場合に適用される基本的なデザインです。

次に、「@media (prefers-contrast: high)」ブロックでは、ユーザーが高コントラストモードを設定している場合に適用されるスタイルを定義しています。背景を黒、文字を白にすることで、コントラストを強調し、視認性を高めています。見出しやリンクの色も高コントラストな配色に変更され、重要な情報が目立つよう配慮されています。

最後に、「@media (prefers-contrast: low)」ブロックは、ユーザーが低コントラストモードを設定している場合に適用されます。この場合、背景をより明るく、文字色を薄いグレーにすることで、まぶしさを軽減し、目への負担を和らげることを目的としています。このように、「prefers-contrast」を用いることで、ユーザーの多様な視覚設定に柔軟に対応し、ウェブサイトのアクセシビリティを向上させることが可能です。

Copy
1/*
2 * デフォルトのスタイル定義
3 * ユーザーが特別なコントラスト設定を優先しない場合の表示です。
4 */
5body {
6  background-color: #f0f0f0; /* 薄い灰色の背景 */
7  color: #333333; /* 濃い灰色の文字色 */
8  font-family: sans-serif;
9  padding: 20px;
10}
11
12h1 {
13  color: #007bff; /* 青色の見出し */
14  border-bottom: 1px solid #ccc; /* 控えめな下線 */
15  padding-bottom: 10px;
16}
17
18p {
19  line-height: 1.6;
20}
21
22/*
23 * prefers-contrast: high メディア特性を使用したスタイル定義
24 * ユーザーがOSレベルで「高コントラストモード」を有効にしている場合に適用されます。
25 * これにより、テキストと背景のコントラストが強調され、視認性が向上します。
26 */
27@media (prefers-contrast: high) {
28  body {
29    background-color: #000000; /* 高コントラスト時に黒い背景 */
30    color: #ffffff; /* 高コントラスト時に白い文字 */
31    border: 3px solid #ffff00; /* ページ全体に視認性の高い黄色のボーダーを追加 */
32  }
33
34  h1 {
35    color: #ffff00; /* 高コントラスト時に黄色の見出し */
36    border-bottom: 2px solid #ffffff; /* 白い下線を強調 */
37  }
38
39  p {
40    background-color: #333333; /* 段落の背景を濃い灰色にして、さらにコントラストを高める */
41    padding: 10px;
42    border-left: 5px solid #00ff00; /* 緑色の左ボーダーで要素を強調 */
43  }
44
45  /* 例: ボタン要素のスタイルも高コントラストに最適化 */
46  button {
47    background-color: #000000;
48    color: #ffffff;
49    border: 2px solid #00ff00; /* 緑色のボーダーでボタンを強調 */
50    padding: 10px 20px;
51    font-weight: bold;
52  }
53}

prefers-contrastは、CSSのメディア特性の一つで、ユーザーがオペレーティングシステム（OS）やブラウザの設定で、表示コントラスト設定をどのように優先しているかを検知するために使用されます。これにより、開発者はユーザーのアクセシビリティ要件に応じた異なるスタイルを適用し、コンテンツの視認性を向上させることができます。

この特性は引数を取らず、特定の値を返しません。単にユーザーの設定状態に基づいて、指定されたスタイルを適用するかどうかを判断する条件として機能します。

サンプルコードでは、まずデフォルトのスタイルが定義されており、これはユーザーが特別なコントントラスト設定を優先しない場合に適用されます。例えば、body要素には薄い灰色の背景と濃い灰色の文字色が設定されています。

次に、@media (prefers-contrast: high)という記述により、ユーザーがOSレベルで「高コントラストモード」を有効にしている場合のスタイルが定義されています。この条件が満たされた場合、デフォルトのスタイルに上書きして、よりコントラストの高い表示が適用されます。具体的には、bodyの背景色が黒、文字色が白に変更され、ページ全体に視認性の高い黄色のボーダーが追加されます。h1要素も黄色の見出しになり、p要素には黒い背景と緑色の左ボーダーが適用されるなど、テキストと背景の色の差が強調され、視覚的な区別がつきやすくなることで、特に視覚に障がいを持つユーザーにとっての情報へのアクセスが容易になります。このように、prefers-contrastを活用することで、より多くのユーザーに快適なウェブ体験を提供できるのです。