0Pricing
CSS Academy · レッスン

すりガラス効果のためのbackdrop-filter

backdrop-filterを使い、別のコンテンツ上に重ねた要素にすりガラス状のぼかし効果を作成します。

「すりガラス効果のためのbackdrop-filter」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

backdrop-filterとは

backdrop-filterは、要素自体ではなく、要素の背後にある領域にグラフィック効果を適用します。フィルターが適用された背後の内容を見せるには、要素にある程度の透明性（アルファ値が1未満の背景、または背景なし）が必要です。

すりガラス効果

典型的なすりガラスのパターンです。

<div class="bg-wrapper">
  <div class="glass-card">Frosted Glass Card</div>
</div>

-webkit-backdrop-filterプレフィックス

Safariでは-webkit-backdrop-filterプレフィックスが必要です。クロスブラウザー対応のため、標準プロパティと必ず併記してください。

使用できるフィルター関数

backdrop-filterはfilterと同じ関数をサポートします：blur()、brightness()、contrast()、grayscale()、saturate()、hue-rotate()、sepia()、drop-shadow()。

<div class="bg-wrapper">
  <div class="modal-overlay"></div>
</div>

暗いすりガラス

オーバーレイやモーダルに適した暗いバリエーションです。

<div class="bg-wrapper">
  <div class="dark-glass">Dark Frosted Panel</div>
</div>

スタッキングコンテキストの要件

backdrop-filterはスタッキングコンテキストを作成します。要素は背後の内容の上にコンポジットされなければなりません。つまり、スタッキング順序で他のコンテンツより上にある必要があります（必ずしもz-indexではなく、ペイント順序によって決まります）。

backdrop-filterのパフォーマンス

負荷の高いbackdrop-filter: blur()はコストが高く、ブラウザーは背景を別のパスで描画する必要があります。モバイルでのパフォーマンスを考慮し、ぼかしの値は20px以下にしてください。頻繁に再ペイントされるコンテンツへの適用は避けてください。

すりガラスオーバーレイ付きモーダル

すりガラスのオーバーレイを備えたモーダルダイアログです。

<div class="modal-backdrop">
  <div class="modal">Modal Content</div>
</div>

すりガラスを使った固定ナビゲーション

すりガラスの固定ナビゲーションバーです。

<div class="bg-wrapper">
  <nav class="navbar">Sticky Nav</nav>
</div>

ブラウザー対応

backdrop-filterはChrome 76以降、Firefox 103以降、Safari 9以降（webkit）でサポートされています。必ず-webkit-プレフィックスを含めてください。最新のデータはcaniuse.comで確認し、未対応ブラウザー向けに不透明なフォールバックを用意してください。

不透明なフォールバック

backdrop-filterをサポートしていないブラウザー向けに、不透明な背景をフォールバックとして用意します。

<div class="bg-wrapper">
  <div class="glass">Fallback-aware glass panel</div>
</div>

確認問題

backdrop-filterを表示するには、要素に何が必要ですか。

まとめ

backdrop-filterは要素の背後にあるものにフィルター効果を適用します。効果を表示するには、要素に透明性が必要です。典型的なすりガラス効果にはblur()とsaturate()を組み合わせます。Safari用に必ず-webkit-backdrop-filterも指定してください。@supportsを使用して不透明なフォールバックを用意します。

よくある質問

「すりガラス効果のためのbackdrop-filter」レッスンは無料ですか？

はい。「すりガラス効果のためのbackdrop-filter」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「すりガラス効果のためのbackdrop-filter」で何を学びますか？

backdrop-filterを使い、別のコンテンツ上に重ねた要素にすりガラス状のぼかし効果を作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「すりガラス効果のためのbackdrop-filter」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. filter：blur、brightness、contrast、grayscale
  2. すりガラス効果のためのbackdrop-filter
  3. レイヤー合成のためのmix-blend-mode
  4. isolationプロパティ
← CSS Academyに戻る