画像ギャラリーとは | バイブコーダーのための名称辞典

画像ギャラリーとは

複数の画像をサムネイルの格子状に並べて一覧表示する部品。

概要

複数の画像を同じサイズのサムネイルにそろえ、格子状（グリッド）に並べて一覧表示するパーツです。写真作品の一覧や、商品の複数アングル画像などをまとめて見せたいときに使われます。単体では一覧表示までの役割を担い、クリックしたときに拡大表示する仕組みは別のパーツと組み合わせるのが一般的です。

別名

表記ゆれ：画像ギャラリー、ギャラリー、サムネイル一覧、フォトギャラリー、image gallery

AI への伝え方

「画像ギャラリーを実装して」で通じます。クリックしたときに拡大表示（ライトボックス）まで欲しい場合は「クリックしたらライトボックスで拡大表示して」と別途伝えてください。このパーツ自体は一覧表示のみを担当します。列数はブラウザ幅に応じて自動で変えるか、固定にするかを伝えると仕様がぶれません。

似たパーツとの違い

クリックした画像を拡大表示する「ライトボックス」は、画像ギャラリーと組み合わせて使われることが多い別のパーツです。画像ギャラリー自体は一覧を並べるところまでで、拡大表示の機能は持ちません。レンガ状に高さをそろえずに敷き詰める「メイソンリーレイアウト」とは、マス目をそろえるかどうかで見た目の方向性が異なります。

デモ

コード

HTML

<ul class="image-gallery-demo">
  <li class="image-gallery-demo__item image-gallery-demo__item--1"></li>
  <li class="image-gallery-demo__item image-gallery-demo__item--2"></li>
  <li class="image-gallery-demo__item image-gallery-demo__item--3"></li>
  <li class="image-gallery-demo__item image-gallery-demo__item--4"></li>
  <li class="image-gallery-demo__item image-gallery-demo__item--5"></li>
  <li class="image-gallery-demo__item image-gallery-demo__item--6"></li>
</ul>

CSS

.image-gallery-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 300px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-gallery-demo__item {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  /* 実際の画像の代わりに CSS のグラデーションで代用 */
  background: linear-gradient(135deg, #0017c1, #666666);
}

.image-gallery-demo__item--2 {
  background: linear-gradient(135deg, #666666, #b3b3b3);
}

.image-gallery-demo__item--3 {
  background: linear-gradient(135deg, #333333, #0017c1);
}

.image-gallery-demo__item--4 {
  background: linear-gradient(135deg, #b3b3b3, #0017c1);
}

.image-gallery-demo__item--5 {
  background: linear-gradient(135deg, #0017c1, #333333);
}

.image-gallery-demo__item--6 {
  background: linear-gradient(135deg, #666666, #0017c1);
}