画像ライトボックス（クリック拡大）

解説

画像ライトボックスは、サムネイルをクリックすると画面全体を暗い半透明のオーバーレイで覆い、その上に拡大画像を中央表示する定番のギャラリー UI です。オーバーレイ .lb は position:fixed と inset:0 で全画面を覆い、backdrop-filter:blur で背景をぼかすため、拡大画像へ視線が集まります。開閉は is-open クラスの付け外しだけで制御し、JS は最小限です。

閉じる操作の作り込み

• オーバーレイの外側（画像以外）をクリックすると閉じる
• 右上の × ボタンで閉じる
• keydown を監視し Escape キーで閉じる

このデモは確認用にグラデーションの背景色を拡大表示していますが、実案件では data-src に実画像の URL を入れ、background-image や img 差し替えに置き換えます。ポートフォリオや商品ギャラリーで写真を大きく見せたい場面に向きます。複数の閉じ方を用意してあるのでキーボード利用者にも優しく、開いている間は背面のスクロールを overflow:hidden で止めると、より破綻のない体験になります。