• Home
  • Web制作
  • 【CSS】彩度調整はfilter:saturateにお任せ！鮮やかにも地味にも自由自在！

【CSS】彩度調整はfilter:saturateにお任せ！鮮やかにも地味にも自由自在！

schedule
Tags: CSS

はじめに

Webサイトのデザインにおいて、色使いは非常に重要です。色の使い方一つで、サイト全体の印象は大きく変わります。

画像やイラストの色合いを調整することで、サイト全体の雰囲気を統一したり、特定の要素を強調したりすることができます。

しかし、画像編集ソフトを使って色を調整するのは手間がかかりますし、スキルも必要になります。

そこで便利なのが、CSSのfilter:saturateです。filter:saturateを使えば、HTMLやCSSの知識だけで、画像などの彩度を調整できます。

この記事では、filter:saturateの基本的な使い方から、具体的な使用例までご紹介します。ぜひこの記事を参考にして、filter:saturateを活用してみてください。

あわせて読みたい
CSSフィルターで画像編集！表現力を広げるテクニックを紹介

filter:saturateとは？

filter:saturateは、要素の彩度を調整するためのCSSのプロパティです。彩度とは、色の鮮やかさを表す指標のことです。彩度が高いほど色は鮮やかに見え、彩度が低いほど色は灰色に近づきます。

filter:saturateを使うことで、画像やイラストだけでなく、テキストや背景など、あらゆる要素の彩度を調整できます。

filter:saturateの基本的な使い方

filter:saturateの基本的な構文は以下の通りです。

.sample {
  filter: saturate(数値);
}

数値には、彩度の割合をパーセントで指定します。

  • 100%：彩度は変化しません。
  • 100%より大きい値を指定すると、彩度は上がります。
  • 100%より小さい値を指定すると、彩度は下がります。
  • 0%を指定すると、彩度は完全に失われ、モノクロになります。

例えば、以下のCSSは、.sampleというクラスが適用された要素の彩度を150%に設定します。

.sample {
  filter: saturate(150%);
}

filter:saturateの使用例

filter:saturateは、様々な場面で使用できます。ここでは、具体的な使用例をいくつかご紹介します。

  1. 画像を鮮やかにする

    彩度が低い画像は、全体的にぼんやりとした印象を与えてしまいます。filter:saturateを使って彩度を上げることで、画像をより鮮やかに、印象的に見せることができます。

    .sample img {
  filter: saturate(120%);
}

  2. 画像をレトロな雰囲気にする

    彩度を下げることで、画像をレトロな雰囲気に仕上げることもできます。

    .sample img {
  filter: saturate(70%);
}

  3. ボタンにホバー効果を付ける

    ボタンにホバー効果を付ける際にも、filter:saturateは役立ちます。例えば、ホバー時に彩度を上げることで、ボタンをクリックするようにユーザーを誘導できます。

    .sample button:hover {
  filter: saturate(130%);
}

filter:saturate使用時の注意点

filter:saturateは便利なプロパティですが、使用する際には以下の点に注意しましょう。

  • 彩度を上げすぎると、画像が不自然になる可能性があります。
  • 彩度を下げすぎると、画像が見づらくなる可能性があります。
  • ブラウザやデバイスによっては、色の表示方法が異なるため、意図した色で表示されない場合があります。

まとめ

今回は、CSSのfilter:saturateについて解説しました。filter:saturateは、要素の彩度を調整することで、Webサイトに様々な効果を加えることができる便利なプロパティです。

ぜひfilter:saturateを活用して、魅力的なWebサイトを作成してください。

関連記事