• Home
  • Web制作
  • 【CSS】filter: invert; で表現の可能性を広げよう！反転表示の仕組みと活用事例をご紹介

【CSS】filter: invert; で表現の可能性を広げよう！反転表示の仕組みと活用事例をご紹介

schedule
Tags: CSS

はじめに

Webサイト制作において、視覚的な訴求力は欠かせません。画像やテキスト、レイアウトなど、様々な要素を組み合わせて、魅力的なページを作り上げていきます。その中でも、CSSは表現の幅を広げる上で非常に重要な役割を担っています。

CSSには、要素の外観を操作するための様々なプロパティが用意されています。その中でも、「filterプロパティ」は、画像や要素に視覚効果を加えることができる強力な機能です。今回は、filterプロパティの中でも、色を反転させる効果を持つ「invert」について詳しく解説していきます。

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

filter: invert; とは？色の反転の仕組みを理解しよう！

filter: invert( ); は、要素の色相を反転させるCSSの指定方法です。括弧内にパーセンテージを指定することで、反転の度合いを調整できます。例えば、filter: invert(100%);と指定すると、完全に色が反転します。

色の反転は、RGBの各チャンネルの値を255から引いた値に置き換えることで実現されます。例えば、赤色の値が255の場合、反転後は0になり、逆に0の場合は255になります。

filter: invert; の記述方法

.sample {
  filter: invert(50%); /* 反転の度合いは50% */
}

上記のように、対象となる要素のCSSに filter: invert(); を記述します。 括弧内の数値を調整することで、反転の度合いを調整することができます。

活用事例1：画像を反転させてみよう！

filter: invert( ); は、画像に適用することで、簡単に色の反転効果を加えることができます。

例えば、白黒画像を反転させてネガのような表現にしたり、カラー画像の色調を反転させて幻想的な雰囲気を演出したりすることができます。

使用例

.sample img {
  filter: invert(100%);
}

上記のように、imgタグにクラスを指定し、そのクラスに対して filter: invert(100%); を適用することで、画像を完全に反転させることができます。

活用事例2：テキストの色を反転させてみよう！

filter: invert( ); は、テキストにも適用することができます。背景色とテキスト色の組み合わせによって、視認性を向上させるために活用できます。

例えば、暗い背景色に明るい色のテキストを配置する場合、filter: invert( ); を使用することで、テキストを反転させて背景に馴染ませることができます。

使用例

.sample p {
  background-color: #333;
  color: #fff;
  filter: invert(100%);
}

上記のように、pタグにクラスを指定し、そのクラスに対して背景色、テキストの色、そして filter: invert(100%); を適用することで、テキストが背景色に馴染んで表示されます。

filter: invert; を使用する際の注意点

filter: invert( ); は便利な反面、いくつか注意点があります。

  1. 色の見え方が異なる場合がある

    filter: invert( ); は、色の反転をRGB値に基づいて行うため、環境によっては意図した色と異なる場合があります。特に、sRGB以外のカラースペースを使用している場合に注意が必要です。

  2. パフォーマンスに影響を与える可能性がある

    filter: invert( ); を使用すると、ブラウザは要素の描画処理に時間がかかる場合があります。特に、アニメーションや複雑な効果と組み合わせて使用する場合には、パフォーマンスへの影響に注意する必要があります。

まとめ｜ filter: invert; で表現の幅を広げよう！

今回は、CSSの filter: invert( ); について解説しました。色の反転は、画像やテキストの見え方を大きく変え、表現の幅を広げる効果があります。

filter: invert( ); の効果と注意点を押さえ、Webサイト制作に役立ててみてください。

関連記事