• Home
  • Web制作
  • 【CSS】filter:contrast()で画像の明暗を自由自在に操ろう！

【CSS】filter:contrast()で画像の明暗を自由自在に操ろう！

schedule
Tags: CSS

Webページの画像をもっと魅力的に！ filter:contrast() で表現の幅を広げよう

Webサイトを制作する上で、画像の編集は欠かせない作業と言えるでしょう。画像編集ソフトを使用すれば、思い通りの表現を実現できます。しかし、画像編集ソフトを起動して調整するのは手間がかかります。

そこで活用したいのが、CSSのfilter:contrast()です。filter:contrast()を使用すれば、HTMLに直接記述するだけで、画像の明暗を調整できます。

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

filter:contrast()の基本的な使い方

filter:contrast()は、CSSのプロパティの一つで、要素に対して様々なグラフィック効果を適用できます。その中でもcontrast()関数は、画像の明暗、つまりコントラストを調整する際に使用します。

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

.sample {
  filter: contrast(値);
}

値の部分には、調整したいコントラストの比率をパーセント(%)または数値で指定します。

  • 100%： 元画像と同じ明暗（デフォルト）
  • 0%： 全体が灰色になる
  • 100%以上： 明暗差が大きくなる
  • 100%未満： 明暗差が小さくなる

例えば、画像の明暗を現在の2倍にしたい場合は、以下のように記述します。

.sample {
  filter: contrast(200%);
}

filter:contrast()の活用事例

filter:contrast()は、以下のような場面で活用できます。

  • 画像を強調したい場合: コントラストを上げることで、画像にメリハリをつけ、より印象的に見せることができます。
  • 画像をソフトな雰囲気にしたい場合: コントラストを下げることで、画像全体を淡い雰囲気に調整できます。
  • ホバー効果と組み合わせる: マウスホバー時にコントラストを変化させることで、ユーザーの視線を誘導する効果が期待できます。

まとめ｜filter:contrast()で画像編集をもっと手軽に

今回は、CSSのfilter:contrast()について解説しました。filter:contrast()を使用すれば、画像編集ソフトを使用せずに、Webページ上の画像の明暗を調整できます。

filter:contrast()は、画像をより魅力的に見せるための有効な手段の一つと言えるでしょう。ぜひ、Webサイト制作にfilter:contrast()を活用してみてください。

関連記事