CSSのコンテナクエリの紹介

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

CSSのパワーを解き放つからのこの抜粋は、適応可能で回復力のあるWebコンポーネントを作成する際のコンテナクエリの変換ポテンシャルを調査します。 ブラウザのウィンドウサイズ全体に反応するViewPortメディアクエリとは異なり、コンテナクエリは、要素の使用可能なスペースに基づいてスタイリングを可能にし、真のコンポーネントレベルの応答性を有効にします。

コンテナクエリとビューポートメディアクエリ

従来のビューポートベースのレスポンシブデザインは、多くの場合、レイアウトグリッドと組み合わせて、簡略化されたデバイスサイズ（モバイル、タブレット、デスクトップ）に関連付けられたブレークポイントに依存しています。 このアプローチは、個々のコンポーネントの適応性と格闘しています。大きな要素は個別に調整される可能性がありますが、一般的にグローバルなブレークポイントに従います。 コンテナクエリは、優れたソリューションを提供します。 次の画像は、ビューポートサイズとは完全に独立したコンテナクエリでスタイルのカードコンポーネントを示しています。 カードの外観は、利用可能なスペースに動的に適応します

注：firefox 110以降、コンテナクエリの幅広いブラウザのサポートが存在します。ポリフィルは古いブラウザーで使用できます。

コンテナクエリの定義

コンテナクエリを使用するには、最初にプロパティを使用してコンテナとして要素を宣言します。

（水平ライティングモードの幅に相当）は、最も一般的で広くサポートされている価値です。

次に、クエリを定義するためにat-ruleを使用します。 次の例では、容器が幅40倍以上の場合、

色を青に設定します。

container-type書き込みモード全体のより広範な互換性については、論理プロパティを使用してください：inline-size

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

を超えて、オプションには@containerおよびh2が含まれます。詳細については、公式仕様を参照してください

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

カードコンポーネントのアップグレード：実用的な例

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

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

inline-size block-size[Codepen Demo：Viewport Media Query Cards]（Codepenへのリンク）aspect-ratioコンテナクエリを使用して、デフォルトのカードスタイル（サポートされていないブラウザ用）を維持し、コンテナ幅に基づいて追加のスタイルを定義します。

• 350px以上：水平レイアウト
• 600px以上：背景としての画像

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

この抜粋は、

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

キーテイクアウト：

• コンテナクエリは、コンポーネントレベルの応答性を提供します
• およびcontainer-type。@containerを使用して定義されています
論理的プロパティは、クロスライティングモードの互換性を強化します
• ビューポートメディアのクエリよりも、レスポンシブデザインに対してより柔軟で粒状のアプローチを提供します。
• （注： "codepenへの"リンクを使用可能な場合は、実際のcodepenリンクに置き換えます。）

以上がCSSのコンテナクエリの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。