【CSS】filterプロパティの使い方【画像を10通りに変化】

パソ君

・filterプロパティってどう使うの？

こんな疑問にお答えします。

CSSには「filter」というプロパティがあります。

これを使えば画像を明るくしたり、ぼかしをいれたり簡単にカスタマイズ可能。

非対応だったIEのサポートが終了したので、気軽に使えるようになりました。

ジト

使い方を覚えておくべし！

ということで、この記事では「filterプロパティの使い方」について解説していきます！

【CSS】filterプロパティの使い方

使い方は簡単です。

imgタグにクラスを指定。そのクラスに対して「filter」を指定し、値を入れるだけ。

<img src="./img/item.png" alt="" class="img">

.img {
  filter: 値を入れる;
}

【CSS】filterプロパティの使い方【画像を10通りに変化】

そんなfilterプロパティの値に入るのが、下記の10種類あります↓

順に見ていきましょう。

➀：blur（ぼかし）

See the Pen ➀filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: blur(3px);
}

.img02 {
  filter: blur(.5em);
}

blurを指定すると、画像をぼかすことができます。

ぼかし加減はpxやemで指定可能。

➁：invert（階調）

See the Pen ➀filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: invert(30%);
}

.img02 {
  filter: invert(70%);
}

invertを指定すると、画像色の階調を反転することができます。

初期値は０です。数値が大きいほど、反転します。

➂：sepia（セピア）

See the Pen ➁filter by jito-coder (@jito-coder) on CodePen.

sepiaを指定すると、画像のセピア調の色を適用できます。

初期値は０です。数値が大きいほど、セピア調の色になります。

➃：saturate（彩度）

See the Pen ➂filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: saturate(150%);
}

.img02 {
  filter: saturate(50%);
}

saturateを指定すると、画像の彩度を調整できます。

100％を基準とします。数値が100％より上がれば彩度が高くなり、低くなれば彩度が低くなります。

➄：brightness（明度）

See the Pen ➃filter by jito-coder (@jito-coder) on CodePen.

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

.img02 {
  filter: brightness(50%);
}

brightnessを指定すると、画像の明るさを調整できます。

100％を基準とします。数値が100％より上がれば明るくなり、低くなれば暗くなります。

⑥：hue-rotate（色相）

See the Pen ➄filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: hue-rotate(90deg);
}

.img02 {
  filter: hue-rotate(180deg);
}

hue-rotateを指定すると、画像の色相を回転できます。

degを用いて指定。初期値は0degで、180degを指定すると反転します。

⑦：opacity（透明度）

See the Pen ⑥filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: opacity(70%);
}

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

opacityを指定すると、画像の透明度を変えることができます。

０に近づくにつれ、透明度が高まります。

➇：drop-shadow（影）

See the Pen ⑥filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: drop-shadow(3px 3px 3px pink);
}

.img02 {
  filter: drop-shadow(10px 10px 10px pink);
}

drop-shadowを指定すると、画像要素に対して影をつけることができます。

そのためpng画像だと、要素の縁に影をつけることが可能です。詳細は下記をどうぞ↓

2023年5月29日 【解決】png透過画像に影（box-shadow）をつける方法【CSS】

⑨：contrast（コントラスト）

See the Pen ➇filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: contrast(50%);
}

.img02 {
  filter: contrast(150%);
}

contrastを指定すると、画像のコントラストを変えることができます。

100％が初期値。それより小さいとコントラストが下がり、高いと上がります。

ちなみに小数点「0.7」でも指定可能です。

⑩：grayscale（グレースケール）

See the Pen ⑨filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: grayscale(50%);
}

.img02 {
  filter: grayscale(100%);
}

grayscaleを指定すると、画像をモノクロにすることができます。

100％に近いほどモノクロになります。

【CSS】filterプロパティの使い方【その他】

最後にfilterプロパティの、その他の使い方を紹介しますね。

複数の値を指定

先述したfilterの値は、複数指定することが可能です。下記のように半角スペースを用いて記述します。

filter: 値 値 値;

サンプルがこちら↓

See the Pen ⑩filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: blur(3px) opacity(70%) drop-shadow(10px 10px 10px pink);
}

色んなfilterがかかっており、画像が加工されていますね。

ホバーアクション時に指定

ホバー時にfilterを指定することで、良い感じに反映することもできます。

See the Pen ⑩filter by jito-coder (@jito-coder) on CodePen.

.img {
  filter: blur(10px);
  transition: filter .5s ease;
  cursor: pointer;
}
.img:hover {
  filter: none;
}

.img02 {
  transition: filter .5s ease;
  cursor: pointer;
}
.img02:hover {
  filter: brightness(50%);
}

【CSS】filterプロパティの使い方【画像を10通りに変化】：まとめ

ジト

filterプロパティを使うときは試してみてね！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