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

Copy
1/*
2 * 基本的なビデオ要素のレスポンシブスタイルを定義します。
3 * 画面サイズに合わせてビデオの表示を調整し、常に適切に表示されるようにします。
4 */
5video {
6  max-width: 100%; /* 親要素の幅に合わせて最大幅を設定し、レスポンシブに対応 */
7  height: auto;    /* アスペクト比を維持しながら高さを自動調整 */
8  display: block;  /* ブロック要素として表示し、レイアウトの崩れを防ぐ */
9  border: 2px solid #ccc; /* 視覚的な区切りのための枠線 */
10  border-radius: 8px; /* 角を少し丸くする */
11  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽めの影で立体感を出す */
12}
13
14/*
15 * メディアクエリ: video-dynamic-range
16 * このメディア特性は、デバイスが表示できるビデオのダイナミックレンジに基づいています。
17 * 「standard」はSDR（標準ダイナミックレンジ）ビデオの表示を想定した環境です。
18 * SDR環境では、ビデオが適切に見えるようにスタイルを調整できます。
19 */
20@media (video-dynamic-range: standard) {
21  video {
22    /* SDR環境向けに、コントラストや明るさを微調整して視認性を向上させる例 */
23    filter: brightness(105%) contrast(105%);
24    border-color: #607d8b; /* SDR環境向けの落ち着いた枠線の色 */
25  }
26}
27
28/*
29 * メディアクエリ: video-dynamic-range
30 * 「high」はHDR（ハイダイナミックレンジ）ビデオの表示を想定した環境です。
31 * HDR環境では、より広い色域と明るさを利用できるため、通常はフィルターを適用せず、
32 * その特性を最大限に活かすようなスタイル調整を行います。
33 */
34@media (video-dynamic-range: high) {
35  video {
36    /* HDR環境では、デバイスの本来の能力を活かすためフィルターをリセット */
37    filter: none;
38    border-color: #007bff; /* HDRの鮮やかさに合わせた枠線の色 */
39    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.25); /* HDR向けの少し強調された影 */
40  }
41}

このサンプルコードは、ウェブページに埋め込まれたvideo要素をレスポンシブに対応させ、さらにデバイスのビデオ表示能力に応じて最適なスタイルを適用する方法を示しています。

まず、video要素の基本的なスタイルでは、max-width: 100%とheight: autoにより、親要素の幅に合わせてビデオのサイズが自動調整され、アスペクト比を維持しながら常に画面に収まるようにしています。display: blockは、ビデオ要素がブロックレベル要素として振る舞い、レイアウトが安定するのを助けます。

video-dynamic-rangeは、デバイスが表示できるビデオのダイナミックレンジ（色の明るさやコントラストの範囲）を検出するCSSメディア特性です。この特性に引数や戻り値はなく、現在の環境がSDR（標準ダイナミックレンジ）かHDR（ハイダイナミックレンジ）かによってスタイルを切り替えるために使用されます。

@media (video-dynamic-range: standard)のブロックは、デバイスがSDRビデオ表示環境である場合に適用されるスタイルを定義しています。SDR環境では、ビデオの視認性を向上させるためにfilter: brightness(105%) contrast(105%)で明るさやコントラストを微調整する例が示されています。

一方、@media (video-dynamic-range: high)のブロックは、デバイスがHDRビデオ表示環境である場合に適用されます。HDR環境は、より広い色域と高い明るさを表現できるため、filter: noneでフィルターをリセットし、デバイス本来の表示能力を最大限に活かすよう調整しています。枠線の色や影もHDRの鮮やかさを引き立てるように設定されており、ビデオコンテンツが最高の品質で表示されることを目指します。

このようにvideo-dynamic-rangeを使用することで、さまざまな表示能力を持つデバイスに対し、それぞれの環境で最適なビデオ体験を提供できるようになります。

Copy
1/*
2 * video-dynamic-range メディア特性を用いて、ビデオ要素の高さを調整するサンプルコードです。
3 * このメディアクエリは、システムがビデオコンテンツを高ダイナミックレンジ (HDR) で表示できる場合に適用されます。
4 * 初心者向けに、通常のビデオ表示とHDR表示での高さの変更例を示します。
5 */
6
7/* すべてのビデオ要素に適用される基本的なスタイル */
8video {
9  width: 100%; /* 親要素の幅いっぱいに広げる */
10  height: auto; /* アスペクト比を維持して高さを自動調整 */
11  display: block; /* ブロック要素として扱い、前後の要素との配置を整える */
12  max-height: 400px; /* 通常時のビデオの最大高さを設定 */
13  background-color: #000; /* ビデオがロードされるまでの背景色 */
14  border: 1px solid #ccc; /* 視認性向上のための境界線 */
15}
16
17/*
18 * 高ダイナミックレンジ (HDR) のビデオが表示可能な場合に適用されるスタイル
19 * この条件は、例えばHDR対応ディスプレイでHDRコンテンツを再生する際にマッチします。
20 */
21@media (video-dynamic-range: high) {
22  video {
23    /*
24     * HDRビデオの場合、より没入感を高めるために最大高さを広げる例。
25     * これは、HDRコンテンツがより広い色域やコントラストを持つため、
26     * 大画面やより広い表示領域で体験が向上するという想定に基づいています。
27     */
28    max-height: 600px; /* HDR対応時には、ビデオの最大高さを大きくする */
29    border-color: #f00; /* HDR時に視覚的な違いを示すための境界線の色変更 */
30  }
31}

このサンプルコードは、CSSのvideo-dynamic-rangeメディア特性を使用して、ビデオ要素の表示を、システムがビデオコンテンツを高ダイナミックレンジ（HDR）で表示できるかどうかに応じて調整する方法を示しています。

video-dynamic-rangeは、引数や戻り値を直接持たないメディア特性です。これは、特定のデバイスや環境がサポートするビデオのダイナミックレンジ能力を検出するための条件として機能します。たとえば、highという値は、システムが高ダイナミックレンジに対応していることを意味します。

コードの最初の部分では、すべてのビデオ要素に対して、幅100%で高さを自動調整し、通常時の最大高さを400ピクセルに設定する基本的なスタイルを定義しています。

その後の@media (video-dynamic-range: high)ブロックでは、システムがHDRコンテンツを表示できる場合にのみ適用される特別なスタイルを指定しています。この条件が満たされると、ビデオの最大高さを600ピクセルに拡大し、境界線の色を変更する設定が適用されます。これにより、HDR対応の環境では、より大きな表示領域でビデオを楽しむことができ、コンテンツの品質に合わせた最適なユーザー体験を提供できます。システムエンジニアにとって、このようなメディア特性を活用することで、ユーザーの視聴環境に応じた柔軟なデザイン調整が可能になります。