CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のfilterプロパティで画像の彩度を調整する方法

CSS3では、filterプロパティにsaturate()関数を指定することで、画像の彩度を簡単に調整できます。彩度を高めれば色がより鮮やかになり、低くすれば色味が抑えられた落ち着いた印象になります。

filter: saturate() の基本構文

filter: saturate(値);

値はパーセンテージ（%）で指定します。100%が元の画像の状態で、0%にすると完全にモノクロ（無彩色）になります。100%を超える値を指定すると、彩度が強調され、より鮮やかな画像になります。

サンプルコード

以下は、同じ画像を2つ並べて、片方だけ彩度を500%に引き上げた例です。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    filter: saturate(500%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework（彩度500%）</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

実行結果

上の画像は元の状態、下の画像はsaturate(500%)を適用したものです。クラスdemoを付けた画像の色が、元の画像よりもはるかに鮮やかになっていることが確認できます。

彩度調整の活用例

  • ホバーエフェクト： マウスオーバー時に彩度を上げて、画像に注目を集める演出が可能です。
  • モノクロ表現： saturate(0%)を使えば、CSSだけでグレースケール画像を作成できます。
  • 雰囲気の演出： 彩度を下げることで、落ち着いたトーンのデザインやセピア調に近い表現にも活用できます。

なお、filterプロパティは主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされているため、ベンダープレフィックスなしでそのまま使用できます。

  1. CSS3の線形グラデーション（linear-gradient）と放射状グラデーション（radial-gradient）の使い方

    グラデーションとは、2つ以上の色を滑らかに組み合わせて表示するCSSの機能です。中でもよく使われるのが「線形グラデーション」と「放射状グラデーション」の2種類です。 線形グラデーションは、上から下、左から右など、直線に沿って色が変化していくスタイルです。一方、放射状グラデーションは、要素の中心から外側に向かって色が広がるように変化します。 ここでは、CSS3でこれら2つのグラデーションを使う方法を、実際のコード例とともに解説します。 サンプルコード <!DOCTYPE html> <html> <head> <style> body{ f

  2. GIMPで画像のサイズを変更する方法｜初心者向けステップ解説

    このガイドでは、無料の画像編集ソフト「GIMP」を使って画像ファイルのサイズを変更する手順を、スクリーンショット付きでわかりやすく解説します。本記事のスクリーンショットはmacOS版GIMPのものですが、Windows版やLinux版でもインターフェースはほぼ同一のため、どのOSをお使いの方でも同じ手順でスムーズに操作できます。GIMPで画像サイズを変更する手順GIMPを起動し、File(ファイル)メニューからOpen(開く)を選択します。サイズを変更したい画像ファイルを選択して開きます。上部メニューのImage(画像)をクリックし、ドロップダウンリストからScale Image(画像の拡大・