CSS Media Queriesにおける「@media.monochrome」とは？

「@media monochrome」メディアクエリは、出力デバイスのモノクロモードかどうかを判定し、それに応じてスタイルシートを適用する機能です。具体的には、モノクロディスプレイやプリンターでの印刷時にのみスタイルを適用することができます。

構文

@media monochrome {
  /* モノクロデバイス向けスタイル */
}

例

@media monochrome {
  body {
    background-color: #fff;
    color: #000;
  }
  
  img {
    filter: grayscale(100%);
  }
}

上記例では、モノクロデバイスの場合、body要素の背景色を白、文字色を黒に設定し、画像をグレースケールに変換します。

印刷プレビュー機能でモノクロ印刷をシミュレートする場合にも適用されます。
モノクロデバイスの種類を判定することはできません。あくまでも、出力デバイスがモノクロモードかどうかを判定します。
すべてのブラウザでサポートされているわけではなく、Internet Explorer 9 以前では動作しません。
「@media monochrome」メディアクエリは、CSS Media Queries Level 3で追加されました。

代替手段

「@media monochrome」メディアクエリ以外にも、モノクロデバイス向けのスタイルを適用する方法があります。

forced-colorsメディアクエリ：ユーザー設定のカラーモードに基づいてスタイルを適用できます。
color-gamutメディアクエリ：デバイスの色域に基づいてスタイルを適用できます。

例1：モノクロデバイスで背景色と文字色を変更

body {
  background-color: #f0f0f0;
  color: #333;
}

@media monochrome {
  body {
    background-color: #fff;
    color: #000;
  }
}

このコードは、カラーデバイスでは背景色を#f0f0f0、文字色を#333に設定します。一方、モノクロデバイスでは背景色を白、文字色を黒に設定します。

例2：モノクロデバイスで画像をグレースケールに変換

img {
  filter: none;
}

@media monochrome {
  img {
    filter: grayscale(100%);
  }
}

このコードは、カラーデバイスでは画像にフィルタを適用せず、そのまま表示します。一方、モノクロデバイスでは画像をグレースケールに変換します。

例3：モノクロデバイスで罫線を非表示

table {
  border-collapse: collapse;
}

tr, th, td {
  border: 1px solid #ccc;
}

@media monochrome {
  tr, th, td {
    border: none;
  }
}

このコードは、カラーデバイスでは表に罫線を表示します。一方、モノクロデバイスでは罫線を非表示にします。

「@media monochrome」メディアクエリは、他のメディアクエリと組み合わせて使用することができます。
上記の例はあくまで一例であり、状況に応じて様々なスタイルを設定することができます。

近年では、より汎用性の高い代替方法として、以下の2つのメディアクエリが推奨されています。

color-gamutメディアクエリ

color-gamutメディアクエリは、デバイスの色域に基づいてスタイルを適用することができます。具体的には、Rec. 2020やsRGBなどの色空間を指定することで、その色域に対応したデバイスにのみスタイルを適用することができます。

例

@media (color-gamut: sRGB) {
  body {
    background-color: #f0f0f0;
    color: #333;
  }
}

@media (color-gamut: P3) {
  body {
    background-color: #e0e0e0;
    color: #444;
  }
}

この例では、sRGB色域に対応したデバイスでは背景色を#f0f0f0、文字色を#333に設定し、P3色域に対応したデバイスでは背景色を#e0e0e0、文字色を#444に設定します。

利点

モノクロデバイスだけでなく、広色域ディスプレイにも対応できます。
「@media monochrome」メディアクエリよりも高精度にデバイスを判定できます。

欠点

color-gamut値の解釈がブラウザによって異なる場合があります。
比較的新しく導入されたメディアクエリであり、すべてのブラウザでサポートされているわけではありません。

forced-colorsメディアクエリ

forced-colorsメディアクエリは、ユーザー設定のカラーモードに基づいてスタイルを適用することができます。具体的には、Windows 10やmacOSなどのOSで設定できるカラーモードを判定し、それに応じてスタイルを適用することができます。

例

@media (forced-color: active) {
  body {
    background-color: #fff;
    color: #000;
  }
}

この例では、ユーザーがOSでカラーモードを有効にしている場合、背景色を白、文字色を黒に設定します。

利点

モノクロモードだけでなく、ダークモードにも対応できます。
ユーザー設定を尊重したデザインを実現できます。

欠点

ユーザーがカラーモードを無効にしている場合、効果が適用されません。
比較的新しく導入されたメディアクエリであり、すべてのブラウザでサポートされているわけではありません。

上記以外にも、JavaScriptを使用してデバイスの種類を判定し、それに応じてスタイルを動的に変更する方法もあります。

「@media monochrome」メディアクエリは、サポート範囲が限られているため、現在はcolor-gamutメディアクエリやforced-colorsメディアクエリの使用が推奨されています。これらのメディアクエリは、より高精度にデバイスを判定することができ、ユーザー設定を尊重したデザインを実現することができます。