マイクラ(Java版)の情報ブログ

【Photoshop要らず】CSS3のfilterプロパティの使い方11パターンを紹介【画像フィルター】

Web

この記事の概要

Web制作者Photoshop持ってないweb制作者

サムネイルや挿絵の簡単な編集をしたい…。でもPhotoshopを購入するには機能を持て余してしまう…。何か楽な方法は無いかな。

管理人管理人

「CSS3のfilter」をおすすめします。
画像にいろいろなフィルター(効果)をつけられます。導入も修正も簡単でおすすめです。


Web制作では、画像にフィルター(ぼかし、明るさ調整など)をかけたい場合があります。フィルターをかけるための方法としては画像の直接編集が挙げられます(下記参照)。

画像編集の方法

  • Photoshop
  • Illustrator
  • スマホの画像編集アプリ
  • フリーオンライン画像編集サイト

フィルターをかける方法・手段は十分にあります。
しかし・・・こう思う人もいませんか?

「正直、ソフトやアプリを使うほどじゃない」
「Photoshopでは機能を持て余してしまうから、コスパが悪い」
「いちいち修正が入ったときに面倒」

わかります。もっと楽な方法知りたいですよね。

こんなとき使えるのが、CSS3のfilterプロパティです。

CSS3のfilterプロパティとは?

filterプロパティは、画像やテキストに対して様々なフィルター(色や明るさを変化させたりする)を与えたい場合に使用します。

もともとはInternet Explorer独自に追加されたプロパティ…のようです。
グッバイIE(涙)。

※filterプロパティの対応ブラウザ

http://caniuse.com/#search=filter

上記リンク先で【CSS Filter Effects】という項目を見ると、filterプロパティはIEや古いAndroidは未対応のようです。
Firefox、Chrome、Safariなどのモダンブラウザは比較的対応しているようです。

CSSで指定する際はベンダープレフィックスが必要となります。

※主要ブラウザのベンダープレフィックス

  • -moz-:Firefox向け
  • -webkit-:Google Chrome、Safari向け
  • -o-:Opera向け
  • -ms-:Internet Explorer向け
面倒ですが、各種ブラウザに対応させるためにベンダープレフィックスは必要になります。

filterプロパティでできること(11パターン)

CSS3のfilterプロパティでは下記にあるような効果を画像につけることができます(11パターン)。

filterプロパティで設定可能なエフェクト

この記事ではfilterプロパティを使用して実際に画像フィルターをかけてみました。
例として、築地の海鮮丼の画像へfilterプロパティを適用していきます。

築地の海鮮丼

それでは一つずつ効果をつけていきます。

管理人管理人

いや、海鮮丼うまそうだな。

grayscale(グレースケール)

築地の海鮮丼
grayscale(グレースケール)とは、白と黒の2色を使って色の濃淡を表現するという色の表現方法の一種です。

grayscale(値)

0~100%
備考 値が大きいほど、画像の色が白黒に近づく

【CSS】

img {
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
}

saturate(彩度)

築地の海鮮丼
saturateでは彩度(色の鮮やかさ)を調節できます。画像の色をもっと目立たせたいという場合に使用します。

saturate(値)

0~上限なし
備考 値が大きいほど、色が鮮やかになる。
値の上限が無く、例えば10000%という値も設定可能。

【CSS】

img {
     -webkit-filter: saturate(250%);
     -moz-filter: saturate(250%);
     -o-filter: saturate(250%);
     -ms-filter: saturate(250%);
     filter: saturate(250%);
}

sepia(セピア)

築地の海鮮丼
sepia(セピア)はイカ墨から作られる黒褐色の絵具を指します。意図的にレトロ感を出したいときなどに、画像をセピア調にしたりします。

sepia(値)

0~100%
備考 値が大きいほど、色が黒褐色に近づく。

【CSS】

img {
     -webkit-filter: sepia(100%);
     -moz-filter: sepia(100%);
     -o-filter: sepia(100%);
     -ms-filter: sepia(100%);
     filter: sepia(100%);
}

hue-rotate(色相)

築地の海鮮丼
hueには色相・色合い・色調の意味が、rotateには回転させるという意味があります。

hue-rotate(値)

0deg~360deg(上限・下限なし)
備考 360deg(1周)で元の色に戻る(-360degでも同じ)

【CSS】

img {
     -webkit-filter: hue-rotate(180deg);
     -moz-filter: hue-rotate(180deg);
     -o-filter: hue-rotate(180deg);
     -ms-filter: hue-rotate(180deg);
     filter: hue-rotate(180deg);
}

色相を回転させるってどういうこと?

hue-rotateで値を指定する際にdeg(角度)を使用するのですが、色を回転させるとはどういうことなのでしょうか?

【参考】色相環の画像

上のリンクから画像を見てください。
これは色相環(カラーホイール)といって近い色(厳密には計算している)並べて円環にしたものです。

例えばこの画像のオレンジの色にfilter: hue-rotate(90deg);を適用すると、色相環を反時計回りに90°ずらした色(緑色)になります。

invert(階調の反転)

築地の海鮮丼
invertには反転させる、逆にするといった意味があります。階調の反転、いわゆるネガポジ反転ができます。普通の写真を写真のネガみたいに変化させることができます。

階調の反転を行うと、もともとの色が補色(※色相環で正反対にあたる色)に変化して明るいところを暗くして、暗いところを明るくした状態になります。iPhoneなどでは視力が弱い人向けにこの階調反転機能が付いています。

invert(値)

0~100%
備考 値が大きいほど、写真のネガっぽくなる。

【CSS】

img {
     -webkit-filter: invert(100%);
     -moz-filter: invert(100%);
     -o-filter: invert(100%);
     -ms-filter: invert(100%);
     filter: invert(100%);
}

blur(ぼかし)

築地の海鮮丼
blurにはぼんやりさせる、くもらせるといった意味があり、画像をぼかしたい時に使用します。

blur(値)

0px~上限なし
備考 値が大きいほど、ぼかしの度合いが大きくなる。
値の上限が無く、例えば1000pxという値も設定可能。

【CSS】

img {
     -webkit-filter: blur(2px);
     -moz-filter: blur(2px);
     -ms-filter: blur(2px);
     -o-filter: blur(2px);
     filter: blur(2px);
}

brightness(明るさ)

築地の海鮮丼
brightnessは明るさを表し、光りの度合いを調整したいときに使える効果です。この記事では写真を暗くしていますが、写真がちょっと暗くて明るくしたいなと思ったときに便利です。

brightness(値)

0~上限なし
備考 値が大きいほど、明るさが大きくなる。
値を値の上限が無く、0.67といった少数での値を指定可能。
ちなみに値を0にすると色は真っ黒になる。

【CSS】

img {
     -webkit-filter: brightness(0.4);
     -moz-filter: brightness(0.4);
     -o-filter: brightness(0.4);
     -ms-filter: brightness(0.4);
     filter: brightness(0.4);
}

contrast(コントラスト)

築地の海鮮丼
contrastには対照・対比の意味があります。
最も暗い部分と最も明るい部分の輝度の差を指すようです。
コントラストが大きいと、より対象物をはっきりと目でとらえることができます。

contrast(値)

0%~上限なし
備考 値が大きいほど、色がくっきり、はっきりと見える。

【CSS】

img {
     -webkit-filter: contrast(180%);
     -moz-filter: contrast(180%);
     -o-filter: contrast(180%);
     -ms-filter: contrast(180%);
     filter: contrast(180%);
}

drop-shadow(ドロップシャドウ)

築地の海鮮丼
指定した要素に影をつけることが出来ます(少し分かりづらいですが、画像のまわりに影がついています)。
ちなみにbox-shadowでも同様のことが可能です。

drop-shadow(値1 値2 値3 rgba(値4,値5,値6,値7)

値1~3 下限上限なし(px)
値4~6 0px~上限なし
色の指定する(色の三原色rgb)
値7 上限なし
明るさを指定する
備考 値1は横方向への影、値2は縦方向への影、値3は影のぼかし具合を表す

【CSS】

img {
     -webkit-filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
     -moz-filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
     -o-filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
     -ms-filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
     filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

opacity(不透明度)

築地の海鮮丼
opacityは不透明度という意味で、不透明度を調整することで画像を透けさせることができます。よく見かけるのはマウスオーバーすると画像が透明もしくは透明の画像がはっきりと表示されるといった使い方です。ちなみに、filterを使わなくてもopacity:0.6;だけでも同様の表示ができます。

opacity(値)

0~1
備考 値が0に近いほど色が透明に近くなる。0.75のように小数での細かい指定が可能。

【CSS】

img {
     -webkit-filter: opacity(0.6);
     -moz-filter: opacity(0.6);
     -o-filter: opacity(0.6);
     -ms-filter: opacity(0.6);
     filter: opacity(0.6);
}

複数フィルターの組み合わせ

築地の海鮮丼
各エフェクト単体で紹介しましたが、複数のエフェクトを組み合わせで使用することも可能です。
ここでは、grayscaleblurを組み合わせた例を紹介します。

関数1(値) 関数2(値)、・・・

各関数の値
備考 各関数をスペースを入れて並べる。

【CSS】

img {
     -webkit-filter: grayscale(100%) blur(2px);
     -moz-filter: grayscale(100%) blur(2px);
     -o-filter: grayscale(100%) blur(2px);
     -ms-filter: grayscale(100%) blur(2px);
     filter: grayscale(100%) blur(2px);
}

grayscaleを設定したクラスと、blurを設定したクラスを2つ用意しています。
HTMLでクラス2つ並べて記述しても両方同時に反映されないので、必ず上記のように同じ場所で並べて記述しましょう。

まとめ

css3のfilterプロパティについて、再度まとめます。

ポイント

  • CSSだけで基本10パターンのフィルターを加えられる
  • 複数のフィルターを同時に組み合わせて使用できる

修正も簡単で、デザイナーではないコーダーや、編集ソフトを持っていない層が気軽に利用できるのがうれしいですね。

管理人管理人

CSSは万能ではなくて、画像を部分的に加工したい、画像の細部にまでこだわりたい場合は、Photoshopなどを使用して画像加工する必要があります。


おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】