CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS blur関数の使い方を徹底解説！画像にぼかし効果を適用する方法

Webサイトをデザインしていると、特定の画像にぼかし効果を加えたくなることがあります。たとえば、カフェのWebサイトを制作する場合、背景画像をぼかしてその上にテキストを重ね、ユーザーが読みやすいようにしたいことがあるでしょう。

そんなときに役立つのが、CSSのblur（ブラー）関数です。blur関数は、指定した入力画像にぼかし効果を適用するもので、「filter」プロパティと組み合わせることで、画像をぼかすことができます。

この記事では、CSS blur関数の基本と、コード内で画像にぼかし効果を適用する方法を、具体例とともに解説します。読み終える頃には、blur関数を使いこなせるようになっているはずです。

CSSのfilterプロパティとは

CSSのfilterプロパティを使うと、Webページ上の要素にグラフィック効果を適用できます。filterプロパティは、主にページ上の画像や背景にフィルターをかけるために使用されます。

CSSではさまざまな種類のフィルターが提供されています。たとえば、opacityフィルターを使えば要素の表示の度合いを調整でき、drop-shadowフィルターを使えば要素の下に影を追加できます。

フィルターを適用する際の基本的な構文は次のとおりです。

filter: フィルター名(引数);

この記事では、その中でも画像にぼかし効果を追加できるCSS blur関数に焦点を当てて解説していきます。

CSS blur関数の使い方

CSSのblurフィルターは、画像にぼかし効果を加えるためのフィルター関数です。

blurフィルターを使用する構文は以下のとおりです。

filter: blur(radius);

この構文における「radius（半径）」は、適用するぼかし効果の強さを決める値です。指定するradiusの値が大きいほど、画像要素に加わるぼかしは強くなります。「0」を指定した場合は、ぼかしは一切適用されません。

radiusには、em、px、rem、cmなど、任意の長さの単位を指定できます。

それでは、この関数の動きを具体的な例で確認してみましょう。ある地域のカフェのWebサイトをデザインするとします。トップページにはコーヒーのストック写真を表示したいのですが、その画像には半径2pxのぼかし効果をかけたいという要望があるとします。

このような場合、blur関数とfilterプロパティを組み合わせれば簡単に実現できます。実際のコードは次のとおりです。

<html>
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80" height="400" width="600" />
</html>

<style>
img {
	filter: blur(2px);
}
</style>

このコードを実行すると、コーヒーの画像がほんのりとぼやけて表示されます。

HTMLファイルでは、<img>タグを使ってWebページに画像を追加しています。この画像はコーヒーのストック写真へのリンクで、「height」と「width」属性により、高さ400px・幅600pxに設定しています。

CSS側では、filterプロパティとblur関数を使って、ページ上のすべての<img>タグにぼかし効果を適用しています。ここではぼかしの半径を2pxと指定しているため、画像には軽いぼかしがかかります。出力結果を見ると、blur効果によってコーヒーカップの画像がわずかにぼやけているのが分かります。

なお、別の単位でぼかしの半径を指定したい場合は、「2px」の部分を任意の値に置き換えるだけでOKです。たとえば、1.15emのぼかし半径を適用したい場合は、「2px」を「1.15em」に変更します。

まとめ

CSSのblur関数を使えば、Webページ上の画像要素にぼかし効果を簡単に加えられます。この関数はfilterプロパティと組み合わせて使用し、画像にぼかしを適用します。

この記事では、CSSフィルターの基本と、blur関数を使ってWebページ上の画像にぼかし効果を追加する方法を解説しました。これで、プロのように画像にぼかし効果を加えるための知識が身についたはずです。ぜひ実際のコードで試してみてください。

  1. CSSを使って画像の上にボタンを重ねて表示する方法

    CSSで画像の上にボタンを配置する方法 画像の中央にボタンを重ねて表示したい場合、親要素にposition: relativeを指定し、ボタン側にposition: absoluteを指定するのが基本のテクニックです。さらにtransform: translate(-50%, -50%)を組み合わせることで、ボタンを画像のど真ん中に正確に配置できます。 以下は、CSSを使用して画像の上にボタンを追加する具体的なコード例です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport&quo

  2. CSSイメージスプライトの利点とは？HTTPリクエスト削減でサイト表示を高速化する方法

    Webサイトのパフォーマンス改善テクニックのひとつが「CSSイメージスプライト」です。複数の画像を1枚の画像ファイルにまとめることで、ブラウザがサーバーへ送信するHTTPリクエストの数を大幅に減らせます。リクエスト数が減ればサイトの読み込み時間は短縮され、ページの表示速度向上につながります。さらに、画像があらかじめ読み込まれた状態になるため、マウスオーバーなどのイベントで画像を切り替える際も動作がスムーズになり、画像の読み込み遅延によるちらつきを防ぐことができます。イメージスプライトとは？イメージスプライトとは、複数の小さな画像（アイコンなど）を1枚の大きな画像にまとめたものです。CSSのba