現場で差がつくCSS：`::backdrop` でモーダル体験を一段階引き上げる
フロントエンド開発において、「モーダル」や「フルスクリーン」の実装は、もはや避けては通れない道だ。かつては、`z-index`の地獄と戦いながら、`div`で背景を覆い、スクロールを固定し……といった泥臭いハックを繰り返してきた。
しかし、ブラウザがネイティブで`dialog`要素をサポートした今、我々はもっとスマートに、そして堅牢に背景を制御できるようになった。その鍵を握るのが、今回深掘りする`::backdrop`擬似要素だ。
中級レベルのエンジニアであれば、ただ「背景を暗くする」以上の、ブラウザの挙動を理解した深い制御ができるようにならなければならない。
—
::backdrop とは何者か？
`::backdrop`は、`dialog`要素が`showModal()`メソッドで開かれた際、あるいは要素がフルスクリーンモードになった際に、その「背後」に自動的に挿入されるレイヤーだ。
ここで重要なのは、「これはDOMツリーの一部ではない」という点だ。開発者ツールで見ても、`#shadow-root`の中や通常のDOM構造の中に現れるわけではない。ブラウザのレンダリングエンジンが、必要に応じて「そこに背景があるかのように」描画しているレイヤーだ。だからこそ、通常のCSSのボックスモデルとは少し違う挙動を示すこともある。
ブラウザが裏側でやっていること
`::backdrop`の特筆すべき点は、その「スタッキングコンテキストの独立性」にある。
通常、モーダルの背景を実装する際、我々は`z-index`の管理に頭を悩ませる。しかし、`::backdrop`は`dialog`要素（`showModal()`で開かれたもの）とセットで動作するため、親要素のスタッキングコンテキストの影響をあまり受けず、常に「その要素のすぐ後ろ」という特等席を確保してくれる。
「なんとなく暗くする」だけならブラウザのデフォルトで十分だが、プロダクトのUIデザインに完璧に合わせるには、このレイヤーをCSSで叩く必要がある。
—
実践：プロダクトで使える洗練された `::backdrop` コード
よくある「ただ暗くする」だけでなく、背景をぼかしたり、アニメーションを加えたりする実装を紹介しよう。
/ モーダルが開かれた瞬間に背景を制御する /
dialog::backdrop {
/ 背景色を半透明の黒に設定 /
background-color: rgba(0, 0, 0, 0.6);
/ 現代的なUIにするための背景ぼかし（パフォーマンスに注意！） /
backdrop-filter: blur(4px);
/ 遷移アニメーションを付与する際は注意が必要 /
/ backdropはdialogの開閉に連動するため、CSSアニメーションを当てるなら
dialog自体の状態変化と合わせる必要がある /
transition: backdrop-filter 0.3s ease;
}
/ ちなみに、dialog要素自体もスタイルを整えるのがプロの流儀 /
dialog {
border: none;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
padding: 2rem;
/ 開閉時のアニメーションもCSSで完結させる /
&[open] {
animation: fade-in 0.3s ease-out;
}
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
—
現場で直面する「落とし穴」への対処法
ここで、シニアとして現場の知見をいくつか共有しておく。
1. イベント伝播の罠
`::backdrop`をクリックしたときにモーダルを閉じたい、という要件は非常によくある。このとき、単に`dialog`にクリックイベントを貼るだけでは不十分だ。
dialog.addEventListener(‘click’, (e) => {
const dialogDimensions = dialog.getBoundingClientRect();
// クリック位置がdialogの領域外（つまりbackdrop上）か判定する
if (
e.clientX < dialogDimensions.left ||
e.clientX > dialogDimensions.right ||
e.clientY < dialogDimensions.top ||
e.clientY > dialogDimensions.bottom
) {
dialog.close();
}
});
このロジックは鉄板だ。覚えておいて損はない。
2. transitionの壁
`::backdrop`自体には`transition`をかけにくいという仕様上の制約がある。背景のフェードインをスムーズにしたい場合は、`dialog`要素側でアニメーションを制御し、`::backdrop`は`background-color`の変更を追従させるのが、今のところ最も安定した解法だ。
最後に
`::backdrop`は、単なる背景色の指定場所ではない。ユーザーの視線をモーダルに集中させ、没入感を生み出すための「舞台装置」だ。
「とりあえず動けばいい」から一歩進んで、こうしたネイティブ機能を使いこなせるようになると、余計なライブラリに依存せず、軽量で爆速なUIを構築できるようになる。技術の泥臭い部分を理解し、それをエレガントに扱うことこそが、一流のエンジニアへの近道だ。
さあ、次のスプリントでは、この`::backdrop`を使って、チームメイトを唸らせるようなモーダル体験を作ってみてほしい。期待している。
コメント