[css]何でもかんでもモノクロにする方法

簡単。

どういうアレか
要するに
使用例
余談

どういうアレか

フルカラーの画像をモノクロにしたいけど画像触るのめんどい
埋め込んだgoogleマップをモノクロにしたい
ページ上のコンテンツをモノクロにしたい
めんどいんでcssでどうにかならんのか

みたいなのを解決する。

要するに

filterを使う。

filter - CSS: カスケーディングスタイルシート | MDN

filter は CSS のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。

IEとOperaMiniがダメくさい。

CSS Filter Effects | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile w...

・・・無視して良くない？

使用例

「googleマップを埋め込んで、通常はモノクロでマウスオーバー時にフルカラーにする」をやるとする。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25891.149535964872!2d140.23065384990394!3d35.79026718079961!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x602262760d13cbf5%3A0x604589d8c0cb37ed!2z5Y2w5peb5rK8!5e0!3m2!1sja!2sjp!4v1638260214891!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

iframe{
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}
iframe:hover{
    filter: grayscale(0%);
}

簡単。

apiをどうのこうのしてGoogleマップを自作テーマの配色で云々、ってのがたまにあるけど、あれは読み込み回数に上限があるというか、有料じゃないとだめというかで色々大掛かりになっちゃうんで、ざっくり変えたいならfilterでやっちゃえばいいよねっていう。地図だけでなくiframe内の全てにfilterが掛かるのがアレだけど。

filterは色々やれるやつなので、調べてみると素敵な応用がひらめくかもしれない。だけどまあ、あんまりやりすぎると後から修正とかするときにめんどくさくなることにもなりかねないので怖い。

余談

「Google Maps Platform」っていうみたい。機能により金額が違ったりするので、導入は色々踏まえないといけない。

Google Maps Platform の課金 | Google for Developers

というか、これをやる場合はwebサイト用にGoogleアカウントが必要になる。制作会社に丸投げして制作会社のアカウントで導入して、制作会社と連絡が取れなくなった場合詰む。自分ちの地図を見せたいだけなら普通に埋め込めばいいし、最近はスマホのアクセスが多いご時世だから、ページ上に埋め込むよりも本家サービスにリンクを飛ばして表示させたほうが使い勝手的に上だし、っていうね。便利だけど不便というか、なんというか。

凝ったことをしなきゃいけない必然性に駆られたことがない。