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

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

Swetha Gopalakrishnan

Saurabh Rajpal

コンテナクエリは、レスポンシブデザインに対して非常に動的で柔軟なアプローチを提供します。コンテナクエリでは @container アットルールを使用します。これは、@media を使用したメディアクエリと同様の方法で動作しますが、@container はビューポートとユーザーエージェントではなく、親コンテナにスタイル情報のクエリを実行します。

コンテナクエリは、新規に利用可能になったベースラインの一部です。

対応ブラウザ

ソース

コンテナクエリは、コンテナのサイズに応答することで、コンポーネントがインターフェース内の位置に適応できるようにします。たとえば、カードコンポーネントは、配置されているコンテナ（サイドバー、ヒーローセクション、ページのメイン部分内のグリッドなど）に応じてサイズとスタイルを調整できます。

次の図に示すように、マクロレイアウトのメディアクエリ、マイクロレイアウトのコンテナクエリ、ユーザー設定ベースのメディアクエリを組み合わせて、強力なレスポンシブデザインシステムを作成できます。コンテナクエリの詳細と新しいレスポンシブデザインをご覧ください。

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

この記事は、新しい CSS と UI の機能を使用して e コマース企業がウェブサイトを強化した方法について説明するシリーズの一部です。今回は、コンテナクエリをどのように使用し、どのようなメリットを得ているかについて、いくつかの企業の例をご紹介します。

redBus

redBus は、モバイルとパソコンのバージョンで異なるコードを維持して配信しています。おすすめスポットとカーゴのページにコンテナクエリを実装した後、このコードを統合して、これらのサイトの単一のコードベースにまとめることができました。これにより、レスポンスが向上し、開発時間が短縮されました。次の例は、Cargo ページを使用してこれを示しています。

コード

次の例では、.bpdpCardWrapper は bpdpSection という名前の親コンテナです。

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

//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;
   }
}

影響

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

Tokopedia

Tokopedia の商品詳細ページ（PDP）には、ショップと商品情報の複数のタブがあります。以前は、このページのレイアウトは 3 つの列に分かれており、画面サイズが小さい場合、左側の商品名が切り捨てられることがありました（以下の「以前」の動画をご覧ください）。

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

前

コンテナクエリを実装する前は、画面サイズが小さい場合、左上の「ISKU 10 in 1 Obengsatu..」という単語が切り捨てられていました。

変更後

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

コード

次のコードは、infowrapper という名前の親コンテナのサイズをクエリします。infowrapper の最大幅が 360 px の場合、子コンポーネントの 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 コマースサイトのコンテナクエリのもう 1 つのユースケースは、再利用されたコンポーネントを探すことです。たとえば、[カートに追加] ボタンは、親コンテナによって表示が異なる場合があります（商品カード内の場合はアイコンのみ、ページ上のメインの CTA の場合はアイコンとテキストなど）。ボタンはコンテナクエリの候補として適しています。

サイトを段階的に改善することもできます。たとえば、Tokopedia の楕円の例のような小規模なユースケースから始めて、コンテナクエリを実装できます。その後、さらに多くのケースを見つけて CSS を改善します。

リソース:

コンテナクエリが安定版ブラウザにリリース
コンテナクエリ - ブラウザでの設計
コンテナクエリのデモ
デモ: コンテナのクエリカード
動画: ウェブ UI の新機能 - I/O 2023
バグの報告と新機能のリクエストのどちらをご希望ですか？ご意見をお聞かせください。

スクロールドリブンのアニメーション、ポップオーバー、コンテナクエリ、has() セレクタなどの新しい CSS と UI の機能を使用して、e コマース企業がどのように利益を得たかについて、このシリーズの他の記事をご確認ください。

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

redBus

コード

影響

Tokopedia

前

変更後

コード

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

リソース:

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