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

CSS3フィルター機能の使い方を徹底解説｜コントラスト・ドロップシャドウ・セピア効果

CSS3のfilterプロパティを使うと、画像などの要素に対してコントラスト、明るさ、色相回転、不透明度といった視覚効果を手軽に適用できます。本記事では、代表的なフィルター関数であるcontrast()、drop-shadow()、sepia()の使い方を、サンプルコードと表示結果あわせて解説します。

コントラスト（contrast）

画像のコントラストを設定するには、filter: contrast(%)を使用します。値の目安は以下のとおりです。

  • 0% … 画像が完全に黒くなる
  • 100% … 元画像のまま（デフォルト値）
  • 100%超 … コントラストが強調される

100%を超える任意の値を指定することで、好みの強さに自由に調整できます。

サンプルコード

CSS3で画像の明るさとコントラストを調整する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%) contrast(120%);
}
</style>
</head>
<body>
<h1>MySQLを学ぼう</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>MySQLを学ぼう</h1>
<p>下の画像は、上の元画像よりも明るく、コントラストが強調されています。</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

表示結果

CSS3フィルター機能の使い方を徹底解説｜コントラスト・ドロップシャドウ・セピア効果

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

画像にドロップシャドウ（影）を追加するには、filterプロパティにdrop-shadow()を指定します。指定できる値は以下のとおりです。

  • h-shadow … 影の水平方向のオフセットをピクセル値で指定する
  • v-shadow … 影の垂直方向のオフセットをピクセル値で指定する。負の値を指定すると影が画像の上側に表示される
  • blur … 影にぼかし効果を加える
  • spread … 正の値で影が拡大し、負の値で縮小する
  • color … 影の色を指定する

サンプルコード

続いて、ドロップシャドウを適用する例です。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: brightness(120%) contrast(120%) drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>MySQLを学ぼう</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>MySQLを学ぼう</h1>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

表示結果

CSS3フィルター機能の使い方を徹底解説｜コントラスト・ドロップシャドウ・セピア効果

セピア効果（sepia）

画像にセピア効果（古い写真のような黄褐色のトーン）を適用するには、filterプロパティにsepia()を指定します。以下がそのコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
   filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Spring Frameworkを学ぼう</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Spring Frameworkを学ぼう</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

表示結果

CSS3フィルター機能の使い方を徹底解説｜コントラスト・ドロップシャドウ・セピア効果

まとめ

filterプロパティでは、複数のフィルター関数をスペースで区切って同時に指定できます。例えばfilter: grayscale(50%) brightness(110%)のように組み合わせれば、より表現力豊かなエフェクトを実現できます。主要なブラウザ（Chrome、Firefox、Safari、Edge）で広くサポートされているため、画像の装飾やホバー時の演出などにもぜひ活用してみてください。

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

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

  2. CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

    CSS3の3D変換（3D Transform）を活用すると、要素をX軸・Y軸に加えてZ軸（奥行き）方向にも移動させることができます。2D変換では表現できない立体感のある演出が可能になり、モダンなWebデザインにおいて非常に強力な機能です。 CSS3で使える主な3D変換関数 3D変換を呼び出すために使用される主なメソッドは以下の通りです。 番号値と説明 1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16個の値からなる行列を使用して、要素を変換します。 2translate3d(x,y,z)X軸・Y軸・Z軸の3つの値を使って、要素を移動します。 3t