CSSのfilterプロパティで画像を編集する方法を現役エンジニアが解説【初心者向け】

今回は、CSSでfilterプロパティで色を変化させたり、ぼかしたりすることができる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

CSSについてよく分からないという方は、CSSの書き方について解説した記事をご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

filterプロパティとは

filterプロパティは、視覚効果として簡単に画像などの要素をぼかしたり、明るさ・彩度・色相などを変化させることが可能です。

これらの加工は、Photoshopなどの画像編集ソフト等でも可能です。しかし、filterプロパティではそうしたソフトを使用せず、様々な変化を加えることができます。

マウスオンとマウスアウトで画像の色を変化させたり、画像ギャラリーなどで、選択中の画像の色を変化させたいときなどに便利です。

 

filterプロパティの使い方

filterプロパティは以下のように記述します。

 

img{
  filter:フィルターの種類(変化量);
}

実際に変化を確認してみましょう。

HTML

<div class="original">
  <img src="./images/banana.jpg">
  <p>元画像</p>
</div>
<div class="blur">
  <img src="./images/banana.jpg">
  <p>blur / ぼかし</p>
</div>
<div class="brightness">
  <img src="./images/banana.jpg">
  <p>brightness / 明るさ</p>
</div>
<div class="saturate">
  <img src="./images/banana.jpg">
  <p>saturate / 彩度</p>
</div>
<div class="grayscale">
  <img src="./images/banana.jpg">
  <p>grayscale / モノクロ</p>
</div>
<div class="sepia">
  <img src="./images/banana.jpg">
  <p>sepia / セピア調</p>
</div>
<div class="hue-rotate">
  <img src="./images/banana.jpg">
  <p>hue-rotate / 色相環を回転</p>
</div>
<div class="invert">
  <img src="./images/banana.jpg">
  <p>invert / 反転</p>
</div>
<div class="contrast">
  <img src="./images/banana.jpg">
  <p>contrast / コントラスト</p>
</div>
<div class="opacity">
  <img src="./images/banana.jpg">
  <p>opacity / 透明度</p>
</div>
<div class="drop-shadow">
  <img src="./images/banana.jpg">
  <p>drop-shadow / ドロップシャドウ</p>
</div>

CSS

div{
  width:300px;
  height:auto;
  float:left;
  margin:3px;
  position:relative;
  border:#ddd 1px solid;
}
img{
  width:100%;
  height:auto;
}
.blur img{
  filter: blur(5px);
}
.brightness img{
  filter: brightness(1.3);
}
.saturate img{
  filter: saturate(70%);
}
.grayscale img{
  filter: grayscale(100%);
}
.sepia img{
  filter: sepia(100%);
}
.hue-rotate img{
  filter: hue-rotate(90deg);
}
.invert img{
  filter: invert(100%);
}
.contrast img{
  filter: contrast(500%);
}
.opacity img{
  filter: opacity(30%);
}
.drop-shadow img{
  filter: drop-shadow(5px 5px 10px gold);
}

 

各変化は組み合わせて使用することも可能です。

それでは、各変化の種類について確認していきましょう。

 

blur/ぼかし

ぼかしの量を半径で指定します。

pxやemなどでの指定が可能です。

 

以下、コード例です。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>0</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>5px</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>3em</p>
</div>

CSS:【”:”を削除】

.f0 img{
  filter: blur(0);
}
.f1 img{
  filter: blur(5px);
}
.f2 img{
  filter: blur(3em);
}

brightness / 明るさ

100%(1)が元の明るさです。

暗くしたい場合は

 

• 100％(1)未満の数字
• 明るくしたい場合は100%(1)以上の数字

を指定します。

 

0の場合は、真っ黒になるので注意が必要です

以下、brightnessのコード例です。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>0</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>0.5( = 50%)</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>300%</p>
</div>

CSS:【”:”を削除】

.f0 img{
  filter: brightness(0);
}
.f1 img{
  filter: brightness(0.5);
}
.f2 img{
  filter: brightness(300%);
}

saturate / 彩度

brightnessと同じく、100%(1)が元の彩度です。彩度は色の鮮やかさを示すものです。

数字が大きほど色鮮やかになり、0の場合にはモノクロになります。

以下、saturateを使用したコード例です。

HTML:

<div class="f0">
  <img src="./images/banana.jpg">
  <p>0</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>0.5 ( = 50%)</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>300% ( = 3)</p>
</div>

CSS

.f0 img{
  filter: saturate(0);
}
.f1 img{
  filter: saturate(0.5);
}
.f2 img{
  filter: saturate(300%);
}

 

 

grayscale / モノクロ調

要素の、モノクロの度合い(グレースケール)を0〜1(100%)で指定します。

0は画像そのまま、1(100%)で完全なモノクロになります。

以下は、grayscaleを使用したコード例です。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>0</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>0.5 ( = 50%)</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>100% ( = 1)</p>
</div>

CSS:【”:”を削除】

.f0 img{
  filter: grayscale(0);
}
.f1 img{
  filter: grayscale(0.5);
}
.f2 img{
  filter: grayscale(100%);
}

 

sepia/ セピア調

grayscaleと同じく適用度合いを0〜1(100%)で指定します。

以下、sepiaを使用するコード例です。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>0</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>0.5 ( = 50%)</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>100% ( = 1)</p>
</div>

CSS

.f0 img{
  filter: sepia(0);
}
.f1 img{
  filter: sepia(0.5);
}
.f2 img{
  filter: sepia(100%);
}

 

hue-rotate/ 色相環を回転させる

色相環とは、下図のように、色相を環状に表現したものです。

