CSSのfilterでぼかしや明るさ調整などの視覚効果を適用し、デザインを強化する方法をわかりやすく解説

2024.09.14
スポンサーリンク

filter プロパティは、要素に対して視覚的な効果を適用するために使用されます。ぼかし、明るさ、コントラスト調整、色相の回転、グレースケール変換、透明度、彩度、セピア調など、さまざまなエフェクトを追加することができます。

スポンサーリンク

CSS: filter の主な値とその効果の一覧

  • blur(px): 要素をぼかします。例: blur(5px)
  • brightness(%): 要素の明るさを調整します。例: brightness(150%)
  • contrast(%): コントラストを調整します。例: contrast(200%)
  • grayscale(%): 要素をグレースケール化します。例: grayscale(100%)
  • hue-rotate(deg): 要素の色相を指定した度数だけ回転させます。例: hue-rotate(90deg)
  • opacity(%): 要素の不透明度を調整します。例: opacity(50%)
  • saturate(%): 彩度を調整します。例: saturate(300%)
  • sepia(%): 要素にセピア調のエフェクトを適用します。例: sepia(100%)

filterプロパティが効かない時の原因と対策

適用対象の要素が不適切

filterプロパティは、画像やコンテナ要素など、視覚的にフィルター効果を適用できる要素に使用されますが、テキストや非表示の要素に適用しても効果がわかりづらいことがあります。
対策: filterを適用する要素が視覚的な要素（例えば、画像やブロック要素）であることを確認し、テキストや非表示の要素には適用しないようにします。

共通するCSSコード

.css-sample-container {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  text-align: center;
  font-family: Arial, sans-serif;
}

表示例

blur(5px)

画像をぼかす効果。

HTMLコード

<div class="css-sample-container">
  <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像" class="filter-blur">
</div>

CSSコード

.css-sample-container img.filter-blur {
  filter: blur(5px);
}

表示結果

サンプル画像

grayscale(100%)

画像をグレースケール化します。

HTMLコード

<div class="css-sample-container">
  <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像" class="filter-grayscale">
</div>

CSSコード

.css-sample-container img.filter-grayscale {
  filter: grayscale(100%);
}

表示結果

サンプル画像

brightness(150%)

画像を明るくします。

HTMLコード

<div class="css-sample-container">
  <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像" class="filter-brightness">
</div>

CSSコード

.css-sample-container img.filter-brightness {
  filter: brightness(150%);
}

表示結果

サンプル画像

contrast(200%)

画像のコントラストを高めます。

HTMLコード

<div class="css-sample-container">
  <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像" class="filter-contrast">
</div>

CSSコード

.css-sample-container img.filter-contrast {
  filter: contrast(200%);
}

表示結果

サンプル画像

hue-rotate(90deg)

画像の色相を90度回転させます。

HTMLコード

<div class="css-sample-container">
  <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像" class="filter-hue-rotate">
</div>

CSSコード

.css-sample-container img.filter-hue-rotate {
  filter: hue-rotate(90deg);
}

表示結果

サンプル画像

opacity(50%)

画像の不透明度を50%にします。

HTMLコード

<div class="css-sample-container">
  <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像" class="filter-opacity">
</div>

CSSコード

.css-sample-container img.filter-opacity {
  filter: opacity(50%);
}

表示結果

サンプル画像

saturate(300%)

画像の彩度を300%にします。

HTMLコード

<div class="css-sample-container">
  <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像" class="filter-saturate">
</div>

CSSコード

.css-sample-container img.filter-saturate {
  filter: saturate(300%);
}

表示結果

サンプル画像

sepia(100%)

画像にセピア調の効果を適用します。

HTMLコード

<div class="css-sample-container">
  <img src="https://programming-cafe.com/wp-content/uploads/colorphoto02.jpg" alt="サンプル画像" class="filter-sepia">
</div>

CSSコード

.css-sample-container img.filter-sepia {
  filter: sepia(100%);
}

表示結果

サンプル画像

まとめ

  • filter プロパティは、画像や要素に対してビジュアルエフェクトを適用するために使用されます。
  • さまざまなエフェクト（ぼかし、グレースケール、明るさ、コントラストなど）を適用できます。
  • フィルターの効果が正しく適用されない場合は、ブラウザの対応状況やコードの記述ミスを確認しましょう。
スポンサーリンク