【CSS Modules】monochromeメディア機能の使い方
monochromeメディア機能の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
monochromeプロパティは、CSSのメディアクエリにおいて、出力デバイスがモノクロ（単色）であるかどうかの情報を保持するプロパティです。このプロパティは、ウェブサイトやアプリケーションのデザインを、ユーザーが利用しているデバイスの特性に合わせて最適化するために用いられます。
具体的には、monochromeは、デバイスの色の表現能力がどの程度であるか、つまりモノクロである場合に、そのピクセルが何ビットで色深度を表現しているかという値を示します。もしデバイスがカラーに対応している場合、このmonochromeプロパティの値は0となります。一方、デバイスがモノクロである場合は、1以上の整数値が設定され、そのビット深度を表します。
このプロパティは、@mediaルール内で条件として使用されます。例えば、@media (monochrome)と指定することで、単色表示のデバイスを使用しているユーザーに対してのみ、特定のスタイルを適用できます。また、@media (monochrome: 0)と書けば、カラー表示のデバイスにスタイルを適用することが可能です。
monochromeプロパティを活用することで、モノクロ環境のユーザー体験を向上させるための調整、例えば背景色や文字色のコントラストを強めたり、色の情報が重要な画像を非表示にしたりするといった、柔軟なスタイル調整が実現できます。ウェブコンテンツのアクセシビリティを高める上で重要なメディア特性の一つです。
公式リファレンス: monochrome
構文(syntax)
1@media (monochrome: <integer>) { 2 /* スタイル定義 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません