[css]画像をcssだけでモノクロにしてみよう

画像をモノクロにするために、今まで画像編集ソフトを使っていませんでしたか？そんなことをしなくてもcssで画像をモノクロにできます。

今回は、その方法についてサンプルを使ってご紹介したいと思います。

画像をモノクロにしてみよう

htmlで記述したimgタグに対して、cssでgrayscaleを設定することで、モノクロにすることができます。

まずは、色がついている画像を貼ってみましょう

<div class="grayscale"><img src="画像のURL"></div>

上記の画像をモノクロにしたいと思います。

次の様なcssを用意しましょう。

<style>
.grascale img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
</style>

画像をモノクロにしてみたサンプル実装例

上記の様に画像がcssだけでモノクロになりましたね。
こちらのgrayscaleの数値は０％にしますと、色がついたものになります。

まとめ

今回は、画像編集ソフトを使わず、cssだけでモノクロにする方法をご紹介させていただきました。この方法を使うことで、今まで一手間あったものがcssで解決できてしまいますね。また、モノクロの画像とフルカラーの画像2枚を用意することなくhoverで切り替えたり、見せ方を変えたりなど様々な場面に役に立ちそうです。