複数画像に対応可！CSSのfilterプロパティでimgを美しく表示する方法

今回ご紹介するCSSのfilterプロパティとは、画像にフィルターをかけることでPhotoshopでしかできないような画像加工が、CSSでもできてしまう魔法のようなプロパティです。

すーさん

本記事では、そんな便利なCSSのfilterプロパティを使って、画像に色や明度、ぼかしを簡単に加える方法をご紹介していきます。

おすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選で詳しく解説しているので、興味ある方はぜひチェックしてみてください。

あわせて読みたい

【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選

CSSのfilterプロパティとは

CSSのfilterプロパティは、ウェブページの要素（特に画像や背景）に対してさまざまな視覚効果を適用するためのものです。これにより、webデザイナーや開発者は画像をPhotoshopなどの画像編集ソフトウェアで編集しなくても、ブラウザ上でリアルタイムに画像を操作できます。

filterプロパティを使うメリット・デメリット

CSSのfilterプロパティはwebページのデザインに役立つツールですが、使う場合はメリットとデメリットどちらも認識しておくことが大事です。

Filterのメリット

簡単な画像操作

filterプロパティを使用すれば、専用の画像編集ソフトウェアを使わずとも、ブラウザ上でリアルタイムに画像を操作できます。これにより、色調整、コントラストの変更、ぼかしの追加など、一般的な画像加工が非常に簡単になります。

複数効果の組み合わせ

filterプロパティには複数の効果を一度に適用することができます。これにより、画像に対して複雑な効果を適用することも簡単にできてしまいます。

コード量の削減

画像を直接編集し、それぞれの状態を保存する代わりに、filterプロパティを使用すれば、画像の状態をコード上で簡単に切り替えることができます。これにより、必要なコード量とサーバー上の画像数を大幅に削減できます。

パフォーマンスの向上

filterプロパティはブラウザ上でGPUによって処理されるため、パフォーマンスに優れています。これにより、アニメーションやトランジションと組み合わせた際のパフォーマンスも高いまま維持されます。

ブラウザの互換性

filterプロパティは、主要な現代ブラウザの大半でサポートされていますが、IEなどの一部のブラウザでは利用できません。

対応ブラウザに関して詳しくはこちら

デザインの自由度

デザイナーは、画像の色相、彩度、コントラスト、ブライトネスなどを微調整することで、webサイトの全体的な雰囲気を自由に操ることができます。これは特にブランドイメージを強調する場合に有用です。

filterプロパティのデメリット

ブラウザの互換性

もっとも重要なことは、すべてのブラウザがfilterプロパティをサポートしているわけではないということです。ほとんどのブラウザでサポートはされていますが、古いバージョンのInternet Explorerなど一部のブラウザでは全くサポートされていません。そのため、ウェブサイトのユーザーがこれらのブラウザを使用している可能性がある場合は、フィルターが適用されない場合もあります。

パフォーマンス問題

filterプロパティはGPUによって処理されますが、多数のフィルターを大量の要素に適用するとパフォーマンスに影響を与えることがあります。特に、移動デバイスなどリソースが限られた環境では注意が必要です。 

複雑なフィルタ効果

複数のフィルタを組み合わせて複雑な効果を作り出すことは可能ですが、その結果がどのようになるかを予測するのは難しい場合があります。また、一部のフィルタ（特にblur()やdrop-shadow()）は、要素のレイアウトに影響を与えることがあります。

色の精度

filterプロパティを使用しても、元の画像の色情報を完全に保持するわけではありません。例えば、明度や彩度を大幅に変更した場合、色の精度が失われる可能性があります。 

アクセシビリティ

色の変更や明度の調整などの視覚効果は、視覚障害を持つ人々にとっては理解が難しくなる可能性があります。そのため、filterプロパティを使用する際は、アクセシビリティも考慮する必要があります。

filterプロパティを使う場面

CSSのfilterプロパティを使用する場面はいくつか考えられます。

以下、いくつかの具体例です。

画像ホバーエフェクト

ユーザーが画像にマウスをホバーしたときに、画像が明度を下げたり、色合いが変わったりするエフェクトを追加することができます。これは、ユーザーにどの要素がインタラクティブであるかを視覚的に示すのに役立ちます。

