透過・ぼかしの代替
地図のような騒がしい背景の上のガラス質感パネル。prefers-reduced-transparency: reduce では不透明＋境界線に切り替える。模擬トグルで見比べられる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 地図・写真の上に重ねるガラス質感パネル
- 透過を減らす OS 設定への対応
- 背景に関係なくコントラストを保ちたい情報カード
- 避ける場面
- 不透明版を作らず透過だけで組む
- 透過を減らしたとき影だけ残す
- 長いリストの上に backdrop-filter を置く
- 構成要素
- 騒がしい背景
- ガラスパネル
- CTA ボタン
- 模擬トグル
- 状態の帯
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で「空室を見る」と模擬ボタンへ、Enter／Space で切替。切替結果は帯の文言で確認できる
- 支援技術
prefers-reduced-transparency: reduce で backdrop-filter を外し不透明＋境界線に切り替える。背景の装飾は aria-hidden。模擬は aria-pressed
- 動き
なし
デザインの要点
- 透過とぼかしは背景次第で文字のコントラストが変わる。不透明版を先に作り、透過は上乗せの装飾として足す
- prefers-reduced-transparency: reduce では backdrop-filter を外し、背景を不透明に・境界線を1本足す
- 透過を減らしたときに影だけ残すとパネルが浮いて見えない。境界線か薄い地色で区切りを作り直す
- backdrop-filter はスクロール中の描画が重い。長いリストの上に置くなら、減らす設定に関係なく再考する
コード（コピーして使えます）
<div class="rtp-scene" id="rtp-scene">
<div class="rtp-bg" aria-hidden="true">
<span class="rtp-road rtp-r1"></span><span class="rtp-road rtp-r2"></span><span class="rtp-road rtp-r3"></span>
<span class="rtp-pin rtp-p1"></span><span class="rtp-pin rtp-p2"></span><span class="rtp-pin rtp-p3"></span>
<span class="rtp-word rtp-w1">港区</span><span class="rtp-word rtp-w2">元町</span><span class="rtp-word rtp-w3">海岸通</span>
</div>
<div class="rtp-panel">
<span class="rtp-kicker">今夜の宿</span>
<strong>海辺のホテル ミナト</strong>
<span class="rtp-price">¥12,800 / 泊・朝食つき</span>
<button type="button" class="rtp-cta">空室を見る</button>
</div>
<div class="rtp-ctl">
<button type="button" id="rtp-toggle" aria-pressed="false">透過を減らす（模擬）</button>
</div>
<div class="rtp-band"><span class="rtp-tag">状態</span><span id="rtp-msg">透過あり: backdrop-filter: blur(14px)・白 62%。文字の後ろに道路の線が透ける</span></div>
</div>