• Home
  • Web制作
  • 【CSS】filter:brightness()で画像や要素の明るさを自由自在に操る！

【CSS】filter:brightness()で画像や要素の明るさを自由自在に操る！

schedule update
Tags: CSS

はじめに：CSSのfilter:brightness()とは？

Webサイトを制作する上で、画像や要素の見え方を調整することは非常に重要です。画像が暗すぎて見づらかったり、逆に明るすぎて他の要素と調和しなかったりすると、ユーザーの使い心地を損ねてしまう可能性があります。

CSSのfilterプロパティは、画像や要素に様々な視覚効果を与えることができる便利なプロパティです。その中でも、brightness()関数は、要素の明るさを調整するために使用されます。

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

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

filter:brightness()は、要素の明るさをパーセントで指定します。

.element {
  filter: brightness(50%); /* 明るさを50%に設定 */
}

brightness()関数の引数には、以下の値を指定できます。

  • 100%よりも大きい値: 要素をより明るく表示します。例えば、brightness(200%)は、元の明るさの2倍の明るさで表示します。
  • 100%: 要素の明るさを変更しません。
  • 0%から100%の間の値: 要素を暗く表示します。例えば、brightness(50%)は、元の明るさの半分にします。
  • 0%: 要素を完全に黒くします。

filter:brightness()の実践的な使用例

filter:brightness()は、様々な場面で活用できます。

1. 画像の明るさ調整

filter:brightness()は、画像の明るさを調整するために使用できます。例えば、以下のようにすることで、画像を暗くすることができます。

.darkened-image {
  filter: brightness(70%); 
}

2. ホバー効果

filter:brightness()は、ホバー効果にも使用できます。例えば、以下のようにすることで、マウスオーバー時に画像を明るくすることができます。

.image:hover {
  filter: brightness(120%);
}

3. 要素の視認性向上

背景画像の上にテキストを配置する場合、テキストが見えにくい場合があります。filter:brightness()を使って背景画像を少し暗くすることで、テキストの視認性を向上させることができます。

.sample-image {
  background-image: url("sample.jpg");
  filter: brightness(80%);
}

filter:brightness()使用時の注意点

filter:brightness()を使用する際には、以下の点に注意が必要です。

  • パフォーマンスへの影響: filterプロパティは、処理に負荷がかかるため、パフォーマンスに影響を与える可能性があります。特に、アニメーションなどで頻繁にfilterプロパティの値を変更する場合には、注意が必要です。
  • アクセシビリティ: 明るさを極端に調整すると、視覚障碍者の方にとってコンテンツが閲覧しづらくなる可能性があります。アクセシビリティに配慮し、適切な明るさに調整することが重要です。

まとめ：filter:brightness()をマスターして、より魅力的なWebサイトを！

filter:brightness()を使うことで、要素の明るさを簡単に調整できます。画像の見栄えを良くしたり、ホバー効果を加えたり、様々な場面で活用できます。本記事で紹介した内容を参考に、ぜひfilter:brightness()を活用してみてください。

関連記事