CSS containerショートハンド — 名前とタイプを1行で設定

containerショートハンドプロパティ

containerショートハンドを使うと、container-nameとcontainer-typeの両方を1つの宣言で設定できます。構文は：container: <name> / <type>です。

基本構文

/* ショートハンド */
.card-wrapper {
  container: card / inline-size;
}

/* 同等のロングハンド */
.card-wrapper {
  container-name: card;
  container-type: inline-size;
}

複数の名前

コンテナは複数の名前を持つことができます（スペース区切り）：

.section {
  container: main-content layout / inline-size;
}

/* 両方とも動作します: */
@container main-content (min-width: 600px) { /* ... */ }
@container layout (min-width: 600px) { /* ... */ }

いつショートハンドを使うか

• ✅ 名前とタイプの両方が常に必要な場合（名前付きコンテナの一般的なケース）
• ✅ よりクリーンで簡潔なCSSのために
• ❌ 名前なしでcontainer-typeのみが必要な場合（ロングハンドを使用）

実践例

.dashboard-widget {
  container: widget / inline-size;
  padding: 1rem;
  border-radius: 8px;
  background: var(--surface);
}

@container widget (min-width: 350px) {
  .widget-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}