# 画像ギャラリー（メイン＋タイル）のCSS実装

> 1枚目を大きく見せるタイル型フォトギャラリー。grid-column/grid-rowのspan指定だけで、雑誌のような変則グリッドが作れます。

- カテゴリ: レイアウトパターン
- URL: https://www.css-dictionary.com/recipes/image-gallery/

## HTML

```html
<ul class="gallery">
  <li class="featured" role="img" aria-label="メインの写真: 海辺の夕景"></li>
  <li role="img" aria-label="写真: 松林"></li>
  <li role="img" aria-label="写真: 器"></li>
  <li role="img" aria-label="写真: 街並み"></li>
  <li role="img" aria-label="写真: 夜空"></li>
</ul>
```

## CSS

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 78px; /* 行の高さの基準単位 */
  gap: 8px;
  width: 320px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery li {
  border-radius: 8px;
  overflow: hidden;
}

/* 1枚目だけ2列×2行ぶん占有 */
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* デモ用の疑似写真（実際はimg + object-fit: cover） */
.gallery li:nth-child(1) { background: linear-gradient(160deg, #d9a441, #b0413e); }
.gallery li:nth-child(2) { background: linear-gradient(140deg, #a8b8a0, #4a7c59); }
.gallery li:nth-child(3) { background: linear-gradient(140deg, #d9c79a, #8a6d3b); }
.gallery li:nth-child(4) { background: linear-gradient(140deg, #cbbfa5, #5c5445); }
.gallery li:nth-child(5) { background: linear-gradient(140deg, #274a78, #1a1712); }
```

## 仕組みの解説

3列グリッドに grid-auto-rows で行の高さの「基準単位」を決めておき、目立たせたい1枚に grid-column: span 2 と grid-row: span 2 を指定するだけで、2×2マスを占有するメイン写真になります。残りの写真は自動配置に任せるため、枚数が増減してもHTMLを並べるだけで整います。実画像では各セルの img に width/height 100% と object-fit: cover を指定します。

## 実装のポイント

写真が主役のギャラリーでは、装飾的な画像はalt=""（またはaria-hidden）、意味のある画像は内容が伝わるaltを書き分けてください。ホバー拡大はアニメ集「ホバーで画像ズーム」と組み合わせられます。

## AIに依頼するときの文例

1枚目を大きく見せるタイル型画像ギャラリーを作ってください。3列グリッド＋grid-auto-rowsを基準に、メイン画像はgrid-column: span 2とgrid-row: span 2で2×2マスを占有させ、実画像はobject-fit: coverで収めてください。

## 使っているプロパティ

- [display-grid](https://www.css-dictionary.com/property/display-grid.md)
- [grid-column](https://www.css-dictionary.com/property/grid-column.md)
- [grid-row](https://www.css-dictionary.com/property/grid-row.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)