filterプロパティでできること。

CSSのfilterプロパティの関数は全部で10種類ほどある。（2022年現在。noneを含めると11種類。）かつてはPhotoshopなどで行っていたWebサイト用の画像加工が、結構CSSだけでカバーできるようになった。

filterでは色の三属性である色相・彩度・明度の調整から、ぼかし、コントラスト、グレースケール、ドロップシャドウなどが簡単に扱える。

サイトで使用する画像の色変更も一括でできるので、写真のテイストの統一化やホバー時のエフェクトがしやすい。

filterの種類。

色相回転（hue-rotate）

画像出典：Wikimedia Commons ＋－さま

色相（hue）とは要するに、赤・オレンジ・黄色・緑・青・紫・など、色合いのこと。

マンセルカラーシステムなどの色相環では時計回り（もしくは反時計回り）に色が変わり、その色を数値や記号で指定できる。CSSの場合は画像などの色を色相環を基にした、度（deg）で指定をする。

例）

.hue {
 filter: hue-rotate(45deg);
}

色相（hue）を色相環のサークル、ホイールで45度回した場合。

彩度（saturate）

彩度（saturate）とは要するに、色の鮮やかさのこと。

彩度を含む、色の三属性の色相・彩度・明度は、CSSのfilterではHSB（Hue-色相、Saturation-彩度、Brightness-明度）で指定する。

HSBの素材が見つからなかったので、下記HSL、HSVの画像（RGBは今回除いて）を参考にイメージするなら、、、

• 明度（Brightness。この画像のHSL、HSVではLightness、Value。）は縦軸の上へ行くほど白くなり、下へ行くほど黒くなる。
• 色相（Hue）は色相環の回転軸で変化する。
• 彩度（Saturation）は横軸で鮮やかさの度合いが変わる。

画像出典：Wikimedia Commons SharkDさま

例）

.saturate {
 filter: saturate(200%);
}

彩度（saturate）を200%（2倍）上げた場合。

.brightness {
 filter: brightness(200%);
}

明度（brightness）

明度（brightness）を200%（2倍）上げた場合。

ぼかし（blur）

例）

.blur {
  filter: blur(2px);
}

ぼかし（blur）を2pxかけた場合。

コントラスト（contrast）

例）

.contrast {
  filter: contrast(200%);
}

コントラストを（contrast）を200%（2倍）上げた場合。

グレースケール（grayscale）

例）

.grayscale {
  filter: grayscale(90%);
}

グレースケールを（grayscale）を90%上げた場合。

透過度（opacity）

例）

.opacity {
  filter: opacity(50%);
}

透過度（opacity）を50%（半透明）にした場合。

反転（invert）

例）

.invert {
  filter: invert(100%);
}

階調（色の段階、濃淡の度合い）を100%反転（invert）させた場合。

セピア（sepia）

例）

.sepia {
  filter: sepia(50%);
}

50%のセピア調にした場合。

ドロップシャドウ（drop-shadow）

drop-shadowはbox-shadowと違い、透明部分があるPNGやSVGの輪郭に合わせてシャドウをつけることができる。

例）

.drop_shadow {
  filter: drop-shadow(5px 5px 10px #777);
}

筆でシャシャシャッと描いた画像の形でトリミングした写真に、ドロップシャドウをかけた場合。

filterで色相・彩度・明度を調整するメリット。

CSSで調整するメリットしては、、、

• ブラウザに組み込まれた状態で調整できるので、修正や調整がしやすい。
• クラスセレクタや子孫セレクタの活用により、画像をまとめて一括指定でき、統一感も出しやすい。
• などがある。

オンラインツール。

オンラインで利用できるジェネレーターを利用すると、見た目を調整しながらCSSを書き出してくれるので便利だ。

そのうちの一つである「Front-end Tools」では、デフォルトでサンプル画像が用意されており、右サイドの項目から自分が使いたい画像をアップロードして調整することもできる。

参考： Front-end Tools さま CSS filter（フィルター）ジェネレーター

Web関連の知の宝庫、MDNのサイトも参考になる。

参考： MDN さま filter – CSS: カスケーディングスタイルシート | MDN

そのうちFigmaのプラグインでも出てきそうな気もします。（今回は見つけられず。）

CSSでの画像調整の補足。

CSSで調整するメリットしては、、、

• ブラウザに組み込まれた状態で調整できるので、修正や調整がしやすい。
• クラスセレクタや子孫セレクタの活用により、画像をまとめて一括指定でき、統一感も出しやすい。
• などがある。

関連：CSSブレンドモード。mix-blend-modeでPhotoshopのような乗算を。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。（元々はメモ書きでしたので順次見直し、更新しています。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。