AIで画像クリックで拡大表示するライトボックスを作る【CSS＋JS生成】

画像をクリックすると画面全体に拡大表示される「ライトボックス」。プラグインに頼らなくても、AIを使えばシンプルな実装が作れます。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下の画像ギャラリーHTMLに、
・画像をクリックすると画面全体に拡大表示されるライトボックス
・背景（暗いオーバーレイ）をクリックすると閉じる
・ESCキーでも閉じる
・フェードアニメーションで表示
のCSS・JavaScriptを追加してください。

<div class="gallery">
  <img src="photo1.jpg" alt="写真1" class="gallery-img">
  <img src="photo2.jpg" alt="写真2" class="gallery-img">
  <img src="photo3.jpg" alt="写真3" class="gallery-img">
</div>

生成されたCSS例

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.gallery-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  cursor: zoom-in;
  border-radius: 6px;
  transition: opacity 0.2s;
}
.gallery-img:hover { opacity: 0.85; }

#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#lightbox.open {
  display: flex;
  animation: fadeIn 0.25s ease;
}
#lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

生成されたJS例

// ライトボックス要素を動的に作成
const lb = document.createElement('div');
lb.id = 'lightbox';
lb.innerHTML = '<img id="lb-img" alt="">';
document.body.appendChild(lb);

const lbImg = document.getElementById('lb-img');

document.querySelectorAll('.gallery-img').forEach(img => {
  img.addEventListener('click', () => {
    lbImg.src = img.src;
    lbImg.alt = img.alt;
    lb.classList.add('open');
  });
});

lb.addEventListener('click', e => {
  if (e.target !== lbImg) lb.classList.remove('open');
});
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') lb.classList.remove('open');
});

方法②：HTMLとセットで生成する

AIへのプロンプト例

画像クリックで拡大表示されるライトボックス付きギャラリーを
HTML・CSS・JavaScriptでゼロから作ってください。
・グリッドレイアウトのサムネイル一覧
・クリックで拡大、左右矢印で前後切り替え
・キャプション表示付き

ポイント

• 前後の画像を矢印で切り替えたい場合は「前後ナビゲーションも追加して」と依頼できます
• スワイプでの切り替えが必要な場合は「タッチスワイプにも対応して」と追記しましょう