モノクロームまたはセピアトーンのエフェクト

filterプロパティを使って、画像をグレースケールやセピアトーンに変換することができます。これは、ウェブサイトの全体的なスタイリングやブランドイメージに一致するように、画像の色調を調整するのに便利です。

背景のブラー

背景画像にブラーを適用して、オーバーレイされたテキストをより読みやすくすることができます。これは特に大きな背景画像と重なるテキストを用いたヒーローセクションなどでよく見られます。

視覚障害者への配慮

視覚障害者のユーザーのために、特定のコントラスト比を提供するためにfilterを使用することができます。

アニメーションとトランジション

filterプロパティはCSSアニメーションとトランジションと組み合わせることができます。これにより、フェードイン/アウト、色彩変化、ブラーの強度変化などのエフェクトを適用することができます。

filterプロパティの実装例

以下、実際にfilterプロパティを実装した場合の画像です。

CSSのfilterの書き方

すーさん

CSSのfilterの概要を学んだところで、次に具体的な書き方を解説していきます。

基本的な書き方は以下になります。

style.css

1img {
2  filter: grayscale(100%);
3}

この例では、すべてのimg要素に対して100%のグレースケール(白黒)効果が適用されます。その結果、カラーの画像が白黒の画像に変換されます。

また、CSSのfilterのいいところは複数の視覚効果を一度に適用できるところです。例えば、画像をグレースケールに変換し、さらにぼかし効果を追加するには以下のように書きます

style.css

1img {
2  filter: grayscale(100%) blur(5px);
3}

この例では、すべてのimg要素に対して100%のグレースケール効果と5ピクセルのぼかし効果が適用されます。視覚効果はスペースで区切り、左から右へ順に適用されます。

なお、視覚効果を適用しない状態に戻すにはnoneを指定します：

style.css

1img {
2  filter: none;
3}

これはfilterプロパティを初期値に戻すためのもので、すべての視覚効果を取り消します。

CSSのfilterの種類

CSSのfilterにはいくつか種類があります。

以下は元画像です。この画像に色々なfilterをかけていきます。

blur()

blurは指定したピクセル値に基づいて画像や要素にぼかし効果（ブラー）を適用します。

1img {
2  filter: blur(5px);
3}

上記の例では、img要素に5ピクセルのぼかし効果を適用しています。

blurは、背景ぼかし、画像やテキストのぼかし、スクロール時の動的なぼかし効果など、様々なデザインやエフェクトに使用されます。ただし、上述のパフォーマンスの問題を考慮に入れて使用することが重要です。

brightness() 

brightnessは、指定した要素の輝度を調整するのに使用されます。

1img {
2  filter: brightness(200%)
3}

上記の例では、img要素の輝度を200%に設定しています。これにより、元の画像よりも明るくなります。

brightnessは、画像や要素の視覚的な強調、特定の画像がブランドカラーとマッチするように調整する場合、あるいはユーザーが明るさを調節できるテーマ切替機能など、さまざまな用途で使用されます。

contrast()

contrastは、指定した要素のコントラスト（明るい色と暗い色の差）を調整するのに使用されます。

1img {
2  filter: contrast(150%);
3}

上記の例では、img要素のコントラストを150%に設定しています。これにより、元の画像のコントラストよりも強調されます。

contrastは、画像やテキストの視覚的な強調、特定の視覚障害者向けの表示設定、あるいはデザインの一部としてコントラストを強調する場合など、さまざまな用途で使用されます。

grayscale()

grayscaleは、要素の色をグレースケール（白黒）に変換するのに使用されます。

1img {
2  filter: grayscale(100%);
3}

上記の例では、img要素を完全にグレースケール100%に変換しています。

grayscaleは、特定のブランドスタイルやデザイン要件に合わせて色を調整する、ユーザーがカラーブラインドモードを選択できるようにする、あるいは特定の要素を強調または非強調するために使用するなど、多様な用途で使われます。

hue-rotate()

hue-rotateは、画像や要素の色相（Hue）を回転させるのに使用されます。

