CSS フィルター「sepia()」でWebサイトやアプリをもっとおしゃれに！応用例とサンプルコード集

sepia() 関数は、CSS フィルター効果の一つであり、要素をセピア調に変換します。セピア調とは、古い写真のような、茶色みを帯びた温かみのある色合いを指します。この関数は、画像やテキストなど様々な要素に適用でき、レトロな雰囲気やアンティークな印象を与えることができます。

文法

sepia() 関数は、以下の形式で記述されます。

filter: sepia(<度合い>);

<度合い> は、セピア効果の強さを指定する値です。数値またはパーセンテージで表し、0% が元の状態、100% が完全にセピア調になります。0% と 100% の間の値は、効果の強さを段階的に調整します。

例

/* 要素を50% セピア調にする */
filter: sepia(50%);

/* 要素を完全にセピア調にする */
filter: sepia(100%);

/* 要素を25% セピア調にし、さらに明るくする */
filter: sepia(25%) brightness(120%);

注意点

sepia() 関数は、他のフィルター効果と組み合わせて使用することができます。例えば、blur() 関数と組み合わせてぼかし効果を付加したり、contrast() 関数と組み合わせてコントラストを調整したりすることができます。
sepia() 関数は、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、意図した効果が得られない可能性があります。

応用例

テキストに装飾効果を施す
画像に温かみのある雰囲気を加える
レトロな雰囲気のウェブサイトやアプリを作成する
古い写真やアンティークな画像を表現する

上記以外にも、CSS フィルターには様々な効果があります。詳細は以下のリファレンスを参照してください。

基本的な例

この例では、画像を 50% セピア調にします。

img {
  filter: sepia(50%);
}

強度を調整する例

この例では、画像を 25%、75%、100% の順でセピア効果の強度を変えていきます。

img {
  animation: sepia-animation 2s steps(3) infinite;
}

@keyframes sepia-animation {
  0% {
    filter: sepia(25%);
  }
  50% {
    filter: sepia(75%);
  }
  100% {
    filter: sepia(100%);
  }
}

ぼかしと組み合わせる例

この例では、画像を 50% セピア調にし、さらにぼかし効果を付加します。

img {
  filter: sepia(50%) blur(5px);
}

カラーフィルタと組み合わせる例

この例では、画像を 50% セピア調にし、さらに赤みがかったカラーフィルタを適用します。

img {
  filter: sepia(50%) hue-rotate(20deg);
}

明るさとコントラストを調整する例

この例では、画像を 25% セピア調にし、さらに明るくコントラストを高めます。

img {
  filter: sepia(25%) brightness(120%) contrast(150%);
}

テキストにセピア効果を適用する例

この例では、段落内のテキストを 30% セピア調にします。

p {
  filter: sepia(30%);
}

複数のフィルター効果を組み合わせることで、より複雑な効果を作成することができます。
セピア効果の強さは、ブラウザや画像の特性によって異なる場合があります。
上記のコードはあくまで一例です。必要に応じて、値やプロパティを変更してください。

filter プロパティとカスタムマトリックスを使用する

sepia() 関数は、内部的に以下の変換マトリックスを使用してセピア効果を表現します。

[  0.393,  0.349,  0.272,  0 ]
[  0.769,  0.769,  0.082,  0 ]
[  0.189,  0.189,  0.936,  0 ]
[  0,      0,      0,      1 ]

このマトリックスを filter プロパティと組み合わせて、独自のカスタムセピア効果を作成することができます。利点は、sepia() 関数よりも柔軟性に優れ、色合いをより細かく制御できることです。

例：

filter: matrix(
  0.393, 0.349, 0.272, 0,
  0.769, 0.769, 0.082, 0,
  0.189, 0.189, 0.936, 0,
  0, 0, 0, 1
);

欠点としては、ブラウザによっては対応していない場合がある点と、sepia() 関数よりも記述量が多くなる点です。

hue-rotate() と grayscale() を組み合わせて使用する

hue-rotate() 関数は色相を回転させ、grayscale() 関数はグレースケールに変換することができます。これらの関数を組み合わせることで、疑似的なセピア効果を表現できます。

filter: hue-rotate(30deg) grayscale(50%);

この方法は、比較的シンプルな記述でセピア効果を表現できます。ただし、sepia() 関数よりも表現範囲が狭く、微妙な色合いの調整が難しいという欠点があります。

SVG フィルターを使用する

SVG フィルターを使用すると、より高度なセピア効果や他のエフェクトを作成することができます。利点は、非常に柔軟性に優れている点と、様々な効果を組み合わせることができる点です。

<svg width="200" height="200">
  <filter id="sepia">
    <feColorMatrix type="matrix" values="
      0.393 0.349 0.272 0 0
      0.769 0.769 0.082 0 0
      0.189 0.189 0.936 0 0
      0 0 0 1 0
    "/>
  </filter>
  <image filter="url(#sepia)" x="0" y="0" width="200" height="200" href="image.png"/>
</svg>

欠点としては、SVG フィルターの知識が必要となる点と、比較的複雑な記述になる点です。

ライブラリを使用する

PostCSS や Sass などのCSSプリプロセッサライブラリには、sepia() 関数の代替となる関数やミックスインが用意されている場合があります。これらのライブラリを使用すると、より簡単にセピア効果を表現することができます。

PostCSS

@import "path/to/sepia-function";

img {
  filter: sepia(50%);
}

Sass

@import "path/to/sepia-mixin";

.sepia {
  @include sepia(50%);
}

ライブラリによって機能や使い方が異なるため、事前にドキュメントを確認する必要があります。

最適な代替方法の選択

上記の代替方法はそれぞれ長所と短所があるため、状況に応じて最適な方法を選択する必要があります。

開発効率を重視する場合は、ライブラ
より高度なエフェクトやSVGとの連携が必要な場合は、SVG フィルターを使用する方法が適しています。
シンプルで記述量が少ない方法を求める場合は、hue-rotate() と grayscale() を組み合わせて使用するする方法が適しています。
高度な制御と柔軟性を求める場合は、filter プロパティとカスタムマトリックスを使用する方法が適しています。

CSS フィルター「sepia()」でWebサイトやアプリをもっとおしゃれに！ 応用例とサンプルコード集

基本的な例

filter プロパティとカスタムマトリックスを使用する

CSS フィルター「sepia()」でWebサイトやアプリをもっとおしゃれに！応用例とサンプルコード集