container-type: sizeによる高さベースのコンテナクエリ

高さベースのコンテナクエリ

ほとんどのコンテナクエリは幅ベースですが、コンテナの高さをクエリする必要がある場合もあります。これにはinline-sizeではなくcontainer-type: sizeが必要です。

CSS

.hero-panel {
  container-type: size;
  container-name: hero;
  height: 100vh; /* 明示的な高さが必要！ */
}

@container hero (min-height: 500px) {
  .hero-content {
    padding: 4rem;
    font-size: 1.5rem;
  }
}

@container hero (max-height: 400px) {
  .hero-content {
    padding: 1rem;
    font-size: 1rem;
  }
  .hero-subtitle {
    display: none;
  }
}

重要な要件：明示的な高さ

container-type: sizeは両方のディメンションでサイズ包含を確立します。つまり、要素の高さはコンテンツによって決定できません。以下の方法で高さを提供する必要があります：

• 明示的なheightまたはmin-height値
• 高さを制約する親レイアウト（flexbox/grid）
• 100vh、100dvh、またはその他のビューポート相対単位

幅と高さの組み合わせ

@container hero (min-width: 800px) and (min-height: 500px) {
  .hero-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

このクエリは、コンテナが横並びのヒーローレイアウトに十分な幅と高さの両方を持つ場合にのみ発火します。