コンテナ範囲クエリ（400px〜800px）

コンテナ範囲クエリ

しきい値の上や下だけでなく、特定の幅範囲内でのみスタイルを適用する必要がある場合があります。1つの@containerルールでmin-widthとmax-widthを組み合わせます。

CSS

.content-area {
  container-type: inline-size;
  container-name: content;
}

/* 400pxから800pxの間でのみ適用 */
@container content (min-width: 400px) and (max-width: 800px) {
  .content-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

階層化されたブレークポイント

範囲クエリは階層化されたブレークポイントシステムの一部として最も効果的に機能します：

/* 狭い：1列 */
.layout { display: block; }

/* 中：2列 */
@container content (min-width: 400px) and (max-width: 799px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* 広い：3列 */
@container content (min-width: 800px) {
  .layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

新しい範囲構文

CSSはコンテナクエリに対する新しい範囲構文もサポートしています（Chrome 111+）：

@container content (400px <= width <= 800px) {
  /* min-width: 400px and max-width: 800pxと同じ */
}

範囲クエリを使用する場合

• より広いサイズで持続すべきでないスタイルを適用する場合
• 「タブレット専用」や「中間サイズ専用」のコンポーネントスタイルを作成する場合
• ブレークポイント間の遷移を微調整する場合