CSSプロパティのfilterを使うことで、画像に変化をつけることができます。

使いこなせるようになれば、簡単な加工をわざわざPhotoshopなどでする必要が無くなります。

今回は、CSSプロパティのfilteを使って画像に変化を加えたい、という方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSプロパティのfilterを使って画像を変化させる方法がわかるようになりますよ。

ぜひ最後まで読んでくださいね！

CSS filterとは？

CSSのfilterは、画像などの要素にフィルターをかけ、彩度や明度、色相などを変更することができるプロパティです。

色の調整だけでなく、ぼかしを加えたり透明度を変えることも可能です。

Webページに使用する画像を加工したい場合には、Photoshopなどのソフトを利用する方法がありますが、簡単な加工であれば、CSSで行うことができます。

具体的には、以下のように記述します。

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

.example {
  filter: contrast(60%);
}

上記の指定では、画像のコントラストを60%にしています。

filterの種類を紹介

filterで指定できるものは、先ほどのcontrastを含めて全部で10種類あります。

ここでは、それぞれの使い方を解説していきましょう。

blur（ぼかし）

blurを使うと、画像のぼかしの具合を指定することができます。

.example {
  filter: blur(2px);
}

単位はpxやemなどの単位になります。%は使用できないので注意してください。

実際に数字を入れてみて、どのくらいぼかしが入るのか確認しながら調整してみましょう。

brightness（明度）

brightnessは、画像の明るさを指定します。

.example {
  filter: brightness(150%);
}

100%が基準となっています。100%から大きくすると明るくなり、小さくすることで暗くなります。

単位なしで1を基準とした数値を入れることもできます。

1が基準となり、1より大きくすると明るくなり、0が一番暗くなります。

上記コードのbrightness(150%)は、1.5と同じ意味で、元の画像の1.5倍の明るさということになります。

contrast（コントラスト）

contrastは、画像のコントラストを指定します。

.example {
  filter: contrast(120%);
}

brightnessと同様に100%が基準となります。100%より大きくするとコントラストが上がります。

小さくするとコントラストが下がりますね。

コントラストとは、明るい場所と暗い場所の差のことで、contrast(0%)とすると、灰色一色の画像になります。

こちらも1を基準にして指定することができます。0で最もコントラストが低い状態ですね。

drop-shadow（ドロップシャドウ）

drop-shadowは、画像に影をつけることができます。

.example {
  filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.7));
}

引数は4つあり、「X軸方向の位置」「Y軸方向の位置」「ぼかしの大きさ」「影の色」となります。

最初の2つは必須になります。位置を決めることで、画像とずらして影を加えることができます。

似たようなプロパティでbox-shadowがありますね。

こちらは背景が透過したpng画像であっても、要素の周りの四角に沿って影がついてしまいます。

filter: drop-shadow()は、画像の中のオブジェクトに影をつけてくれる点が優れていますね。

grayscale（グレースケール）

grayscaleは、画像にグレースケールをかけることができます。

.example {
  filter: grayscale(80%);
}

0%を基準とし、100%で完全にグレースケール（灰色のみで配色）された状態になります。

0から1までの値を指定する方法もあります。この場合、1が完全にグレースケールされた状態ですね。

hue-rotate（色相環）

hue-rotateは、色相を変更することができます。

.example {
  filter: hue-rotate(45deg);
}

値は色相環の回転を指定します。

degという単位を使用し、基準値は0degです。

180degで色相が反転し、360degで元の色相になります。360以上は一周以上しているので360で割った余りを指定したものと、同様の色相になりますね。

invert（階調の反転）

invertは、階調をどの程度反転させるかを指定します。

.example {
  filter: invert(100%);
}

0%を基準とし、100%で完全に階調が反転します。

0を基準として、0から1までの値を指定する方法もあります。

opacity（不透明度）

opacityは、画像の不透明度を指定します。

.example {
  filter: opacity(30%);
}

100%が最も不透明で元の画像が表示されます。

0%で完全に透明になります。

0から1までの値を指定する方法もあり、この場合0が最も透明になり、1が不透明になります。

saturate（彩度）

saturateは、画像の彩度を指定します。

.example {
  filter: saturate(160%);
}

100%を基準とし、100より大きくすると鮮やかになります。100より小さくすると彩度が下がり、暗い色になります。

0で無彩色になります。

filter: saturate(0%)とfilter: grayscale(100%)は同じ結果が得られるフィルターですね。

1を基準にして指定することもできます。0が無彩色になり、1以上で鮮やかになります。

sepia（セピア）

sepiaは、画像をセピア調にします。

.example {
  filter: sepia(80%);
}

0%を基準とし、100%が最もセピア調になります。

0を基準にした0から1までの数値で指定することもできます。

filterの使い方

それでは、filterを使った実践方法を紹介していきましょう。

ここでは、「複数のフィルターをかける方法」と「アニメーションをつける方法」を解説します。

複数のフィルターをかける

半角スペースを空けてフィルターを並べることで、1つの要素に複数のフィルターをかけることができます。

.example {
  filter: contrast(50%) blur(3px);
}

上記では、50%のコントラストと3pxのぼかしを適用しています。

適用するフィルターはいくつでも可能です。色々な組み合わせを試してみてください。

複数のフィルターが適用されない場合

複数のフィルターをかけたつもりなのに適用されない、というときには、CSSでの書き方を確認してみてください。

.example {  
  filter: contrast(50%);  
  filter: blur(3px);  
}

複数のfilterプロパティを指定してしまうと、定義が上書きされ、最後に書いたものが有効になります。

上記コードでは、ぼかしのみが適用され、コントラストは変化しません。

複数指定したい場合には、1つのfilterプロパティでまとめて記述しましょう。

フィルターにアニメーションをつける

transitionプロパティを組み合わせて使うことで、アニメーションを設定することができます。

.example {
  transition: 0.3s;
}
.example:hover {
  filter: brightness(60%) blur(3px);
}

上記コードはマウスをホバーさせるとフィルターがかかります。

transition: 0.3sをつけることで、ホバーしたときにふわっとフィルターがかかったような変化になります。

もちろん、ホバー以外をトリガーにしてフィルターをかけることもできます。ぜひ試してみてください。

まとめ：filterは目的に応じて使い分ける

今回は、CSSプロパティのfilterについて解説してきました。

filterで指定できるフィルターには種類があり、目的に応じて使用できるということでしたね。

複数のフィルターを組み合わせる方法なども紹介しました。

今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／