（2016/10/17 10:14 更新: ベンダープレフィックスの必要性を追記）

先日タイ国王が崩御されたが、これを受けてタイ航空をはじめ、多くのタイ関連Webページがモノクロ化されて喪に服しており話題になっている。タイ国政府観光庁の日本向けサイトもモノクロになっていた。

テキストのみのサイトならばともかく、画像も多いサイトであれば、アセットをすべてグレースケール化しなければならず、改修は結構な工数がかかる...

.....ように思うが、実際はCSS filterを使うことで簡単に実現できる。CSS filterは、要素に様々な視覚効果をCSSのみで付加できる。当然画像にも効果がある。

これを使い、body要素全体にグレースケール効果を与えれば3行[1]で服喪することができる。

body {
    filter: grayscale(100%);
}

確認したところ、最初に例としてあげた2つのサイトもこの方法を使っていた。

CSS filterは、他にもぼかしやコントラスト、彩度の変更などができる。手軽にWebサイトの表現の幅が広がり便利だ。

思うに、Webフロントエンド各位においては現在の状況は他人事ではなく、あまり考えたくはないが、遠くない将来にに今上天皇が崩御されることもありえる。その際に、謹慎を好み同調圧力の強い日本においては特に、Webサイトをモノクロにせよとの強い要請を受ける可能性がある。この場合において、上で上げた方法を知っているのと知らないのとでは工数に大きく差が出てしまう。

全く概念を知らないこと ―つまり、「そもそもそういう方法があったのか」と思いつかないようなこと― を知ることは難しい。そもそも検索しようとも思いつかないからだ。偶然にそれを知るしかないのだと思う。そこで、少しでも誰かの偶然に引っかかるべくこの記事を書いた。

プミポン国王のご冥福をお祈りします。

  1. ただし、必要であれば非対応ブラウザのためにベンダープレフィックスを付加すること ↩︎