CSSのfilterプロパティは、画像にさまざまな効果を簡単に適用するための強力なツールです。この記事では、代表的なフィルター効果とその使い方について詳しく説明します。
grayscale（グレースケール）で白黒画像にする
grayscaleフィルターを使用すると、画像を白黒に変換することができます。色を完全に除去し、グレースケールで表示します。
img.grayscale {
filter: grayscale(100%);
}100%の値を指定すると完全なグレースケールになりますが、0%では元の色が維持されます。
sepia（セピア調）でアンティークな雰囲気を追加
sepiaフィルターを使うことで、画像に温かみのあるセピア調の効果を加えることができます。
img.sepia {
filter: sepia(100%);
}100%の値で完全にセピア調になり、0%では効果がありません。
blur（ぼかし）で画像をソフトに
blurフィルターを適用すると、画像をぼかしてソフトな印象にすることができます。
img.blur {
filter: blur(5px);
}値が大きいほどぼかしが強くなります。5pxのぼかしを適用した例です。
brightness（明るさ）で画像の明るさを調整
brightnessフィルターを使うことで、画像の明るさを調整することができます。
img.brightness {
filter: brightness(150%);
}100%が元の明るさで、150%は明るさが50%増加します。暗くしたい場合は100%未満の値を使用します。
contrast（コントラスト）で鮮明さを調整
contrastフィルターを適用すると、画像のコントラストを強調したり、弱めたりすることができます。
img.contrast {
filter: contrast(200%);
}100%が元のコントラストで、200%はコントラストが2倍になります。0%では完全に色が消えます。
invert（反転）でカラーを反転
invertフィルターを使用すると、画像の色を反転させることができます。
img.invert {
filter: invert(100%);
}100%で完全に色が反転します。0%では元の色が維持されます。
saturate（彩度）で色の鮮やかさを調整
saturateフィルターを使って、画像の彩度を調整することで、色をより鮮やかにしたり、抑えたりできます。
img.saturate {
filter: saturate(200%);
}100%が元の彩度で、200%は彩度が2倍になります。逆に、0%では完全に白黒になります。
hue-rotate（色相の回転）で色を変更
hue-rotateフィルターを使うと、画像の色相を回転させることができます。
img.hue-rotate {
filter: hue-rotate(90deg);
}90度の回転で、色相が90度変更されます。0度では元の色が維持されます。
drop-shadow（ドロップシャドウ）で影を追加
drop-shadowフィルターを使うことで、画像に影を付けることができます。
img.drop-shadow {
filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));
}10pxのオフセット、5pxのぼかし、そして半透明の黒い影が付けられます。
組み合わせでさらに多彩な効果を
複数のフィルターを組み合わせることで、より複雑な効果を作成できます。
img.combined {
filter: grayscale(50%) sepia(30%) blur(2px);
}この例では、画像を50%グレースケールにし、30%セピア調にし、2pxのぼかしを適用しています。
まとめ
CSSのfilterプロパティを活用することで、デザインの幅が広がり、視覚的に魅力的な画像を簡単に作成できます。さまざまな効果を試して、あなたのウェブサイトに最適なスタイルを見つけてください。
