【CSS Modules】video-dynamic-rangeメディア機能の使い方
video-dynamic-rangeメディア機能の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
video-dynamic-rangeプロパティは、ユーザーエージェントが現在出力しているビデオのダイナミックレンジ能力に関する情報を保持するプロパティです。これはCSSのメディアクエリで利用されるメディア特性の一つであり、ウェブコンテンツが表示されているデバイスのビデオ出力が、標準ダイナミックレンジ（SDR）であるか、それとも高ダイナミックレンジ（HDR）であるかを示します。
このプロパティは、主にビデオコンテンツや画像を、デバイスの表示能力に合わせて最適化するために活用されます。video-dynamic-rangeには、主にstandardとhighの二つのキーワード値があります。standardは、デバイスが標準的なダイナミックレンジ（SDR）でビデオコンテンツを表示している状態を表し、従来の一般的なディスプレイ環境に相当します。一方、highは、デバイスが高ダイナミックレンジ（HDR）でビデオコンテンツを表示する能力を持ち、現在そのモードで動作していることを示します。HDRはSDRと比較して、より広い色域と輝度範囲を提供し、よりリアルで鮮やかな映像表現を可能にします。
このプロパティを使用することで、例えばHDR対応デバイスにはHDR用の画像やビデオを、SDRデバイスにはSDR用のコンテンツを出し分けるといった、応答性の高いウェブデザインを実装できます。これにより、ユーザーは自身のデバイスに最適化された視覚体験を得ることができ、ウェブアプリケーションの表現力を向上させることが可能です。
公式リファレンス: video-dynamic-range
構文(syntax)
1@media (video-dynamic-range: high) { 2 /* スタイルを記述 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません