このページは Cloud Translation API によって翻訳されました。

コンテナクエリに関する事例紹介

Swetha Gopalakrishnan

Saurabh Rajpal

コンテナクエリレスポンシブディスプレイ広告は、動的かつ柔軟なアプローチで考えていますコンテナクエリでは @container ルールを使用します。これは同様の @media を含むメディアクエリよりも優先されますが、@container は親をクエリします。ビューポートやユーザーエージェントではなく、スタイル設定情報のコンテナにすることをおすすめします。

コンテナクエリは、ベースラインの新機能の一部です。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

コンテナクエリをコンテナサイズに対応させることで、コンポーネントを適応させることができるインターフェース上でその場所に移動しますたとえば、カードコンポーネントは、サイズとスタイルを、サイドバーやヒーロー画像など、配置するコンテナに応じてセクション、ページのメインページ内のグリッドに配置できます。

次の図に示すように、マクロ用のメディアクエリを組み合わせることができます。マイクロレイアウト用のコンテナクエリ（ユーザーの好みに基づくメディアを使用）強力なレスポンシブデザインシステムを構築できます。読むコンテナクエリの詳細をご覧ください。新しいレスポンシブデザイン

さまざまなタイプのスタイル設定がどのように連携するかを示す画像。 — web.dev - 新しいレスポンシブなソリューション

この記事は、e コマース企業が新しい CSS と UI 機能を使ってウェブサイトを改善しました。今回はいくつかの企業がコンテナクエリをどのように使用し、どのような恩恵を受けているかを紹介しました。

redBus

redBus は、モバイル版と PC 版で異なるコードを維持、配信しています。コンテナクエリを実装したらおすすめスポット、 cargo ページで、このコードを使用して 1 つのコードベースに統合できますこれにより応答性が向上しかかるからです次の例では、カーゴページを使用してこれを示しています。

コード

次の例では、.bpdpCardWrapper が親コンテナで、 bpdpSection という名前で作成されます。

コンテナ bpdpSection の最小幅が 744 ピクセルの場合、font-size .bpdpCardContainer によって選択されたコンポーネントの line-height と .subTxt, .bpdpAddress が更新されました。

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

影響

	変更前（複数のコードベース）	変更後（単一のコードベース）
インフラストラクチャ	インフラストラクチャが分離されている（高コスト）。	同じインフラストラクチャ（コスト削減）。
デザイン	UI は分離されているが、一貫性が低い。	解決は困難だが可能。
パフォーマンス	システムが分離されているため扱いやすいが、パフォーマンス改善のための作業が重複している。	これはページと機能に固有ですが、redBus の PageSpeedInsights スコアは 80 を超えています。
開発	デベロッパーチームを分離する。	時間が 30 ～ 40% 短縮されます。

Tokopedia

Tokopedia の Product Detail Pages（PDP）には、ショップの複数のタブと、商品の情報です以前、このページのレイアウトは 3 つの列の左側のプロダクト名が一部より小さなスペースでは（次の「適用前」の動画をご覧ください）。

このレイアウト問題を解決するために、コンテナクエリを簡単かつ迅速に導入しました。この実装により、同社は柔軟性の高いレイアウトを実現し、商品名が常に完全に表示されていました（次の「変更後」の動画をご覧ください）。

変更前

</ph> <ph type="x-smartling-placeholder">

をご覧ください。

コンテナクエリを実装する前に、「ISKU 10 in 1 Obeng」と「satu..」小さい画面では左上がカットされます

変更後

</ph> <ph type="x-smartling-placeholder">

をご覧ください。

コンテナクエリを実装すると、テキストがビューポートに収まるようにレイアウトが調整されます。

コード

次のコードは、infowrapper という名前の親コンテナのサイズをクエリします。 infowrapper の最大幅が 360 ピクセルの場合、子コンポーネントの width、margin,、padding が調整されました。

container-type を inline-size に設定すると、インライン方向のサイズがクエリされます必要があります。英語などのラテン文字では、テキストは左から右にインラインで流れます。

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

コンテナクエリを使用する際の考慮事項

Tokopedia は、サイトで省略記号が使用されているかどうかを調べて、ユースケースを見つけました。コンテナが小さすぎるため、コンテンツがカットされている可能性があることを示していますオフにします。

e コマースサイトのコンテナクエリのもう一つのユースケースは、再利用できます。たとえば、[カートに追加] ボタンが表示されます。（たとえば、親コンテナ内にある場合はアイコンのみにするなど）ページの主要な CTA である場合は、テキスト付きの商品カードとアイコン）を表示します。「コンテナクエリが適しています。

サイトを段階的に改善することができます。たとえば、 Tokopedia の楕円の例のような小さなユースケースから始めることができます。コンテナクエリを実装しますそして案件の件数を徐々に増やして CSS を改善できます

リソース:

このシリーズの他の記事で e コマースの各社はスクロールドリブンなどの新しい CSS と UI 機能を使用することで、アニメーション、ポップオーバー、コンテナクエリ、has() セレクタです。