CSSは、Webページの見た目（スタイル）を指定するための言語です。初歩的な内容でいうと、テキストや画像のサイズ、色や配置などを変更できます。極めて高い頻度で使われる言語のひとつですが、実は画像を簡単に加工することもできます。
というわけで今回は、色相反転、ぼかし、モノクロなど。CSSで画像を加工する方法（filterプロパティ）についてご紹介いたします。単純に明るさやコントラストの調整も可能です。
目次
CSSで画像を加工するには「filterプロパティ」を使う
CSSのfilterプロパティを使えば、簡単に画像を加工可能です。できることも豊富なので、簡単な画像加工ならCSSでサクッと対応する方が早いかもしれません。
できること
次のような加工・編集を施すことが可能です。ちなみにこれ、画像だけでなく動画にも適用できて複数併用することも可能です。
- ぼかし
- 明るさ
- コントラスト
- 影をつける
- モノクロ
- 色相反転
- 色相/明るさ/彩度を反転
- 不透明度
- 彩度
- セピア
利用シーン
Web上に画像をアップロード後に、「色味を変えたい、明るさを変更したい」などというケースでもすぐに対応可能です。簡単な加工なら画像編集ソフトを立ち上げる必要はなく、画像を差し替えたり、再アップロードする必要もありません。
例えば、こんな利用シーンが想定できます。
- シンプルなロゴ画像のカラーを反転させる（白→黒またはその逆など）
- ECサイトで販売が終了した商品画像のみをモノクロする
- サイト全体の画像を同じような明るさや彩度に調整する（統一感を出す）
これらはほんの一例ですが、hoverクラスと組み合わせれば、カーソルを合わせた際に画像に何かしらの変化をつける使い方もあります（画像にカーソルを合わせると暗くなる等）。
filterプロパティの種類と使い方
では、具体的なfilterプロパティの種類とそれらの使い方をご紹介していきます。いずれも対象になる画像のクラスを指定して使います。
.example{filter: blur(10px);}数値を変更して加工度合いも調整可能です。TCDテーマであれば、カスタムCSSにコピペすればすぐ再現できます。今回サンプルに使う元画像はこちら。以下でご紹介する各filterプロパティと比較してみてください。
blur（ぼかし）
filter: blur(10px);画像をぼかします。数値が多いほどぼけぐらいが強くなります。ただ、Webページで重要な情報を隠すような目的では絶対に使用しないでください（デベロッパーツールを使えば簡単に外せます）。あくまでデザインとして、画像にぼかしを入れる際に使いましょう。
テキストにも適用できるので、デベロッパーツール上でblurをかけてスクリーンショットを撮れば、目隠しとして利用できますね。画像の加工が不要になります。
brightness（明るさ）
filter: brightness(0.5);画像の明るさを調整します。数値は大きいほど明るくなります。1がオリジナル画像の明るさなので、それ以上にすると明るく、0.9以下にすると暗くなります。
contrast（コントラスト）
filter: contrast(200%);その名の通り、コントラストを調整できます。明暗の差ですね。数値が大きいほど、差が大きくなります。100%がオリジナルのコントラストです。
drop-shadow（影をつける）
filter: drop-shadow(10px 10px 10px #000000);画像に影をつけます。数値を変更すると、影の位置を調整可能です。最後に影の色を指定するカラーコードを入力します。
→WEB色見本 原色大辞典 – HTMLカラーコード
画像を立体的に見せたい際に使えますね。なお最近のTCDテーマには、枠と影が適用される「frame」というクラスをあらかじめ実装しています（以下はWordPressテーマ「BASARA」の例）。
痒い所に手が届くクラスを搭載しています。
grayscale（モノクロ）
filter: grayscale(100%);モノクロというか、厳密にはグレーのレイヤーを上に重ねています。100%にすると完全にモノクロになりますが、数値を下げると色味を抑えた画像をつくれます。
hue-rotate（色相反転）
filter: hue-rotate(180deg);色相を反転させます。↑は180deg（180度）反転させている例です。色相とは色合いのことで、赤の対色は青緑のようなイメージです。CSSで加工しているとは思えないぐらい全く違和感ないですね。色相環を参考にすると反転する色がある程度予想できます。
WordPressサイトをダークモードに切り替えられるプラグインがあるのですが、ロゴや各種画像はダークモード仕様にならないので、このfilterプロパティで対応する手もありです。
WordPressで作ったサイトにダークモード（ナイトモード）を実装したいと考えたことはないでしょうか。 ユーザーが好みに応じてダークモードを使えるようになれば、便利なサイトである印象を与えることができます。WordPressのプラグインを活用すれば、手軽にダークモードを実装可能です。 ...
invert（色相/明るさ/彩度を反転）
filter: invert(100%);先ほどの色相に加えて、明るさと彩度も同時に反転させます。明るいところは暗く、鮮やかなところは色味が抑えられます。100%に設定するとご覧のように反転されます。
opacity（不透明度）
filter: opacity(30%);画像の不透明度を変更できます。0%にすると完全に透明になって画像が見えなくなります。hoverクラスと組み合わせるような使い方が多いかもしれません。
saturate（彩度）
filter: saturate(200%);彩度を調整できます。数値を上げるほどに画像が色鮮やかになります。100%がオリジナルの彩度で、それ以上は色味が強調されます。
sepia（セピア）
filter: sepia(60%);画像にセピア色（茶色）のレイヤーを重ねるイメージです。数値が大きいほど茶色みが増します。モノクロとはまた異なるレトロな雰囲気の画像になりますね。
まとめ
CSSのみで画像を加工する方法（filterプロパティ）についてご紹介いたしました。
Web上にアップロードしてから画像を微調整したいときはもちろんですが、割と幅広い加工が可能なんですよね。特に白黒の色反転などは全く違和感がないので、画像を作り直すよりもスマートに対応可能です。
WordPressサイトの場合、CSSの編集方法はこちらの記事が参考になります。
WordPressに慣れてくると、サイトのデザインをCSSでカスタマイズしたくなりますよね。この時最も気をつけておきたいのが、CSSの編集方法です。 特に、テーマのスタイルシートを直接編集するのは避けた方がよいでしょう。 当記事では、WordPressでCSSを編集する方法を4つご紹介し...
コメント