問題
18ぼかしを実装しよう
CSSのぼかしは、画像や背景、テキストに視覚効果を加えるためによく使われるデザイン手法です。Webサイトでは、背景画像をぼかして文字を読みやすくしたり、特定の要素を目立たせたりする場面で活用されています。この問題では、CSSのfilterプロパティを使って画像にぼかし効果を適用する方法を学びましょう。
CSSぼかしとは
CSSぼかしが使われる場面
CSSぼかしは、背景画像を見やすくしたり、特定の要素を目立たせたりするためによく利用されるデザイン手法です。Webサイトでは、ヒーローエリアの背景やモーダルウィンドウ、カードデザインなどさまざまな場面で活用されています。視認性を高めながらデザイン性も向上できるため、実務でもよく使われています。
filterプロパティとは
CSSでぼかしを実装する際は、filterプロパティを使用します。filterプロパティは、ぼかしだけでなく明るさやコントラストの調整など、さまざまな視覚効果を適用できる機能です。画像や背景にエフェクトを加えたい場面で活用されるため、CSSぼかしを学ぶ際にあわせて理解しておきたい重要なプロパティです。
【初級】CSSで画像をぼかしてみよう
問題
「ぼかしを実装しよう」
CSSを使用して画像にぼかし効果を適用してみましょう。Webサイトでは、背景画像や写真にぼかしを加えることで、文字を読みやすくしたりデザイン性を高めたりできます。期待する画面を確認しながら実装してみてください。
あらかじめエディタに書くコード
<div class="logo" style="width: 300px;">
<img src="https://ninjacode.work/assets/img/qa/logo.jpg">
</div>
¥HTML¥
期待する画面
解答と解説（ぼかしを実装しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
CSSで画像やテキスト、背景などの要素にぼかし効果を適用する場合は、filterプロパティを使用します。今回の問題では、画像にぼかし効果を追加するためにfilterプロパティを指定しています。
ぼかしの強さは数値によって調整でき、値が大きくなるほど要素がよりぼやけて表示されます。小さな値であれば軽いぼかし、大きな値であれば画像や文字が判別しにくくなるほど強いぼかしになります。
CSSのぼかしは、背景画像の上に文字を表示する場合や、特定の要素を目立たなくしたい場合によく利用されます。画像編集ソフトを使わなくてもCSSだけで簡単に実装できるため、Web制作の現場でもよく使われる表現です。
初心者がつまずきやすいポイントとして、ぼかし効果は指定した要素全体に適用されることが挙げられます。背景だけをぼかしたい場合は、別の要素や擬似要素を利用して実装するケースもあります。CSSぼかしの仕組みを理解しておくと、画像加工や背景演出にも応用しやすくなります。
補足
filterプロパティは、ぼかし効果以外にもさまざまな視覚効果を適用できる便利なCSS機能です。
代表的なfilterプロパティの効果には以下があります。
・brightness()：明るさを調整する
・contrast()：コントラストを調整する
・drop-shadow()：影を追加する
・grayscale()：白黒画像に変換する
・opacity()：透明度を変更する
CSSだけで画像加工に近い表現ができるため、WebデザインやUI制作で幅広く活用されています。
・画像エフェクト関連：hoverしたら画像を大きくしよう
・画像加工関連：画像をトリミングしてみよう
・問題集一覧：HTML/CSS問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
CSSぼかしのポイント
blur()関数の使い方
CSSでぼかし効果を適用する際は、filterプロパティのblur()関数を使用します。blur()にはpx単位の数値を指定でき、値が大きいほどぼかしが強くなります。例えば小さい値では軽いぼかし、大きい値では画像や文字が判別しにくくなるほど強いぼかしになります。背景画像や写真に適用する際は、デザインや読みやすさに合わせて適切な値を設定することが重要です。
CSSぼかしを活用する方法
CSSぼかしは、背景画像の上に文字を配置するデザインや、視線を誘導したいコンテンツの演出などでよく利用されています。また、モーダルウィンドウの背景をぼかしたり、カードデザインに奥行きを持たせたりする場面でも活用されています。CSSだけで手軽に実装できるため、Web制作において覚えておきたい表現方法のひとつです。独学でCSSの実装に悩んだ場合は、実務経験者へ相談しながら学習を進めるのもおすすめです。
