CSSフレームワークを使おう

■第19話：filterの効果、画像にぼかしや影をつけよう

（最終更新日：2022.08.30）

元の画像をいじらずにぼかしの効果を加えたい

フォトショップや画像編集ソフトを使えば、カッコ良い効果を入れたデザインを作ることができる。 だが、それだと加えた効果ごとに画像ファイルが必要になる。管理も大変だ。 ブラウザ上で画像に目的の効果を加えられれば、ファイルを増やす必要はなくなり、その場で色々変化させることができるので便利だ。 今回は、そんなCSSで画像に効果を加えられるfilterの紹介をする。

１.blur

filterの使い方は極めて簡単だ。使いたい効果とどれだけ効果を加えたいかの値を入れればいい。 例えば最初に紹介するblur（ぼかし）であれば、filter:blur(5px);とすれば良い。括弧内の値は任意だ。 例えば括弧内を2pxにすればぼかしは緩くなる。

２.drop-shadow

drop-shadowは影をつけることができる。filter: drop-shadow(10px 10px 10px black);とすれば、 順番にx軸に10px、y軸に10px離れた場所に10pxだけ黒くぼかすことができる。指定する値がやや多いが、使えば分かると思う。

３.hue-rotate

hue-rotateは色合いを変える効果がある。filter:hue-rotate(90deg);という具合に角度で指定するが、そこはあまり気にしなくていい。 少しずつ値を変えていって、自分の好みに合った色に変えてみよう。

４.invert

invertは色合いを反転する効果がある。filter:invert(90%);という具合にパーセントで指定する。50%にすると影だけの表示になる。 これも使いながら試してみよう。

５.saturate

saturateは彩度を変える効果がある。filter:saturate(200%);という具合に、これもパーセントで指定する。使いながら試してみよう。

６.sepia

sepiaは文字通りセピア調にする効果がある。filter:sepia(50%);という具合に、これもパーセントで指定する。使いながら試してみよう。

７.brightness

brightnessも文字通り明るさを変える効果がある。filter:brightness(1.3);という具合に小数もしくは整数で指定する。 1がそのままの明るさで、それより低ければ暗く、高ければ明るくなる。使いながら試してみよう。

８.contrast

contrastも文字通りコントラストを変える効果がある。filter:contrast(50%);という具合にパーセントで指定する。 使いながら試してみよう。

９.grayscale

grayscaleは全体の色をグレーに変える効果がある。filter:grayscale(150%);という具合にパーセントで指定する。 石化したような見た目にできる。

10.opacity

opacityは透明度を変える効果がある。filter:opacity(50%);という具合にパーセントで指定する。使いながら調整しよう。

11. まとめ

今回、CSSのfilterで使える効果をそれぞれ紹介した。 分かりやすさのため、一つずつその効果を示したが、複数組み合わせて使うこともできる。 今ある画像に対して、簡単に変化をつけることができるので、是非気軽に試してみよう。

▼参考図書、サイト

  filter　　mdn web docs_