6/20CSS2021年6月20日backdrop-filterは要素の背後にぼかしや色変化などのグラフィック効果を適用することができるCSSプロパティです。ブラウザ対応状況は、以下のようになっています。Edgeでは対応済みなのですが、IEとFirefoxでは対応されていませんね。Firefoxではブラウザ設定を変えることでbackdrop-filterを有効にすることができますので、その方法を紹介していきます。目次Firefoxでbackdrop-filterを有効にする手順backdrop-filterを有効にする方法は、以下の通りです。use...この手順を簡単に訳すと、about:configを開くlayout.css.backdrop-filter.enabledをtrueにするgfx.webrender.allをtrueにするということになります!それでは、実際の手順を見ていきましょう。Firefoxでabout:configを開くSTEPFirefoxを開くまずはFirefoxを開いてください。STEP検索窓に[about:config]を記入[about:config]という文字を入力し、エンターを押します。STEP[危険性を承知の上で使用する]をクリック警告が表示されるので、[危険性を承知の上で使用する]をクリックします。これでabout:configを開くことができました!このようなページが表示されていればOKです。layout.css.backdrop-filter.enabledをtrueにするSTEP[backdrop-filter]を検索する[設定名を検索]の検索バーに、[backdrop-filter]を記入して検索します。すると、layout.css.backdrop-filter.enabledの設定が出てきます。デフォルトではfalseになっていますね。STEP切り替えボタンをクリックしtrueにする画面の右端にある、矢印が2つ重なっているボタンをクリックします。gfx.webrender.allをtrueにするSTEP[gfx.webrender.all]を検索する手順2と同じ方法で、[gfx.webrender.all]と入力し検索します。こちらもデフォルトではfalseになっているはずです。STEP切り替えボタンをクリックしtrueにする画面右端の切り替えボタンをクリックします。これでgfx.webrender.allをtrueにすることができました。以上の手順で、Firefoxでもbackdrop-filterの効果を適用することができます!【まとめ】Firefoxのブラウザ設定でbackdrop-filterを有効にする方法Firefoxのブラウザ設定で、backdrop-filterを有効にする方法を紹介しました。Firefoxのブラウザでabout:configを開くlayout.css.backdrop-filter.enabledをtrueにするgfx.webrender.allをtrueにする上記の手順を実行することで、簡単に設定することができましたね。この方法の問題点は、上記の設定をしていないユーザーの画面ではbackdrop-filterが適用されないということです。はやくデフォルトでサポートされるようになればいいのですが、しばらくは機能クエリ@supportsなどを使用してフォールバックを用意する必要がありそうですね。いう経験がある人も多いのではないでしょうか。IEや古いバージョンのブラウザでは、新しめのCSSプロパティがサポートされていないという...記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。