【filterとの違いは?】CSSのbackdrop-filterとは? 使い方・対応ブラウザも分かりやすく解説!

backdrop-filterについて知りたい人

backdrop-filterについて知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

backdrop-filterとは?
backdrop-filterの使い方
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

CSSのbackdrop-filterを利用すると色々な効果をつけることができます。

backdrop-filterは外側の要素のみに効果を適用することができます。

例えば、曇りガラスなどの背景効果を出すことができます。

そこでこの記事ではbackdrop-filterについて解説していきます。

お洒落なデザインを作りたいという方は是非理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

backdrop-filterの評価

頻出度

(1.0)

重要度

(1.0)

総合評価

(1.0)

1.backdrop-filterとは?

backdrop-filterプロパティは要素の背後の領域に適用するぼかしや色変化などのグラフィック効果を指定します。

今までは非常に長いCSSを指定する必要がありましたが、たった一行で簡単に実装できます!

iOSのような通知スタイルを作りたいという方はどのようなものか理解しておくことをオススメします。

しかし、対応していないブラウザもあるので使用する場合、サポートブラウザをしっかりとチェックしておきましょう。

値の指定方法は以下の通りです。

{ backdrop-filter: 値; }

値の指定方法

基本的に値の指定方法はfilterプロパティと同じです。

none
blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url()

backdrop-filterとfilterの違い

backdrop-filterとfilterはどのような違いがあるのという思っている方も多いです。

filterは指定した要素にぼかしやセピアなどの効果を付け加えることができます。

backdrop-filterは要素の背後の領域に同じような効果を加えることができます。

この2つのプロパティは良く似ていますが、filterと違ってbackdrop-filterは、多くのブラウザが未対応です。

対応ブラウザ

主要ブラウザの「Google Chrome」、「Safari」、「Edge」では対応済みですが、「IE」と「Firefox」では未対応です。

「Firefox」はブラウザ設定を変えることでbackdrop-filterを有効にすることができます

2.backdrop-filterの使い方

それではbackdrop-filterの使い方をみていきましょう。

.box01 {
 background-color: rgba(31, 20, 11, 0.5);
 backdrop-filter: blur(10px);
}

上記のように、ぼかすための値であるblur()を使えば、かっこいい見た目のボックスを実装できます。

backdrop-filterは、写真に様々なエフェクトをつけることができます。

filterプロパティと似ていますが、backdrop-filterは内側のテキストやその他の要素を変更することなく、背景の要素だけにエフェクトのぼかしなどを適用することができます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!

「HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

リンク

3.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント