@media (monochrome)

アットメディアモノクローム（メディアクエリ）

意味モノクロームディスプレイの場合に適用

@media (monochrome)とは？

@media (monochrome)は、メディアクエリの一種で、モノクローム（白黒）ディスプレイを持つデバイス向けにスタイルを適用するために使用します。

@media (monochrome)の具体的な使い方

モノクロームディスプレイ用のスタイル設定例

@media (monochrome) {
    body {
        background-color: gray;
        color: white;
    }
}

モノクロームディスプレイを持つデバイスに対して、ページの背景色をグレーにし、テキストの色を白に設定しています。これにより、カラーではなく白黒で表示されるディスプレイでも読みやすいページになります。

@media (monochrome)に関するよくある質問

Q. monochromeの値は何を指定する？

A. monochromeメディア特性は、デバイスのピクセルあたりのビット数を指定します。例えば、@media (monochrome: 1)は1ビットのモノクロームディスプレイを表します。値が0の場合はカラーディスプレイを意味します。

Q. カラーディスプレイでも適用される？

A. いいえ、@media (monochrome)はモノクロームディスプレイを持つデバイスにのみ適用されます。カラーディスプレイでは無視されます。カラーディスプレイ用のスタイルは別に定義する必要があります。

@media (monochrome)が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの@media (monochrome)や@media print、@media (max-aspect-ratio: ...)、@media (pointer: ...)、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。