CSSのfilterプロパティで画像を編集する方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSのfilterプロパティの使い方について解説しています。これは画像などの要素に明るさや色の調整、ぼかしなどさまざまな効果を入れることができる便利なプロパティです。filterの基本の書き方とそれぞれの処理の内容を確認しましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回は、CSSでfilterプロパティで色を変化させたり、ぼかしたりすることができる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
CSSについてよく分からないという方は、CSSの書き方について解説した記事をご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね！
どういう内容でしょうか？
filterプロパティの使い方について詳しく説明していくね！
お願いします！
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);
}
各ブラウザの対応状況
filterプロパティは、ほぼ全てのブラウザ(最新版)で対応していますが、IEでは対応していません。
IEでfilterのような効果を使いたい場合には、jQueryプラグイン等の別の方法を検討してみましょう。
IE11でも使用可能な、filter効果をつけられるプラグイン、ライブラリ例は以下の通りです。
実際に書いてみよう
様々な効果を組み合わせて、写真をイラストのように加工したり、色を変えたりしてみましょう。
また、マウスオンで元画像が表示されるような動きも加えてみます。
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コースを担当しています。 ラジオとバナナが好き。 |
filterプロパティの使い方がよくわかりました！
これからも分からないことがあったらどんどん質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
