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

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

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

「この写真、構図とか風景はすごく好きだけど、色味がもうちょっとくっきりしてたら……」とか、逆に「もうちょっとセピアっぽい色味が欲しいなぁ」など、色味を加工して使いたい場合もあるかもしれません。しかし、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

創作・同人サイトにオススメのサーバー

スターサーバー キャンペーン中!

オススメ度  star star star star star

スターサーバーでは2021年5月10日まで、すべてのプランの初期費用が無料になるキャンペーンを実施中です!キャンペーン期間中は、月額440円のスタンダードプランより上位のプランを12ヵ月以上で新規契約すると、契約期間を1年分無料延長できるほか、.comや.netなどのドメインが1年間利用無料になります。

使用料 初期費用1,650円無料!
最低月額138円〜
WordPress有は月額330円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ 不可

最低月額138円のローコストで、大容量・高速のサーバーが利用できます。契約中のプラン変更も可能。とりあえず有料サーバーを試したい方にオススメ

スターサーバー

ロリポップ!レンタルサーバー

オススメ度  star star star star star

使用料 初期費用1,500円~
最低月額100円〜
WordPress有は月額250円〜
容量 10GB〜
WordPress エコノミープランのみ不可
その他のプランは可
簡単インストール機能付き
成人向けコンテンツ

月額100円から使える、コスパ最強の老舗レンタルサーバー!個性的で可愛いドメインが選べるのも魅力的。当サイトもロリポップ!を利用しています。

ロリポップ!レンタルサーバー

リトルサーバー

オススメ度  star star star star star_half

使用料 初期費用920円
最低月額150円〜
容量 20GB〜
WordPress すべてのプランで可
成人向けコンテンツ

比較的新しいレンタルサーバー。なんと缶ジュースほどの値段でWordPressを安定したサーバーで使える!7日間の自動バックアップ機能もあって、もしものときも安心。個人サイトの新しいスタンダードになるかも

リトルサーバー

さくらのレンタルサーバ

オススメ度  star star star star star_half

使用料 初期費用1,048円~
最低月額131円〜
WordPress有は月額524円〜
容量 10GB〜
WordPress ライトプランのみ不可
その他のプランは可
クイックインストール機能付き
成人向けコンテンツ

自動バックアップなど、安心・快適にサイトを運営する機能が魅力のレンタルサーバー。財布にも優しいのが◎。もちろんWordPressも使えます

さくらのレンタルサーバ

XREA Free

オススメ度  star star star star star_border

使用料 無料
容量 1GB
PHP
WordPress
いずれも使用可

なんと無料ながらWordPressも使える。必要な機能を必要なだけ、シンプルなレンタルサーバー。物足りなくなったら有料プランへグレードアップも可!手軽に始められて、初心者にもやさしい仕様

XREA
レンタルサーバー比較