ライトボックス風グリッド

このパーツの使いどころと実装ポイント

クリックで拡大する想定のサムネイルを 3 列で並べた、ギャラリー用グリッドです。レイアウトは grid-template-columns:repeat(3,1fr) で 3 等分し、各サムネは aspect-ratio:1 で正方形に固定されます。ホバーすると transform:scale(1.04) でわずかに拡大し、filter:brightness(1.1) で明るくなる軽い反応が付いていて、クリックできることを直感的に伝えます。いまは番号入りのグラデーション枠です。

向いている場面

写真スタジオやカメラマンの作品集、飲食店のメニュー写真、施工事例やイベントレポートの写真一覧など、画像を主役に見せたいページに向きます。正方形でそろうため、縦横比がばらばらの写真でも整然と並びます。

カスタマイズの勘所

• 各 a の背景を実写画像に差し替え、クリックで拡大表示するライトボックスを別途組み合わせます
• 列数を変えたいときは repeat(3,1fr) の数字を変えるだけで調整できます
• 画像は正方形に切り抜かれるので、見せたい部分が中央に来るようトリミングします

このパーツ自体には拡大表示の仕組みは含まれていないため、軽量なライトボックス用ライブラリや dialog 要素での実装を組み合わせます。実装時は各画像に意味のある alt を付け、キーボードでも開閉できるようにするとアクセシビリティが高まります。狭い画面では列数を 2 列に減らすと、1 枚あたりが大きく見やすくなります。