CSSコンテナクエリ：レスポンシブデザインの革命

からのこの抜粋は、CSS の力を解き放ちます。 ブラウザのウィンドウサイズ全体に反応するビューポートメディアクエリとは異なり、コンテナクエリは、要素の利用可能なスペースに基づいたスタイリングを可能にし、真のコンポーネントレベルの応答性を有効にします。

従来のビューポートベースのレスポンシブデザインは、多くの場合、レイアウトグリッドと組み合わせた簡略化されたデバイスサイズ（モバイル、タブレット、デスクトップ）に関連するブレークポイントに依存しています。 このアプローチは、個々のコンポーネントの適応性と格闘しています。より大きな要素は個別に調整される可能性がありますが、通常はグローバルなブレークポイントに従います。

コンテナクエリは優れたソリューションを提供します。 次の画像は、ビューポートサイズとは完全に独立したコンテナクエリでスタイルのカードコンポーネントを示しています。 カードの外観は、利用可能なスペースに動的に適応します。

コンテナクエリを利用するには、最初に

プロパティを使用してコンテナとして要素を宣言します。 inline-size （水平ライティングモードの幅に相当）は、最も一般的で広くサポートされている値です。 。容器 { コンテナタイプ：インラインサイズ。 }

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

h2 blueを設定します。 @container（min-width：40ch）{ H2 { 色：青; } }

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

@container（inline-size> 40ch）{ H2 { 色：青; } }

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

block-size および asde-ratio が含まれます。詳細については、公式仕様を参照してください。 カードコンポーネントのアップグレード：実用的な例

コンテナクエリなしでは、カードのバリエーションには通常、ビューポートブレークポイントに結び付けられた修飾子クラスが含まれます。 以下の画像には、3つのカードサイズとそれに対応するクラスを紹介しています。

コンテナクエリを使用して、デフォルトのカードスタイル（サポートされていないブラウザ用）を維持し、コンテナ幅に基づいて追加のスタイルを定義します。

350px以上：水平レイアウト

600px以上：背景としての画像

[Codepenデモ：カードのコンテナクエリ]（codepenへのリンク）

この抜粋は、 CSSの力を解き放つことからのものです。応答性のあるユーザーインターフェイスの高度な手法

キーテイクアウト：

コンテナクエリは、コンポーネントレベルの応答性を提供します。 それらは

および
• @container
を使用して定義されています。
• 論理プロパティは、クロスライティングモードの互換性を強化します。 ビューポートメディアクエリよりも、レスポンシブデザインに対してより柔軟で粒状のアプローチを提供します。
（注：「codepenへのリンク」を実際のCodepenリンクに置き換えてください。）