CSS一行だけでサイトを白黒にする

結論

filter: grayscale(1)

ページ全体に設定を適用したい場合はhtmlタグの中に書きます。

<style>
html {
  filter: grayscale(1);
}
</style>

解説

CSSのfilterフィルタープロパティを使うと、画像にフィルターをかけることができます。

grayscaleグレースケールは画像をモノクロにしたいときに使います。0%が元の状態で、50%だと半分程度、100%で完全にモノクロになります。

サンプルコード

.img {
  filter: grayscale(50%);
}

表示例

元の画像

grayscale(50%)

grayscale(1)

なぜこんなことをするの？

中国では、災害や死去により哀悼の意を示すため、ほぼすべての本土メディアがトップページをモノクロに切り替えことがあります。