Web制作 CSS

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

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

  • brightness(明度)
  • saturate(彩度)
  • contrast(コントラスト)
  • blur(ぼかし)
  • grayscale(グレースケール)
  • sepia(セピア)
  • hue-rotate(色相)
  • invert(階調)
  • opacity(透明度)
  • drop-shadow(影)

それでは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));
}

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

  • 5px:水平方向の距離
  • 8px:垂直方向の距離
  • 10px:ぼかし具合
  • rgba:16進数のカラーコードと透明度

透明度の設定が不要であれば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.

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS