こんにちは。いっとくです！
都内でWEB系のエンジニアをやっている謎の男です！
普段の業務では、PHPを使ってサーバーサイドの開発を行うことが多いので、たまにJSとかCSSとかフロント側を触った時に毎回困惑しています。
そんな僕にこんな案件が降ってきました。
「特定のURLの時にサイトの色合いを変えて欲しい！！」
ぶっちゃけ色変えるくらいならそんなに難しくありません。
しかし、今回は話が違った。
…画像の色も違うじゃないか！！
しかも素材提供はなしっ！
こりゃたまげたぜ…
HTMLとかCSSで完結することならまだしも、画像を加工するとなると全くやったことないし…
そんな感じで完全に迷える子羊と化しながらも、手探りでGIMPというフリーソフトを活用してなんとか頑張っていたのですが、後半に差し掛かってめちゃくちゃ便利なCSSのプロパティを発見！！
それがfilter！！！
存在は知っていたのですが、いまいち使いどころを把握しておりませんでした。
だって、もし画像加工するならブラウザでフィルターかけるよりも、元の画像を加工した方が絶対レンダリング早いでしょ！って感じだし。
でもこれ特定ページだけ画像の色合いを変えたいときにめっちゃ便利なんですね〜
ということでその使い方を解説していこうと思います！
filterプロパティの使い方
それではfilterの基本的な機能から
filterは指定できる値の種類が多いので全部覚えようとすると大変ですが、実際使う時に調べれば良いので、どんなことができるかをざっくり把握しておきましょう。
例えば以下のような画像があります。
これにcssでfilterをかけるとこのようになります。
なんか質感が変わりましたね。
良い感じに取れていた写真が加工しすぎてあんまり良くなくなった気がします。
これがフィルターの効果です！要するに上から質感を変えるレイヤーをかけてあげるようなプロパティですね。
ちなみに、上の写真で当てたfilterの当て方は以下の通り。
img {
filter : sepia(50%);
}
今回はsepiaにしましたが、filterの中で種類を指定してあげることによって、白黒にしたりぼかしたり影を落としたりと色々なことができちゃうという便利プロパティ。
さて、ざっくり機能を把握したところで本題に戻りましょう。
特定URLの時だけ色合いを変えたい要望に応える
の「ドラ○も〜ん、特定URLの時だけサイトの色合いを変えろって言われたけど、色々めんどくさいし画像加工できる気がしないよ〜」
そういうことありません？
こういう時僕はだいたいこんなことで悩むんですよ。
- ちょくちょく画像や背景画像でアイコンが製作されているせいで、画像を加工しないと形にならないけど、画像加工は得意じゃない。てかフォトショとかアドビ持ってないんですけど！？
- 背景画像ならCSSを上書きすれば良いけど、imgタグで画像を埋め込んでいる場合、visibilityで画像を非表示にしてから、背景画像を設定しないといけない。てかそれって処理的に無駄が多くね！？
- でもそもそも新しい画像を用意すると、画像を置いておくようのフォルダに無駄に画像ファイルが溜まって精神衛生上よろしくない。色違いのファイル名の命名も地味に苦戦するし。
ド「まったく、本当に困ったやつだな、貴様は。そんな時はfilterを使うと良いぞよ」
ということで変な奴が出てきましたが、気を取り直して色を変える方法です。
結論、imgに対してfilterのhue-rotateを使用しましょう。
使い方は以下のような感じ。
この黄色い画像に対してfilter: hue-rotate(45deg);をかけてあげると、、、
緑になっちゃった！！
コードに落とすとこんな感じです
img {
filter: hue-rotate(45deg);
}
どんな効果かというと、色相環をずらすフィルターをかけてあげています。
色相環っていうとあのカラフルな輪のやつです。美術の教科書にのってるやつ。
その色相環をかっこの中の数字（今回だと45度）分だけずらしてあげるというのがhue-rotateの効果。
つまり今回は、画像の中の色の色相環が45度ずれた色合いになったというわけです。
特定の色合いだけを変更するということができないので、多色のアイコンや写真に対して使用するとなると、少し使い勝手が悪いですが、単色のアイコンの色を変えるとかならもってこいのプロパティです。
これを活用することによって、画像で作られているアイコンの色を変える時に、わざわざ画像を加工してアップするということをしなくて良くなります。神！
アイコンを背景画像として設定してあげて、元の画像を加工して切り替える方がパフォーマンス的には良さそうだけど、保守運用のしやすさを考慮すると、filterを使うという選択はなかなか悪くない決断だな〜と感じたわけです。
特に、僕らエンジニアはパソコンいじっているとはいえ、画像加工も得意みたいなことって全くありませんからね！
というわけで一部のエンジニアをがっつり助けてくれる素晴らしいプロパティでした！
すごくニッチですが、「サイト内の特定URLだけ色合いを変更したいけど、画像があって超絶面倒臭い」という人はぜひ一度検討してみてください！！
以上、滅多にしないCSSのお話でした。
おしまい！
コメント