はじめに

Webページを制作する上で、画像の視覚的な表現は重要です。 画像にひと手間加えることで、ユーザーの目を惹きつけたり、ページ全体の雰囲気をガラリと変えられます。

CSSのfilterプロパティは、画像に様々な視覚効果を適用できる便利な機能です。 ぼかしやコントラスト調整など、多様な効果がありますが、今回はその中でも「セピア色」を表現できるsepiaについて解説します。

sepiaとは？

sepiaは、filterプロパティで指定できるフィルター効果の一つで、画像をセピア色に変換する効果があります。 セピア色とは、薄い茶褐色の色合いのことで、古い写真や映画のようなレトロな雰囲気を表現する際に用いられます。

sepiaを使用することで、HTMLや画像ファイルを編集することなく、CSSだけで簡単にセピア色の表現を加えることができます。

sepiaの基本的な使い方

sepiaは、filterプロパティの値として指定します。 値はパーセントで指定し、0%は変化なし、100%は完全にセピア色になります。

.sepia-image {
  filter: sepia(50%); /* セピア色を50%適用 */
}

上記のように記述することで、.sepia-imageというクラスが適用された画像は、セピア色が50%適用された状態で表示されます。

sepiaの応用例

sepiaは、単に画像をセピア色にするだけでなく、様々な表現に活用できます。

いくつか例を挙げます。

• レトロな雰囲気のデザイン
  • ヘッダー画像や背景画像にsepiaを適用することで、Webサイト全体にレトロな雰囲気を演出できます。
• 古い写真風の表現
  • ブログ記事内の写真やギャラリーサイトの画像にsepiaを適用することで、まるで古い写真のような表現が可能です。
• マウスホバー時の効果
  • :hoverと組み合わせることで、マウスホバー時にセピア色に変化させるなど、インタラクティブな表現に活用できます。

sepiaは、アイデア次第で様々な表現に活用できる便利なフィルター効果です。

まとめ

今回は、CSSのfilterプロパティの一つであるsepiaについて解説しました。 sepiaを用いることで、画像を簡単にセピア色に変換し、Webサイトにレトロな雰囲気や個性的な表現を加えることができます。

sepiaは、他のフィルター効果と組み合わせることも可能です。 ぜひ色々試して、表現の幅を広げてみてください。

関連記事

• 【CSS】彩度調整はfilter:saturateにお任せ！鮮やかにも地味にも自由自在！

  はじめに Webサイトのデザインにおいて、色使いは非常に重要です。色の使い方一つで、サイト全体の印象は大きく変わります。 画像やイラストの色合い
• 要注意！CSSのfilter:opacityがもたらす思わぬ落とし穴と、その回避策

  はじめに 要素の透明度を調整する際、「opacity」プロパティがよく使われますよね。しかし、CSSには「filter: opacity()」と
• CSSのfilter:grayscaleで表現を豊かに！白黒の世界を自在に操るテクニック

  CSSのfilter:grayscaleで表現を豊かに！白黒の世界を自在に操るテクニック Webサイトを制作する上で、視覚的な訴求力は欠かせな
• 【CSS】filter:brightness()で画像や要素の明るさを自由自在に操る！

  はじめに：CSSのfilter:brightness()とは？ Webサイトを制作する上で、画像や要素の見え方を調整することは非常に重要です。
• CSSフィルターで画像編集！表現力を広げるテクニックを紹介

  CSSのfilterとは？写真編集ソフトのフィルターがサイトで使える！ ウェブサイトを制作する上で、画像や要素のデザインは、ユーザーの視覚に直