【CSS】画像の見え方を変えられるfilterの使い方【サンプル付きで解説】

画像をセピアにしたり彩度を変える事って出来る？

CSSにはfilterというプロパティがあり、画像をセピアにしたり彩度を変えたり、見え方を色々と変える事が出来ます。

今回はそんなfilterについて解説していきたいと思います。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

画像の見え方を変える事が出来るfilterの使い方

filterには以下の種類があります。

それでは1つずつ見ていきましょう。

HTMLはデモではレイアウトのために色々書いていますが、以下だけ把握しておけばOKです。

<img src="画像パス" alt="" class="sample"/>

単純にimgタグにclassを付けて、そのclassに対してCSSのfilterを書くという事です。

CSSも色々書いていますが、filter以外は無視してOKです。

brightness（明度）

書き方はこちら。

.sample {
  filter: brightness(130%);
}

0%だと真っ黒、100%だと変化なしなので、100%より小さいと暗くなり、大きいと明るくなります。

こちらが130%の場合。

See the Pen
filter（brightness） by junpei (@junpei-sugiyama)
on CodePen.

そしてこちらが70%の場合です。

See the Pen
filter（brightness:70%） by junpei (@junpei-sugiyama)
on CodePen.

saturate（彩度）

書き方はこちら。

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

0%だとモノクロ、100%だと変化なしなので、100%より小さいと彩度が下がり色が薄くなり、大きいと彩度が上がり鮮やかになります。

こちらが150%の場合。

See the Pen
filter（saturate:70%） by junpei (@junpei-sugiyama)
on CodePen.

そしてこちらが50%の場合です。

See the Pen
filter（saturate:50%） by junpei (@junpei-sugiyama)
on CodePen.

contrast（コントラスト）

書き方はこちら。

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

0%だとグレーのベタ塗り、100%だと変化なしなので、100%より小さいとコントラストが下がり、大きいとコントラストが上がります。

こちらが150%の場合。

See the Pen
filter（contrast:150%） by junpei (@junpei-sugiyama)
on CodePen.

そしてこちらが50%の場合です。

See the Pen
filter（contrast:50%） by junpei (@junpei-sugiyama)
on CodePen.

blur（ぼかし）

書き方はこちら。

.sample {
  filter: blur(5px);
}

数値が大きいほど画像がボケます。

5pxでもかなりボケているのが分かると思います。

See the Pen
filter（blur:50%） by junpei (@junpei-sugiyama)
on CodePen.

grayscale（グレースケール）

書き方はこちら。

.sample {
  filter: grayscale(70%);
}

0%だと変化なし、100%だとモノクロなので、数値が大きいほどモノクロに近付きます。

saturateもモノクロに出来ますが、grayscaleは彩度ではないので鮮やかにする事は出来ません。

こちらは70%の場合。

See the Pen
filter（grayscale:70%） by junpei (@junpei-sugiyama)
on CodePen.

sepia（セピア）

書き方はこちら。

.sample {
  filter: sepia(70%);
}

0%だと変化なし、100%だと完全にセピアになるので、数字が大きいほどセピア色が強くなります。

こちらは70%の場合。

See the Pen
filter by junpei (@junpei-sugiyama)
on CodePen.

hue-rotate（色相）

書き方はこちら。

.sample {
  filter: hue-rotate(30deg);
}

0degだと変化なし、180degだと色相が反転、360degになると1周して元に戻ります。

元画像の色調が変でない限り使うことはないかと思います。

こちらが90degの場合。

See the Pen
filter（sepia70%） by junpei (@junpei-sugiyama)
on CodePen.

こちらが180degの場合。

See the Pen
filter（hue-rotate180deg） by junpei (@junpei-sugiyama)
on CodePen.

こちらが270degの場合。

See the Pen
filter（hue-rotate270deg） by junpei (@junpei-sugiyama)
on CodePen.

invert（階調）

書き方はこちら。

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

0%だと変化なし、100%だと階調が反転、50%を境目に階調が反転し始めます（50%だとグレーになります）

100%はテレビでも人がショッキングな状態を表す時に使われるような気がします（通常は使わないと思います）

こちらが40%の場合。

See the Pen
filter（invert100%） by junpei (@junpei-sugiyama)
on CodePen.

こちらが50%の場合。

See the Pen
filter（invert50%） by junpei (@junpei-sugiyama)
on CodePen.

こちらが60%の場合。

See the Pen
filter（invert60%） by junpei (@junpei-sugiyama)
on CodePen.

こちらが100%の場合。

See the Pen
filter（invert100%） by junpei (@junpei-sugiyama)
on CodePen.

opacity（透明度）

書き方はこちら。

.sample {
  filter: opacity(50%);
}

0%だと透明で何も見えず、100%だと元の状態なので、数値が小さいほど透明度が増します。

こちらが50%の場合。

See the Pen
filter（opacity40%） by junpei (@junpei-sugiyama)
on CodePen.

通常のopacityとの違いは？

透過させるプロパティはfilterのopacity以外にも、通常のopacityがあります（通常という言い方でいいか分かりませんが）

例えば今回の例で言うと、

.sample {
  filter: opacity(50%);
}

.sample {
  opacity: 0.5;
}

となります。

見た目の違いは特にありませんが、filterの方はIE未対応だったり対応ブラウザに少し違いがあるようです。

drop-shadow（影）

書き方はこちら。

.sample {
  filter: drop-shadow(5px 8px 10px rgba(255,0,0,0.8));
}

ちょっと各項目が多いですが、上記の例で言えば以下のようになります。

透明度の設定が不要であればRGB表記でもOKです。

.sample {
  filter: drop-shadow(5px 8px 10px #ff0000);
}

こちらがデモになります。

See the Pen
filter（drop-shadow） by junpei (@junpei-sugiyama)
on CodePen.

box-shadowとdrop-shadowの違いは？

同じ影を付けるプロパティにbox-shadowがあります。

これまでのような四角い画像であればほとんど違いはありませんが、pngなどでアイコンの縁に影を付けたい時はdrop-shadowでないと上手くいきません。

See the Pen
画像に影 by junpei (@junpei-sugiyama)
on CodePen.

filterは複数同時に設定可能

これまでたくさんのfilterを紹介してきましたが、複数同時に設定することも可能です。

書き方は以下のように半角スペースで区切ることで何個でも設定可能です。

.sample {
  filter: フィルター1 フィルター2 フィルター3;
}

こちらは彩度、コントラスト、影を付けているデモになります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

filterはhoverの設定も可能

例えば画像にカーソルを乗せたら彩度がアップするようにしたい場合は以下のようになります。

.sample {
  cursor: pointer;
  transition: filter .5s;
}
.sample:hover {
  filter: saturate(200%);
}

transitionを設定することでじんわり変化させています。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

また通常はモノクロでカーソルを乗せるとカラーになったり、通常はぼかしてあるけどカーソルを乗せるとぼかしがなくなったり、hoverでfilterを無効にする事も出来ます。

filterを無効にするにはfilter: none;とすればOKです。

/* hoverでぼかし無効 */
.sample01 {
  cursor: pointer;
  filter: blur(10px);
  transition: filter .5s;
}
.sample01:hover {
  filter: none;
}
/* hoverでモノクロ無効 */
.sample02 {
  cursor: pointer;
  filter: grayscale(100%);
  transition: filter .5s;
}
.sample02:hover {
  filter: none;
}

こちらがデモになります。

See the Pen
filter（hoverでfilter無効） by junpei (@junpei-sugiyama)
on CodePen.

以上になります。