Webデザインにおいて、画像の色調を変更することで、シンプルで洗練されたデザインを実現できます。特に、画像をモノクロ（グレースケール）にすることで、背景を引き立たせたり、ユーザーの注目を特定の部分に誘導したりできます。
本記事では、CSSを使って画像をモノクロにする方法を解説します。
. CSSの filter: grayscale() を使う
CSSのfilterプロパティを利用すると、簡単に画像をモノクロにすることができます。
CSS
|
1 2 3 4 5 |
img { filter: grayscale(100%); } |
HTML
|
1 2 3 |
<img src="sample.jpg" alt="サンプル画像"> |
このコードを適用すると、画像が完全にモノクロになります。grayscale(100%)の数値を変更することで、モノクロの強さを調整できます。例えば、grayscale(50%)にすると半分だけモノクロになります。
2. ホバー時にモノクロにする
画像を通常時はカラー、ホバー時のみモノクロにすることも可能です。
CSS
|
1 2 3 4 5 6 7 8 9 |
img { transition: filter 0.5s ease-in-out; } img:hover { filter: grayscale(100%); } |
これにより、マウスを画像に載せたときに、スムーズにモノクロへ変化します。
3. モノクロ + 他のフィルターを組み合わせる
filter は複数の効果を同時に適用できるため、モノクロにしたうえでコントラストを上げることも可能です。
サンプルコード
|
1 2 3 4 5 |
img { filter: grayscale(100%) contrast(120%); } |
このコードでは、モノクロ化 + コントラストを20%アップ させています。よりシャープなモノクロ画像を作りたいときに便利です。
4. CSSのみで背景画像をモノクロにする
filterはimgタグだけでなく、background-image にも適用できます。
サンプルコード
|
1 2 3 4 5 6 7 8 9 |
.background { width: 100%; height: 300px; background-image: url('sample.jpg'); background-size: cover; filter: grayscale(100%); } |
しかし、filterは要素全体に適用されるため、テキストなども影響を受けてしまう点に注意してください。
5. モノクロをCSSだけで解除する方法
filter: none; を設定することで、元のカラーに戻すことができます。
サンプルコード
|
1 2 3 4 5 6 7 8 9 |
img { filter: grayscale(100%); } img.color { filter: none; } |
画像にclass="color" を追加すると、モノクロが解除されます。
|
1 2 3 |
<img src="sample.jpg" alt="サンプル画像" class="color"> |
