Container style queries | CSS Baseline Tour 2026

カードの種類表示密度テーマの部分適用

--variant の値

ワイヤレスイヤホン

ノイズキャンセリング対応。最大 24 時間再生。

--density の値

週次ミーティングの議事録 佐藤さん・10:24
デザインレビューの日程について 鈴木さん・昨日
リリースノートの確認依頼 高橋さん・昨日

外側: --theme: light

中: --theme: dark

内側: --theme: light

使っている機能

@container style(): 親要素のカスタムプロパティの値が一致したときだけ、中のスタイルを適用する。container-type の指定は不要
子孫だけが対象: 切り替えられるのは、カスタムプロパティを設定した要素の子孫。設定した要素自身は切り替えられない

CSS

/* 親の --variant が featured のとき、中の部品をまとめて切り替える */
@container style(--variant: featured) {
	.variant-inner {
		border-color: #3a5bd9;
	}
	.variant-badge {
		display: inline-block;
		background: #3a5bd9;
	}
	.variant-badge::after {
		content: 'おすすめ';
	}
	.variant-button {
		background: #3a5bd9;
	}
}

HTML

<div class="variant-card" style="--variant: default">
	<div class="variant-inner">
		<span class="variant-badge"></span>
		<h3>ワイヤレスイヤホン</h3>
		<p>ノイズキャンセリング対応。最大 24 時間再生。</p>
		<button type="button" class="variant-button">カートに入れる</button>
	</div>
</div>

使っている機能

@container style(): 一覧の親に --density を1つ設定するだけで、中のすべての項目の余白や並びが切り替わる

CSS

/* 親の --density が compact のとき、一覧を詰めて表示する */
@container style(--density: compact) {
	.density-item {
		grid-template-columns: 1fr auto;
		padding: 6px 12px;
		font-size: 0.9rem;
	}
}

HTML

<ul class="density-list" style="--density: comfortable">
	<li class="density-item">
		<strong>週次ミーティングの議事録</strong>
		<span class="density-meta">佐藤さん・10:24</span>
	</li>
	<li class="density-item">
		<strong>デザインレビューの日程について</strong>
		<span class="density-meta">鈴木さん・昨日</span>
	</li>
	<li class="density-item">
		<strong>リリースノートの確認依頼</strong>
		<span class="density-meta">高橋さん・昨日</span>
	</li>
</ul>

使っている機能

@container style(): 部品は一番近い親の --theme の値を見る。入れ子にすると、内側だけ別のテーマにできる

CSS

/* 部品は「一番近い親の --theme」を見て見た目を決める */
@container style(--theme: dark) {
	.theme-panel {
		border-color: #374151;
		background: #111827;
		color: #f9fafb;
	}
	.theme-button {
		background: #f9fafb;
		color: #111827;
	}
}

HTML

<div style="--theme: light">
	<div class="theme-panel">
		<p>外側: --theme: light</p>
		<button type="button" class="theme-button">ボタン</button>

		<div style="--theme: dark">
			<div class="theme-panel">
				<p>中: --theme: dark</p>
				<button type="button" class="theme-button">ボタン</button>

				<div style="--theme: light">
					<div class="theme-panel">
						<p>内側: --theme: light</p>
						<button type="button" class="theme-button">ボタン</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>