1img {
2  filter: hue-rotate(90deg);
3}

上記の例では、img要素の色相を90度回転させています。

hue-rotateは、特定のブランドスタイルやデザイン要件に合わせて色を調整する、特定の要素を視覚的に強調する、あるいはユーザーがカラーテーマをカスタマイズする際に使用するなど、多様な用途で使われます。

invert()

invertは、指定した要素の色を反転するのに使用されます。

1img {
2  filter: invert(100%);
3}

上記の例では、img要素の色を完全に反転させています。

invertは、ダークモードとライトモードの切り替え、特定の視覚効果のための色の反転、または視覚的な強調や非強調のために使用するなど、多様な用途で使われます。

opacity()

opacityは、指定した要素の不透明度（透明度の反対）を調整するのに使用されます。

1img {
2  filter: opacity(50%);
3}

上記の例では、img要素の不透明度を50%に設定しています。これにより、元の画像が半透明になります。

opacityは、特定の視覚効果のための透明度の調整、要素の視覚的な強調や非強調、またはホバーエフェクトや遷移エフェクトの一部として使用するなど、多様な用途で使われます。ただし、opacityは要素全体の不透明度を変更しますので、テキストと背景の両方が透明になるなど、予期しない結果をもたらすことがあります。これを避けるためには、背景とテキストを別々の要素として扱い、それぞれに異なる不透明度を設定すると良いでしょう。

saturate()

saturateは、指定した要素の色彩の飽和度（Saturation）を調整するのに使用されます。

1img {
2  filter: saturate(200%);
3}

上記の例では、img要素の色彩飽和度を200%に設定しています。これにより、元の画像よりも色が鮮やかになります。

saturateは、特定の視覚効果のための色彩調整、特定の要素の視覚的な強調、またはブランドスタイルやデザイン要件に合わせた色調整など、多様な用途で使われます。

sepia()

sepiaは、指定した要素にセピア調（古風な茶色っぽい色）の効果を適用するのに使用されます。

1img {
2  filter: sepia(50%);
3}

上記の例では、img要素に完全なセピア調の効果を適用しています。

sepiaは、特定の視覚効果のための色彩調整、特定のブランドスタイルやデザイン要件に合わせた色調整、または特定の要素の視覚的な強調や非強調のために使用するなど、多様な用途で使われます。例えば、古風な雰囲気を出すために画像にセピア調の効果を適用することができます。

drop-shadow()

drop-shadowは、指定した要素に影を追加するのに使用されます。

1img {
2  filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
3}

上記の例では、img要素に対して、水平方向に10px、垂直方向に10pxずらした影を追加しています。また、この影のぼかし半径は5pxで、色は半透明の黒（rgba(0,0,0,0.5)）です。

drop-shadowは、要素に深みを追加する、特定の視覚効果を作成する、または要素を背景から視覚的に区別するために使用されます。また、drop-shadowは他のfilter関数と組み合わせて使用することができ、複雑な視覚効果を作成することも可能です。

まとめ

今回は、CSSのfilterプロパティを使用した画像の加工方法を紹介しました。

この強力なツールを使えば、色相や明度を簡単に調整し、ウェブページの印象を大きく変えることが可能です。

ほとんどの現代ブラウザで対応しており、コードもシンプルです。ぜひ試していただいて、webデザインの幅を広げていただけたらと思います。

あわせて読みたい

複数画像に対応可！CSSのfilterプロパティでimgを美しく表示する方法

あわせて読みたい

初心者でも分かる！CSSとSCSSの比較ガイド。メリット・デメリットも

あわせて読みたい

【無料】世界で利用者多数！おすすめのCSSフレームワーク10選

あわせて読みたい

【初心者用】CSSをHTMLに読み込む方法は3つ！それぞれについて徹底解説！

すーさん

webデザイナー/webエンジニア

TwitterInstagramLINEContact

30代web業界未経験 →オーストラリアにIT留学 →現地インターンを1年半経験 →フリーランスwebデザイナー・エンジニアとして活動 →月収80万円達成！
ポートフォリオ： https://jp.wordwidewebdesigner.com