@container

レスポンシブ・関数

コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。

構文

Syntax

@container <container-name> (<container-query>) { ... }

コード例

例 1

.card {
  container-type: inline-size;
}

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

実行結果

Container (400px+)

Content 1

Content 2

カードコンテナが400px以上の時にグリッドレイアウトに変更

例 2

.sidebar {
  container-type: size;
  container-name: sidebar;
}

@container sidebar (max-height: 300px) {
  .nav-item {
    font-size: 0.8rem;
  }
}

実行結果

Sidebar (<300px)

Small text

名前付きコンテナで高さに応じてフォントサイズを調整

💡 TIPS

メディアクエリよりも柔軟で再利用可能。コンポーネント指向の開発に最適。

⚠️ よくある間違い

container-typeの指定を忘れると動作しない。

ブラウザサポート

Chrome 105+, Firefox 110+, Safari 16+

@container

構文

コード例

例 1

例 2

💡 TIPS

⚠️ よくある間違い

関連プロパティ

ブラウザサポート