加工ソフト不要!CSSだけで写真やイラストを加工し雰囲気を変える方法

CSSで写真にフィルターをかけて色味をいい感じにする方法Tips

個人サイトを作るとき、フリー素材の写真を使う機会があると思いますが、好みにぴったりの写真を探すのって結構難しいですよね

「この写真、構図とか風景はすごく好きだけど、色味がもうちょっとくっきりしてたら……」とか、逆に「もうちょっとセピアっぽい色味が欲しいなぁ」など、色味を加工して使いたい場合もあるかもしれません。しかし、Photoshopなどの画像加工ソフトはそれなりの値段がするし、そもそもいちいちソフトを使って加工するのもなんだかめんどくさかったり……。

そんな方のために今回は、CSSで写真やイラストの色味を変更する方法をお教えします

スポンサーリンク

filterプロパティを使います

使うのはfilterプロパティです。imgタグに対して、style="filter:xxx(000);"(xxxは効果名、000は効果の度合い)と指定するだけで、画像にさまざまな色変化や効果を施すことができます。

<img src="..." style="filter: xxx(000);">

では早速、具体的な使い方を見ていきましょう。

明度・彩度・コントラストの調整

調整内容書き方
明度brightness(数字);
100%を基準に数字が大きくなると明度が高くなる
小さくなると明度が低くなり、0になると真っ黒な画像になる
彩度saturate(数字);
100%を基準に数字が大きくなると彩度が高くなる
小さくなると彩度が低くなり、0になるとモノクロの画像になる
コントラストcontrast(数字);
100%を基準に数字が大きくなるとコントラストが強くなる
小さくなるとコントラストがなくなり、0になると灰色の画像になる
filterプロパティで画像加工

未加工の写真

filterプロパティで画像加工

filter: brightness(150%);

filterプロパティで画像加工

filter: saturate(30%);

filterプロパティで画像加工

filter: contrast(200%);

順番に未加工の写真、filter: brightness(150%);をかけたもの(明度150%)、filter: saturate(30%);をかけたもの(彩度30%)、filter: brightness(200%);をかけたもの(コントラスト200%)です。少しずつ画像の色味が変わっているのがわかるでしょうか。

カッコ内に入れる数字が100%のときが未加工の状態として、数字が100%から遠くなるほど加工の度合いが強くなります。詳しくは上の表を参照してください。

色調変更、モノクロ、セピア

調整内容書き方
色調変更hue-rotate(数字deg);
0deg~360degの間で色調を変化させる
モノクロgrayscale(数字);
0%を基準とし、100%に近づくにつれモノクロに近くなる
セピアsepia(数字);
0%を基準とし、100%に近づくにつれセピアに近くなる
filterプロパティで画像加工

未加工の写真

filterプロパティで画像加工

filter: hue-rotate(100deg);

filterプロパティで画像加工

filter: grayscale(50%);

 

filterプロパティで画像加工

filter: sepia(60%);

モノクロ化は彩度調整と似ていますが、0%が基準となっていて100%が最大であることに注意。セピア化フィルターは使える場面が多そうです。

ネガ化、透過、影つけ、ぼかし

調整内容書き方
ネガ化invert(数字);
0%を基準とし、100%に近づくにつれネガに近くなる
透過opacity(数字);
0%を基準とし、100%に近づくにつれ透明に近くなる
ぼかしblur(数字px);
px単位で指定する。指定したpxがガウス半径になる
影つけdrop-shadow(X軸方向 Y軸方向 影のぼかし半径px 影の色);
filterプロパティで画像加工

filter: invert(100%);

filterプロパティで画像加工

filter: opacity(60%);

filterプロパティで画像加工

filter: blur(3px);

 

filterプロパティで画像加工

filter: drop-shadow(5px 5px 5px #cccccc);

このあたりは使用頻度はそんなにないかもですが、紹介しておきます。opacityで透明度を上げた場合は、背景に指定されている色も透過して見えるようになるのでご留意ください。

複数のフィルターを合わせることもできます

例えばこんな感じ。

filterタグで画像加工

未加工の写真

filterタグで画像加工

filter: brightness(130%) saturate(180%);

右の写真(スマホから見ている場合は下の写真)は、filter: brightness(130%) saturate(180%);、つまり明度130%かつ彩度180%のフィルターをかけています。

CSSフィルターで画像を加工する

未加工の写真

CSSフィルターで画像を加工する

sepia(70%) brightness(70%);

こちらはfilter: sepia(70%) brightness(70%);、つまりセピア70%かつ明度70%です。フィルターのかけかたによってはかなり印象の違う写真になります。

注意:素材サイトによっては素材を加工しての利用を禁止している場合もあります。フリー素材をご利用の際は、必ず利用規約を確認するか、サイトに問い合わせを行い、フィルターを使った加工に問題のないことを確認してください。

サイトの表現の幅が広がる!

以上、便利なフィルタータグをご紹介しました。

<img src="..." style="filter: xxx(000);">

ぜひサイト作りに役立ててください。

参考:MDN
写真素材をお借りしました:Unsplash

コメント

タイトルとURLをコピーしました