CSSで画像や要素をモノクロにする方法【初心者向け解説】

CSSのgrayscaleフィルターとは

CSSの grayscale() フィルターは、画像や要素をモノクロ化するための便利なプロパティです。数値で効果の度合いを調整でき、0がカラー、1が完全な白黒になります。

.monochrome {
  filter: grayscale(1);
}

HTMLの例：

<img src="example.jpg" class="monochrome">

この設定により、画像は白黒で表示されます。

グレースケールの値は0から1の間で調整可能です。たとえば、以下のように設定すれば半分だけ白黒にすることもできます。

img {
  filter: grayscale(0.5);
}

モノクロ状態から、マウスホバー時にカラーへ戻すことで動的な演出も可能です。

img {
  filter: grayscale(1);
  transition: filter 0.5s ease;
}

img:hover {
  filter: grayscale(0);
}

ユーザーがマウスを乗せると、スムーズにカラー表示に戻ります。

grayscale() は、画像以外のHTML要素にも使えます。ただし、テキストなどには効果が出にくい場合があります。その場合は background-image などと併用しましょう。

div {
  background-image: url("example.jpg");
  filter: grayscale(1);
}

主要なブラウザ（Chrome、Edge、Firefox、Safari）では広く対応しています。IEではサポートされていません。

画像をモノクロにすることで、視覚的な差別化やブランドのトーンを強調できます。ただし、画像検索でのカラー表示が重要な場合は、CSSフィルターでなく元画像の加工も検討しましょう。

CSSの filter: grayscale() を使えば、簡単に画像や要素をモノクロ表示できます。ホバーとの組み合わせで動きのあるデザインにもなります。

シンプルかつ効果的な演出なので、ぜひ使いこなしてみてください。