角度が増えるに従って、徐々に色が変化していくため、対面にある色が一番遠い色(補色)となります。

 

そして、色相環を回転させる度数(0〜360度)をdegという単位で指定しましょう。(degはdegree(度)を表すものです。)

よって、180degでは一番遠い色となり、0と360degでは元の色に戻ります。

以下、hue-rotateを使用したコード例です。

 

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>360deg</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>180deg</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>225deg</p>
</div>

CSS:【”:”を削除】

.f0 img{
  filter: hue-rotate(360deg);
}
.f1 img{
  filter: hue-rotate(180deg);
}
.f2 img{
  filter: hue-rotate(225deg);
}

色相環の画像と見比べてみると、バナナの部分が180degでブルー、225degでピンクっぽくなっています。

 

 

invert / 反転

invertもgrayscale、sepiaと同じく0〜1(100%)で指定してください。

0.5(50%)でグレー一色、0で画像のまま、1(100%)で完全に色が反転します。

hue-rotateの180degのような色味になり、明るさや彩度も反転するため、白色は黒色に変化します。

 

以下、invertを使用するコード例です。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>0</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>0.5 ( = 50% )</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>100% ( = 1 )</p>
</div>

CSS

.f0 img{
  filter: invert(0);
}
.f1 img{
  filter: invert(0.5);
}
.f2 img{
  filter: invert(100%);
}

 

contrast / コントラスト

contrastは色の明るさを変化させるものです。

brightnessと同じく、1でそのままの色、1(100%)より小さければコントラストが弱くなり、0ではコントラクトがなくなり、グレー一色になります。

数字が大きいほどコントラストが強いと判断できるでしょう。

以下、contrastを使用するコード例です。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>1 ( = 100% )</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>0.3 ( = 30% )</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>230% ( = 2.3 )</p>
</div>

CSS

.f0 img{
  filter: contrast(1);
}
.f1 img{
  filter: contrast(0.3);
}
.f2 img{
  filter: contrast(230%);
}

 

opacity / 透明度

opacityはgrayscale、sepia等と同じく、0〜1(100%)で指定します。

0で完全に透明、1(100%)で元の画像と同じ状態となります。

以下、opacityを使用するコード例です。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>0</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>0.5 ( = 50% )</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>100% ( = 1 )</p>
</div>

CSS

.f0 img{
  filter: opacity(0);
}
.f1 img{
  filter: opacity(0.5);
}
.f2 img{
  filter: opacity(1);
}

 

drop-shadow / ドロップシャドウ

drop-shadowは要素に影をつけるものです。

x軸方向のオフセット、Y軸方向のオフセット、ぼかしの半径、色の値を半角スペース区切りで指定します。

box-shadowプロパティでも同様の処理が可能です。

 

以下、drop-shadowを使用するコード例です。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
  <p>0 0 13px gold</p>
</div>
<div class="f1">
  <img src="./images/banana.jpg">
  <p>1em -1em rgba(0,0,0,.5)</p>
</div>
<div class="f2">
  <img src="./images/banana.jpg">
  <p>0 10px 5px #6ac521</p>
</div>

CSS

.f0 img{
 filter: drop-shadow(0 0 13px gold);
 }
.f1 img{
  filter: drop-shadow(1em -1em 0 rgba(0,0,0,.5));
}
.f2 img{
  filter: drop-shadow(0 10px 5px #6ac521);
}

 

[PR] Webデザインで副業する学習方法を動画で公開中

各ブラウザの対応状況

filterプロパティは、ほぼ全てのブラウザ(最新版)で対応していますが、IEでは対応していません。

IEでfilterのような効果を使いたい場合には、jQueryプラグイン等の別の方法を検討してみましょう。

各ブラウザの対応はこちら 

IE11でも使用可能な、filter効果をつけられるプラグイン、ライブラリ例は以下の通りです。

•  jQuery filter.me
• paintbrushJS

 

 

実際に書いてみよう

様々な効果を組み合わせて、写真をイラストのように加工したり、色を変えたりしてみましょう。

また、マウスオンで元画像が表示されるような動きも加えてみます。

hoverのfilterの値をnoneにすると、マウスオンでfilterが適用されなくなります。

以下、今回紹介したコードを使用したプログラムです。

HTML

<div class="f0">
  <img src="./images/banana.jpg">
</div>
<div class="f1">
  <img src="./images/banana.jpg">
</div>
<div class="f2">
  <img src="./images/banana.jpg">
</div>
<div class="f3">
  <img src="./images/banana.jpg">
</div>
<div class="f4">
  <img src="./images/banana.jpg">
</div>
<div class="f5">
  <img src="./images/banana.jpg">
</div>

CSS

div{
  width:300px;
  height:auto;
  float:left;
  margin:3px;
  border:#ddd 1px solid;
  overflow:hidden;
}
img{
  width:100%;
  height:auto;
  transition:.3s;
}
.f0 img{
  filter: brightness(1.7)contrast(.9);
}
.f1 img{
  filter: blur(7px)brightness(1.3);
}
.f2 img{
  filter: saturate(150%)contrast(7);
}
.f3 img{
  filter: hue-rotate(300deg)contrast(2);
}
.f4 img{
  filter: sepia(1)contrast(1.5)hue-rotate(180deg);
}
.f5 img{
  filter: contrast(500%)grayscale(1)brightness(.9);
}
img:hover{
  filter: none;
}

 

監修してくれたメンター

メンター 橋本真理 フリーのweb/グラフィックデザイナー 会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。 ラジオとバナナが好き。

 

TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。