CSS フィルター

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 22/43。

フィルターを使うと、楽しいエフェクトを使って画像、背景、さらにはテキストを視覚的に変更することができます。サングラスをかけたり、スポットライトを当てたり、モノクロモードに切り替えたりするようなことが、すべてCSSのたった1行で実現できます。

1. ぼかし (px) – 要素を柔らかく、ピントが合っていないように見せます。

img {
  filter: blur(5px);
}
// わずかにピントが外れた状態

2. 明るさ(%) – 対象がどの程度明るく、または暗く見えるかを制御します。

img {
  filter: brightness(150%);
}
// スポットライトを当てたように明るくします。

3. グレースケール(%) – 色を白黒に変換します。

img {
  filter: grayscale(100%);
}
// クラシックなヴィンテージ風や新聞のようなエフェクト。

4. セピア(%) – レトロな写真のような、温かみのある茶色い色調を加えます。

img {
  filter: sepia(70%);
}
//古いフォトアルバムのような。

他にも試してみることができるフィルターがたくさんあります！自由に探索して、どのようなクリエイティブなエフェクトを作成できるか見てみましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

ギャラリーに4つの画像があります。あなたの課題は、各画像に以下のフィルターを適用することです：

1番目の画像 (Blur): blur(3px) フィルターを適用して、画像を柔らかく、ぼかした状態にします。
2番目の画像 (Brightness): brightness(2.0) を使用して、画像を明るくします。
3番目の画像 (Grayscale): grayscale(100%) を適用して、画像を白黒にします。
4番目の画像 (Sepia): sepia(70%) を使用して、画像に温かみのあるヴィンテージ風のトーンを与えます。

チートシート

CSSフィルターを使用すると、エフェクトを使って画像、背景、テキストを視覚的に変更できます。

ぼかし (px) – 要素を柔らかく、ピントが合っていない状態にします：

img {
  filter: blur(5px);
}

明るさ(%) – 物の明るさや暗さを制御します：

img {
  filter: brightness(150%);
}

グレースケール(%) – 色を白黒に変換します：

img {
  filter: grayscale(100%);
}

セピア(%) – レトロな写真のような、温かみのある茶色っぽい色調を加えます：

img {
  filter: sepia(70%);
}

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。