# コンテナクエリで変形するカードのCSS実装

> 置かれた場所の幅に応じて縦型⇄横型に切り替わるカード。ビューポートではなく親要素を基準にする@containerの実践例です。

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

## HTML

```html
<p class="hint">プレビュー枠の右下をドラッグして幅を変えると、カードが縦型⇄横型に切り替わります。</p>

<div class="card-slot">
  <article class="cq-card">
    <div class="cq-media" aria-hidden="true"></div>
    <div class="cq-body">
      <h3>コンテナクエリ対応カード</h3>
      <p>ビューポートではなく「親の幅」を見て形を変えます。サイドバーに置いても本文に置いても崩れません。</p>
    </div>
  </article>
</div>
```

## CSS

```css
.hint {
  font-size: 12px;
  color: #8a7d63;
}

.card-slot {
  container-type: inline-size; /* この要素を問い合わせの基準にする */
}

.cq-card {
  display: grid;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 10px;
  overflow: hidden;
}

.cq-media {
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, #a8b8a0, #4a7c59);
}

.cq-body {
  padding: 14px 16px;
}

.cq-body h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.cq-body p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: #5c5445;
}

/* 置き場所の幅が420pxを超えたら横型に */
@container (min-width: 420px) {
  .cq-card {
    grid-template-columns: 180px 1fr;
  }
  .cq-media {
    aspect-ratio: auto; /* 高さは本文に合わせて伸びる */
    height: 100%;
  }
}
```

## 仕組みの解説

親要素に container-type: inline-size を指定すると、その要素が「問い合わせコンテナ」になり、子は @container で親の幅に応じたスタイルを書けます。メディアクエリとの違いは基準です: 同じカードをサイドバー（狭い）と本文（広い）に置いたとき、ビューポート基準では区別できませんが、コンテナ基準ならそれぞれの置き場所に最適な形になります。再利用部品と相性のよい、コンポーネント時代のレスポンシブ手法です。

## 実装のポイント

container-typeを指定した要素は幅の計算が「包含を作る」挙動に変わるため、レイアウトの外枠ではなくカードの直親スロットに指定するのが安全です。

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

コンテナクエリで縦型⇄横型が切り替わるカードを作ってください。親スロットにcontainer-type: inline-sizeを指定し、@container (min-width: 420px)でgridを2カラムの横型に変形させてください。

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

- [container-type](https://www.css-dictionary.com/property/container-type.md)
- [display-grid](https://www.css-dictionary.com/property/display-grid.md)
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md)
- [aspect-ratio](https://www.css-dictionary.com/property/aspect-ratio.md)