【CSS Modules】dynamic-rangeメディア機能の使い方

Copy
1/*
2 * dynamic-rangeメディア特性のサンプルコード
3 *
4 * このコードは、ディスプレイのダイナミックレンジ（標準SDRか高HDRか）に基づいて
5 * 要素のスタイルを調整する方法を示します。
6 * システムエンジニア初心者向けに、メディア特性の基本的な使用例としています。
7 */
8
9/* 共通の基本スタイル */
10.display-status {
11  padding: 20px;
12  margin: 20px;
13  border-radius: 8px;
14  font-family: sans-serif;
15  text-align: center;
16  border: 1px solid #ddd;
17  min-height: 80px; /* 内容が変わってもレイアウトが大きく崩れないように */
18  display: flex;
19  align-items: center;
20  justify-content: center;
21  font-size: 1.1em;
22}
23
24/*
25 * dynamic-rangeが「standard」（標準ダイナミックレンジ, SDR）の場合のスタイル
26 * 一般的なディスプレイ環境で適用されます。
27 */
28@media (dynamic-range: standard) {
29  .display-status {
30    background-color: #e3f2fd; /* 薄い青 */
31    color: #1a237e; /* 濃い青 */
32    border-color: #90caf9;
33  }
34
35  .display-status::before {
36    content: "現在の表示は「標準ダイナミックレンジ (SDR)」です。";
37  }
38}
39
40/*
41 * dynamic-rangeが「high」（高ダイナミックレンジ, HDR）の場合のスタイル
42 * HDR対応のディスプレイと環境で適用されます。
43 * より鮮やかな色やコントラストを表現できる可能性があります。
44 */
45@media (dynamic-range: high) {
46  .display-status {
47    background-color: #4a148c; /* 深い紫 */
48    color: #fce4ec; /* 薄いピンク */
49    border-color: #e040fb;
50    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* HDRで際立たせるための軽いエフェクト */
51  }
52
53  .display-status::before {
54    content: "現在の表示は「高ダイナミックレンジ (HDR)」です。";
55  }
56}
57
58/*
59 * HTMLでの使用例:
60 * <div class="display-status"></div>
61 *
62 * このCSSは、ブラウザとディスプレイがSDRかHDRかによって、
63 * .display-status要素の背景色、文字色、表示テキストが自動的に切り替わります。
64 */

このサンプルコードは、CSSのdynamic-rangeというメディア特性の基本的な使用方法を示しています。dynamic-rangeは、ユーザーのディスプレイが「標準ダイナミックレンジ (SDR)」か「高ダイナミックレンジ (HDR)」かといった、表示の能力を検出するために使用されます。この特性自体は引数を取りませんし、特定の値を返すものではなく、@mediaルール内で条件として利用されます。

コードではまず、.display-statusというクラスに共通の基本スタイルを設定しています。次に、@media (dynamic-range: standard)という記述で、ディスプレイがSDR環境である場合に適用されるスタイルを定義しています。ここでは、背景色を薄い青、文字色を濃い青にし、「現在の表示は『標準ダイナミックレンジ (SDR)』です。」というテキストが表示されるように設定しています。

一方、@media (dynamic-range: high)という記述は、ディスプレイがHDR環境である場合に適用されます。このブロックでは、背景色を深い紫、文字色を薄いピンクに変更し、さらに「現在の表示は『高ダイナミックレンジ (HDR)』です。」というテキストを表示します。このように、dynamic-rangeメディア特性を使用することで、システムはディスプレイの能力に応じて、同じHTML要素に対して異なる視覚表現を自動的に適用し、ユーザー体験を最適化できることを示しています。

Copy
1/*
2 * このCSSコードは、ユーザーのデバイスが高ダイナミックレンジ (HDR) をサポートしている場合にのみ、
3 * 特定のスタイルを適用します。
4 * 'dynamic-range: high' は、そのデバイスがHDRコンテンツを適切に表示できることを示し、
5 * スタイル適用をHDR環境に限定します。
6 */
7@media (dynamic-range: high) {
8  /*
9   * HDR環境に合わせたスタイルの例：
10   * 背景色をより鮮やかな色に設定し、テキストの色を明るくします。
11   * これにより、HDRディスプレイの広い色域や高い輝度を活かした表現が可能になります。
12   */
13  body {
14    background-color: #ff00ff; /* 例: HDRでより鮮やかに見えるマゼンタ */
15    color: #ffffff;            /* 明るいテキスト色 */
16  }
17
18  /*
19   * 特定の要素に対して、HDRの恩恵を受けるような装飾を適用することもできます。
20   * 例として、より際立つ境界線や輝くような影を設定します。
21   */
22  .highlight-content {
23    border: 2px solid #00ffff;                           /* 例: HDRでより際立つシアンの境界線 */
24    box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7); /* 例: HDRで輝くような影 */
25  }
26}

dynamic-rangeは、CSSのメディア特性（media-feature）の一つです。これは、ユーザーが使用しているディスプレイのダイナミックレンジ能力に応じてスタイルを適用するために使用されます。ダイナミックレンジとは、ディスプレイが表示できる最も明るい色と最も暗い色の輝度の範囲を指します。

この特性には引数はなく、特定のダイナミックレンジ能力を持つデバイスを条件として判定します。戻り値もありません。

サンプルコードの@media (dynamic-range: high)は、「閲覧しているデバイスが高ダイナミックレンジ（HDR）表示に対応している場合にのみ、このブロック内のCSSスタイルを適用する」という意味を持っています。highという値は、そのデバイスが標準的なダイナミックレンジ（SDR）よりも広い色域と高い輝度レベルを持つコンテンツを適切に表示できることを示します。

これにより、開発者はHDR対応デバイスの能力を最大限に活用し、より鮮やかで奥行きのある視覚表現を提供できるようになります。例えば、HDR環境に合わせた背景色やテキスト色の調整、または要素の境界線や影をより際立たせる装飾などが可能です。この機能は、異なるデバイスの表示能力に合わせた最適化を実現し、ユーザー体験を向上させるために役立ちます。