この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
filter プロパティとは
filter プロパティは、要素の見た目に Photoshop のような画像効果を適用するための CSS機能です。画像だけでなく、テキストや <div> など、どんな要素にも使えます。
複数のフィルターを重ねがけする
blur や sepia などのフィルター関数は、半角スペースで区切ることで複数同時に適用できます。
.image-filtered {
/* ぼかし → 明るさUP → コントラストUP の順で効果を適用 */
filter: blur(2px) brightness(1.2) contrast(150%);
}
よく使われるフィルター関数
blur と sepia 以外にも、様々な便利なフィルターがあります。
| 関数 | 説明 | 値の例 |
|---|---|---|
grayscale() |
要素をグレースケールにする |
grayscale(100%) （完全な白黒） |
brightness() |
明るさを調整する |
brightness(150%) (1.5倍明るい)、brightness(0.5) (半分暗い) |
contrast() |
コントラスト（明暗比）を調整する |
contrast(200%) (コントラスト2倍)、contrast(0.8) (コントラスト低い) |
saturate() |
彩度（色の鮮やかさ）を調整する |
saturate(2) (彩度2倍)、saturate(50%) (彩度半分) |
hue-rotate() |
色相を回転させる |
hue-rotate(90deg) (色相環で90度ずらす) |
invert() |
色を反転させる（ネガポジ反転） |
invert(100%) (完全に反転) |
drop-shadow() |
要素の形に沿った影を落とす | drop-shadow(2px 4px 6px black) |
drop-shadow() と box-shadow() の違い
drop-shadow() は、box-shadow() と似ていますが、重要な違いがあります。
-
box-shadow()：要素の四角いボックスに対して影をつける -
drop-shadow()：要素の中身（テキストや透過PNGの形）に沿って影をつける
透過された画像の輪郭に沿って影をつけたい場合など、drop-shadow() を使うとより自然な表現が可能です。
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0039</title>
<style>
div {
margin-bottom: 100px;
}
</style>
</head>
<body>
<main>
<h1>filter プロパティ</h1>
<div style="width: 400px; height: 200px;">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%234CAF50'/%3E%3Ccircle cx='150' cy='150' r='100' fill='%23FFC107'/%3E%3Ctext x='150' y='165' font-size='48' text-anchor='middle' fill='white' font-family='Arial'%3E300x300%3C/text%3E%3C/svg%3E" alt="正方形の画像（300x300px）" style="width: 100%; height: 100%; object-fit: contain; filter: blur(5px);">
</div>
<div style="width: 400px; height: 200px;">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Crect width='300' height='300' fill='%234CAF50'/%3E%3Ccircle cx='150' cy='150' r='100' fill='%23FFC107'/%3E%3Ctext x='150' y='165' font-size='48' text-anchor='middle' fill='white' font-family='Arial'%3E300x300%3C/text%3E%3C/svg%3E" alt="正方形の画像（300x300px）" style="width: 100%; height: 100%; object-fit: contain; filter: sepia(100%);">
</div>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>