使用例
1. カード
最も代表的なユースケース。狭いコンテナでは縦積み、広いコンテナでは横並びに自動切替します。
<article class="cq-card">
<div class="cq-card__layout">
<figure class="cq-card__media">
<img src="./product.jpg" alt="Gray running shoes">
</figure>
<div class="cq-card__body">
<p class="cq-card__eyebrow">Featured Item</p>
<h3 class="cq-card__title">Adaptive Product Card</h3>
<p class="cq-card__text">狭いコンテナでは読みやすく縦に積み、広いコンテナでは画像と本文の関係を強く見せます。</p>
<div class="cq-card__meta">
<span class="cq-card__price">¥12,000</span>
<button class="cq-card__button" type="button">カートに入れる</button>
</div>
</div>
</div>
</article>
.cq-card {
container-type: inline-size;
}
.cq-card__layout {
display: grid;
grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
gap: 1rem;
min-width: 0;
align-items: center;
}
/* コンテナ幅に応じて流動的に伸縮するフォントサイズ */
.cq-card__title {
font-size: clamp(0.9rem, 3cqi, 1.25rem);
}
.cq-card__text {
font-size: clamp(0.75rem, 2.5cqi, 0.9rem);
}
/* 狭いコンテナ向け：縦積みレイアウト */
@container (max-width: 30rem) {
.cq-card__layout {
grid-template-columns: 1fr;
}
.cq-card__meta {
grid-template-columns: 1fr;
gap: 12px;
}
}
/* 広いコンテナ向け：情報量を増やす */
@container (min-width: 50rem) {
.cq-card__title {
font-size: min(2rem, 3cqw);
}
.cq-card__layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cq-card__meta {
grid-template-columns: 1fr;
gap: 12px;
}
}
2. CTAボタン
配置するコンテナの幅に応じてボタンのサイズやレイアウトを変えます。広いコンテナではアクションを横並びに、狭いコンテナではボタンを大きくして縦に積みます。
<section class="cq-cta" data-variant="accent">
<div class="cq-cta__layout">
<div class="cq-cta__copy">
<p class="cq-cta__eyebrow">Team Access</p>
<h3 class="cq-cta__title">Invite your team to this workspace</h3>
<p class="cq-cta__text">広いコンテナではアクションを横並びに、狭いコンテナではボタンを大きくして縦に積みます。</p>
</div>
<div class="cq-cta__actions">
<button class="cq-cta__action cq-cta__action--primary" type="button">Invite members</button>
<button class="cq-cta__action cq-cta__action--secondary" type="button">Learn more</button>
</div>
</div>
</section>
.cq-cta {
container-type: inline-size;
}
.cq-cta__layout {
display: grid;
gap: 1rem;
min-width: 0;
}
/* コンテナ幅に応じて流動的に伸縮するフォントサイズ */
.cq-cta__title {
font-size: clamp(1rem, 3cqi, 1.25rem);
}
.cq-cta__text {
font-size: clamp(0.75rem, 2.5cqi, 0.9rem);
}
.cq-cta__actions {
display: flex;
gap: 0.75rem;
min-width: 0;
flex-wrap: wrap;
}
/* 広いコンテナ向け：テキストとアクションを横並びに */
@container (min-width: 50rem) {
.cq-cta__layout {
grid-template-columns: minmax(0, 1.4fr) auto;
align-items: center;
}
.cq-cta__actions {
justify-content: end;
align-items: center;
}
}
/* 狭いコンテナ向け：ボタンを縦積みしフル幅に */
@container (max-width: 30rem) {
.cq-cta__actions {
flex-direction: column;
}
.cq-cta__action {
width: 100%;
}
}
3. テーブル
狭いコンテナではテーブルが崩れてしまう問題をコンテナクエリーで解決します。狭いときは各行をカード形式で縦積み表示に切り替えます。
<section class="cq-table">
<div class="cq-table__frame">
<table>
<thead>
<tr>
<th>Plan</th>
<th>Seats</th>
<th>Status</th>
<th>Renewal</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Plan">Starter</td>
<td data-label="Seats">5</td>
<td data-label="Status">Active</td>
<td data-label="Renewal">2026-04-18</td>
</tr>
<tr>
<td data-label="Plan">Growth</td>
<td data-label="Seats">12</td>
<td data-label="Status">Trial</td>
<td data-label="Renewal">2026-05-01</td>
</tr>
</tbody>
</table>
</div>
</section>
.cq-table {
container-type: inline-size;
}
.cq-table table {
width: 100%;
border-collapse: collapse;
}
.cq-table th,
.cq-table td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* 狭いコンテナ向け：カード型の縦積みに切り替え */
@container (max-width: 50rem) {
.cq-table thead {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.cq-table tbody tr {
display: grid;
gap: 0.5rem;
padding: 1rem;
border: 1px solid #ddd;
margin-bottom: 1rem;
}
.cq-table td {
border: none;
display: flex;
align-items: center;
}
/* data-label属性の値をラベルとして表示 */
.cq-table td::before {
content: attr(data-label);
font-weight: 700;
margin-right: 1em;
min-width: 80px;
}
}
4. ニュース一覧（oEmbed）
ニュース記事やブログ投稿の一覧に、oEmbedで取得したメディア（サムネイル・動画など）を組み合わせるパターンです。コンテナ幅に応じてサムネイルの表示・非表示を切り替えます。
<section class="cq-news">
<ul class="cq-news__list">
<li class="cq-news__item">
<div class="cq-news__media" aria-hidden="true"></div>
<div class="cq-news__body">
<p class="cq-news__meta">Product Update · 2026-03-18</p>
<h3 class="cq-news__title">Container queries now power embedded media summaries</h3>
<p class="cq-news__excerpt">サムネイルや動画プレビューを含むニュースカードを、配置先の幅に合わせて切り替えます。</p>
</div>
</li>
</ul>
</section>
.cq-news {
container-type: inline-size;
}
.cq-news__item {
display: grid;
grid-template-columns: 9rem 1fr;
gap: 1rem;
}
/* コンテナ幅に応じて流動的に伸縮するフォントサイズ */
.cq-news__title {
font-size: clamp(0.95rem, 3cqi, 1.15rem);
}
.cq-news__excerpt {
font-size: clamp(0.75rem, 2.3cqi, 0.9rem);
}
/* 狭いコンテナ向け：メディアを非表示、テキスト優先 */
@container (max-width: 31rem) {
.cq-news__item {
grid-template-columns: 1fr;
}
.cq-news__media {
display: none;
}
}
