ライトボックス
サムネイルをクリックすると暗いオーバーレイと拡大表示が現れる。背景か × ボタンで閉じる。
プレビュー
操作クリック／タップで動きます。
使いどころ
作品ギャラリーや商品写真のように、一覧のサムネイルから『この1枚をよく見たい』ときに使う。ページ遷移せずその場で完結するので、閲覧の流れを切らずに拡大できるのが利点。逆に、拡大した画像に長い説明文やフォームなど読み込む・操作する要素が乗る場合はモーダルダイアログとして設計し直した方がよい(スクロールや複数の対話要素はライトボックスの想定外)。今回のデモは .lb-stage 内に absolute で収まる『枠内完結』のオーバーレイだが、実ページに組み込むときは position: fixed; inset: 0 に変えて画面全体を覆う必要がある。サムネイルが1〜2枚しかないなら最初から大きく表示すればよく、ライトボックスにする意味は薄い。
仕組み
サムネイルをクリックすると、拡大用の要素(.lb-big)の背景と見出し(.lb-title)を書き換えたうえで overlay.hidden を false にするだけの仕組み。画像を毎回ロードし直すのではなく、あらかじめ用意した1つの拡大枠に内容を差し替える設計なので、DOMの生成・破棄コストが無い。開閉のアニメーションは2つに分かれていて、背景の暗幕は lb-in で単純にフェードイン、中身の画像は lb-scale で cubic-bezier(.34,1.56,.64,1) のオーバーシュートを使い『ポンと飛び出す』質感を出している。閉じる経路は3つ(×ボタン・背景クリック・Escapeキー)あり、背景クリックは e.target === overlay の判定で、画像自体をクリックしたときは反応しないようにしている(伝播で誤って閉じない設計)。
実装の注意
背景クリックで閉じる判定を e.target === overlay ではなく closest() 系で緩く書くと、画像や見出しをクリックしたときも閉じてしまう。逆に .lb-box 側で stopPropagation() に頼る設計にすると、要素を追加したときに閉じ判定漏れが起きやすいので、この実装のように『overlay 自身がクリックされたときだけ閉じる』方が壊れにくい。Escape キーのリスナーは常時 document に貼ってあるが、!overlay.hidden のガードを忘れると、開いていない状態でも他のEscape処理(別のモーダル等)と衝突する。実ページで fixed に変えたときは z-index をヘッダーより高くしないと拡大画像がヘッダーの下に隠れる。開いている間 body のスクロールを止める処理もこのデモには無いので実装時に足す必要がある。
アクセシビリティ
現状のJSは Escape キーでの閉じ方しか用意しておらず、フォーカスをオーバーレイ内に閉じ込める処理が無い。実装するなら .lb-overlay に role="dialog" aria-modal="true" を付け、開いた瞬間に閉じるボタンへフォーカスを移し、Tabキーがオーバーレイの外(背後のサムネイル)に漏れないようフォーカストラップを入れる。閉じたときは拡大を開いたサムネイルへフォーカスを戻すことも必須で、これを忘れると視覚に頼らない操作では『どこに戻ったか分からない』状態になる。サムネイルは div にクリックイベントを付けているだけなので、キーボードでのTab到達・Enterで開く操作ができない。button 要素に変えるか tabindex="0" と keydown ハンドラを足す必要がある。prefers-reduced-motion: reduce では lb-scale のバウンドを消し、フェードのみにするのが望ましい。
調整して使う
開閉アニメーションの質感(バウンドの強さ、フェードのみへの簡略化)、画像の最大サイズ、キャプションの有無が主な調整点。作品数が多いギャラリーでは、拡大表示の中に前へ/次へボタンを足して連続して見せる構成もよく使われる(その場合は現在の閉じるボタンに加え、矢印キーでの送りも実装するとキーボード操作が自然になる)。背景の暗さ(rgba(0,0,0,0.72))は写真のコントラストによって0.6〜0.85程度で調整し、暗すぎると拡大画像自体も沈んで見えにくくなる。サムネイルのホバー時拡大(scale)はタッチ端末では効果が無いので、PC専用の演出と割り切ってよい。拡大画像に隣接するサムネイル一覧を小さく添えると、開いたまま次の作品へ移動できてページ遷移の往復が減る。
コード（コピーして使えます）
<div class="lb-stage">
<p class="lb-label">クリックで拡大</p>
<div class="lb-thumbs">
<div class="lb-thumb" data-label="作品 A" data-bg="linear-gradient(135deg,#2b50c7,#5a7bff)"></div>
<div class="lb-thumb" data-label="作品 B" data-bg="linear-gradient(135deg,#e86c4d,#f5a623)"></div>
<div class="lb-thumb" data-label="作品 C" data-bg="linear-gradient(135deg,#2dc793,#2b50c7)"></div>
</div>
<!-- オーバーレイ（absolute で枠内完結） -->
<div class="lb-overlay" hidden>
<div class="lb-box">
<div class="lb-big"></div>
<p class="lb-title"></p>
</div>
<button class="lb-close" aria-label="閉じる">×</button>
</div>
</div>