CSSフィルターの力：一枚の写真から始まるデザインの旅

こんにちは、フローです。

今回は、１枚の画像を使用して、色々なフィルターの使い方を書いていきたいと思います。

使用する画像は、

https://o-dan.net/ja/

こちらのサイトの、画像を使用しています。

写真：Jeremy Bishop on Unsplash

素敵な写真ですね！

1 まずはHTML
2 まとめ

まずはHTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Effect with CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <img src="https://drive.google.com/uc?export=view&id=12rPdHgVyAIoE0Ysn9A9q9YH9ARwQGk5H" alt="Unsplash Image">
</body>
</html>

このHTMLでは、

画像のURLをimgタグのsrc属性に設定しています。

alt属性は、画像が読み込まれない場合やスクリーンリーダー用に画像の説明を提供します。

また、CSSを適用するためには、HTMLファイルからCSSファイルをリンクする必要があります。

そのため、headタグ内にlinkタグを追加し、

CSSファイル（この例では”styles.css”と名付けました）へのパスをhref属性に設定しています。

これでHTMLが準備できました。

次に、CSSファイルを作成し、エフェクトを適用してみましょう。

グレースケールエフェクト（モノクロ）

CSSフィルターを使うと、画像を簡単にグレースケール（白黒）に変換することができます。

img {
  filter: grayscale(100%);
}

セピアエフェクト

セピアエフェクトは、画像に古い写真のような雰囲気をもたらします。

これはCSSフィルターのセピア関数を使用して達成できます。

img {
  filter: sepia(100%);
}

ブラー効果

CSSフィルターのブラー関数を使用して、

画像をぼかすことができます。

この効果は、バックグラウンドイメージに焦点を当てるのに便利です。

img {
  filter: blur(5px);
}

明度の変更

画像の明度を変更するには、CSSフィルターのbrightness関数を使用します。

img {
  filter: brightness(50%);
}

コントラストの強調

コントラストを調整するには、CSSフィルターのcontrast関数を使用します。

img {
  filter: contrast(200%);
}

これらのエフェクトは組み合わせることもできます。

例えば、画像をグレースケールに変換し、

その上でブラー効果を追加することができます。

img {
  filter: grayscale(100%) blur(5px);
}

まとめ

以上がCSSを使って画像にエフェクトを加える基本的な方法です。

もちろん、これらは基本的なエフェクトのみで、

CSSは非常に強力なツールであり、

これ以上のことも可能です。

自分の好きなエフェクトを探し、

それを使って画像をカスタマイズすることを楽しんでください！

レッツチャレンジ！

カテゴリー