folderデザインしたい

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

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

加工ソフト不要!CSSだけで写真やイラストを加工し雰囲気を変える方法 - https://do.gt-gt.org/css-img-filter/

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

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

この記事を書いた人

ガタガタ

このサイトと、このサイトの掲載記事のほとんどと、このサイトで配布しているプログラムやテンプレートのすべてを作った人。絵を描いたり、文章を書いたりして暮らしています。

関連記事

コピペでOK!オシャレなフォントが無料で使えるGoogle Fontsの導入方法
folderデザインしたい favorite 36

コピペでOK!オシャレなフォントが無料で使えるGoogle Fontsの導入方法

クリックで内容を展開するアコーディオンメニューをCSSだけで実装する方法
folderデザインしたい favorite 58

クリックで内容を展開するアコーディオンメニューをCSSだけで実装する方法

創作・同人サイトで使えるフリー素材サイト【写真・イラスト・壁紙など】
folderデザインしたい favorite 57

創作・同人サイトで使えるフリー素材サイト【写真・イラスト・壁紙など】

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方
folderデザインしたい favorite 24

Googleカレンダーをサイトにキレイに埋め込むFullCalendarの使い方

YouTubeの埋め込みの縦横比を一定のままレスポンシブ対応させる方法
folderデザインしたい favorite 26

YouTubeの埋め込みの縦横比を一定のままレスポンシブ対応させる方法

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方
folderデザインしたい favorite 61

HTMLテンプレートを自前カスタマイズしてもダサくならないためのデザインの考え方