CSS基礎 練習問題 50:プロパティ:視覚的なフィルター効果
画像などの要素に対して、画像編集ソフトを使わずにCSSのみで「ぼかし(ブラー)」効果をかけたい場合、正しいCSSの書き方はどれか。
- effect: blur(5px); というプロパティを使用して、要素に対して直接ぼかし処理を適用する。
- opacity: blur(5px); というプロパティを使用して、要素に対して直接ぼかし処理を適用する。
- filter: blur(5px); というプロパティを使用して、要素に対して直接ぼかし処理を適用する。
- mask: blur(5px); というプロパティを使用して、要素に対して直接ぼかし処理を適用させる。
- blur: 5px; という独立したプロパティを使用して、要素に対して直接ぼかし処理を適用させる。
正解と解説を見る
正解:filter: blur(5px); というプロパティを使用して、要素に対して直接ぼかし処理を適用する。
画像などの要素に対して、CSSのみでぼかし効果をかけたい場合は、`filter: blur();`を使用するのが正解です。
【正解の理由】
`filter`プロパティは要素に対して視覚的な効果を適用するために使われます。値として`blur(5px)`のように関数を指定することで、指定したピクセル数分だけ要素をぼかすことができます。他にもモノクロにする`grayscale()`などがあります。
【不正解の理由】
• 「`effect: blur(5px);`というプロパティを使用して」という説明は、`effect`というCSSプロパティが存在しないため誤り
• 「`opacity: blur(5px);`というプロパティを使用して」という説明は、`opacity`が透明度を指定するプロパティであり、ぼかし処理には使えないため誤り
• 「`mask: blur(5px);`というプロパティを使用して」という説明は、`mask`が要素の一部を隠すためのプロパティであり、ぼかし処理には使えないため誤り
• 「`blur: 5px;`という独立したプロパティを使用して」という説明は、`blur`自体はプロパティではなく`filter`プロパティの値として使う関数であるため誤り