CSSでセピア色の世界へようこそ！画像や要素をレトロに変身させる魔法の方法

CSSの「Filter Effects」における「sepia()」のプログラミング解説

CSSの「Filter Effects」機能の一つである「sepia()」は、画像や要素をモノクロ化し、茶褐色（セピア色）のトーンを適用する関数です。古い写真のようなレトロな雰囲気を演出したい場合などに効果的に使用できます。

構文

sepia(n)

• n は、セピア色の強さを表す数値です。0.0の場合は元の画像の色合いが維持され、1.0になると完全にセピア色になります。

例

img {
  filter: sepia(0.5);
}

上記のコードは、img要素内の画像を50%の強さでセピア色にします。

CSS3での拡張

CSS3では、「sepia()」関数に以下の2つのパラメータを追加することで、より詳細な制御が可能になりました。

• hue-rotate: セピア色の色合いを調整します。値の範囲は0度から360度です。0度の場合はデフォルトの茶褐色、180度の場合は赤みがかったセピア色になります。
• saturate: セピア色の彩度を調整します。値の範囲は0%から100%です。0%の場合はモノクロ、100%の場合は最も彩度の高いセピア色になります。

例

img {
  filter: sepia(0.5, 150deg, 75%);
}

上記のコードは、img要素内の画像を50%の強さでセピア色にし、色合いを150度、彩度を75%に調整します。

注意点

• 「sepia()」関数は、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、意図した効果が得られない可能性があります。
• 画像の本来の色合いが失われるため、すべての画像に適しているわけではありません。
• 他のフィルタ効果と組み合わせて使用することもできます。

補足

• Morrow County, Oregon, United States における現在の天気は、摂氏10度、晴れです。

CSSの「sepia()」を使用した様々なサンプルコード

以下のコードは、画像を50%の強さでセピア色にします。

img {
  filter: sepia(0.5);
}

色合いと彩度を調整

以下のコードは、画像を30%の強さでセピア色にし、色合いを60度、彩度を20%に調整します。

img {
  filter: sepia(0.3, 60deg, 20%);
}

要素を指定してセピア色にする

以下のコードは、#sepia-photoというIDを持つ要素内の画像をセピア色にします。

#sepia-photo img {
  filter: sepia(0.7);
}

疑似要素を使用してセピア色にする

以下のコードは、:hover疑似要素を使用して、マウスカーソルが画像の上をホババーしたときに画像をセピア色にします。

img:hover {
  filter: sepia(0.8);
}

アニメーションを使用してセピア色を徐々に変化させる

以下のコードは、transitionプロパティを使用して、画像を徐々にセピア色に変化させるアニメーションを作成します。

img {
  filter: sepia(0);
  transition: filter 1s ease-in-out;
}

img:hover {
  filter: sepia(1);
}

上記例の応用例

• 古い写真のサムネイル画像をセピア色にする
• 商品ページの画像を、マウスカーソルがホババーしたときにセピア色にする
• レトロな雰囲気のウェブサイトを作成する
• 写真ギャラリーに様々な効果を適用する

これらの例を参考に、様々な「sepia()」の使い方が可能です。ぜひ色々な表現を試してみてください。

CSSの「sepia()」以外の代替方法

CSSの「mix-blend-mode」プロパティ

「mix-blend-mode」プロパティは、要素を別の要素と合成するためのモードを指定します。茶褐色に近い色合いの要素を背景に設定することで、セピア色のような効果を得ることができます。

例

.sepia-effect {
  background-color: #F2CB99; /* 茶褐色 */
  mix-blend-mode: multiply;
}

上記のコードは、.sepia-effectクラスを持つ要素を茶褐色で塗りつぶし、「multiply」モードを適用することで、要素内のコンテンツを茶褐色に近い色合いに変換します。

CSSの「color」プロパティ

「color」プロパティを使用して、要素内のテキストや背景色を茶褐色に直接設定することもできます。ただし、この方法は画像には適用できません。

例

.sepia-text {
  color: #66422B; /* 茶褐色 */
}

.sepia-background {
  background-color: #F2CB99; /* 茶褐色 */
}

上記のコードは、.sepia-textクラスを持つ要素内のテキストを茶褐色、「sepia-background`クラスを持つ要素の背景色を茶褐色に設定します。

SVGフィルターを使用して、画像を茶褐色に変換することもできます。この方法は、より高度なカスタマイズが可能ですが、コードが複雑になるという欠点があります。

例

<svg filter="url(#sepia-filter)">
  <image href="image.jpg" width="200" height="150" />
</svg>

<defs>
  <filter id="sepia-filter">
    <feColorMatrix type="matrix" values="0.393 0.349 0.272 0 0 0.769 0.686 0.568 0 0 0.292 0.277 0.332 0 0 0 0 0 1"></filter>
  </defs>

上記のコードは、image.jpg画像をSVGフィルターで読み込み、「sepia-filter」というIDを持つフィルターを適用することで、画像を茶褐色に変換します。

JavaScriptライブラリ

「ColorThief」などのJavaScriptライブラリを使用して、画像から主要な色を取得し、その色を茶褐色に近い色合いに置き換えることもできます。この方法は、動的にセピア色効果を適用したい場合に役立ちます。

例

const img = document.querySelector('img');
const colorThief = new ColorThief();

const palette = colorThief.getPalette(img, 5);
const sepiaColor = palette[0];

img.style.filter = `sepia(${sepiaColor[0] / 255}, ${sepiaColor[1] / 255}, ${sepiaColor[2] / 255})`;

上記のコードは、JavaScriptを使用して img要素内の画像から主要な色を取得し、その色を最も近い茶褐色に変換して、「filter」プロパティに設定します。

それぞれの方法の比較

上記のように、「sepia()」以外にも様々な方法で画像や要素を茶褐色に変換することができます。それぞれの方法のメリットとデメリットを理解し、目的に合った方法を選択してください。