コンテナクエリ
は、レスポンシブ
デザインに非常に動的で柔軟なアプローチを提供します。コンテナクエリでは、@container at-rule を使用します。これは @media を使用したメディアクエリと同様に機能しますが、@container はビューポートとユーザー エージェントではなく、親コンテナにスタイリング情報をクエリします。
コンテナクエリを使用すると、コンテナのサイズに応じてコンポーネントをインターフェース内の位置に適応させることができます。たとえば、カード コンポーネントは、配置されているコンテナ（サイドバー、ヒーロー セクション、ページ本文内のグリッドなど）に応じてサイズとスタイルを調整できます。
次の図に示すように、マクロ レイアウトのメディアクエリ、マイクロ レイアウトのコンテナクエリ、ユーザー設定に基づくメディアクエリを組み合わせて、強力なレスポンシブ デザイン システムを作成できます。コンテナクエリと 新しいレスポンシブ デザインの詳細を ご覧ください。
この記事は、e コマース企業が新しい CSS と UI 機能を使用してウェブサイトを強化した方法について説明するシリーズの一部です。今回は、コンテナクエリを使用してメリットを得た企業の事例を紹介します。
redBus
redBus は、モバイル版とパソコン版で異なるコードを維持して提供しています。 アクティビティと 貨物のページにコンテナクエリを実装したことで、これらのサイトのコードを単一のコードベースに統合することができました。これにより、レスポンシブ対応が可能になり、開発時間を短縮できました。次の例では、貨物ページを使用してこれを示しています。
コード
次の例では、.bpdpCardWrapper は親コンテナで、bpdpSection という名前が付けられています。
コンテナ bpdpSection の最小幅が 744 ピクセルの場合、.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;
}
}
影響
| 変更前 （複数のコードベース） | 変更後 （単一のコードベース） | |
|---|---|---|
| インフラストラクチャ | インフラストラクチャの分離（コストが高い）。 | 同じインフラストラクチャ（コスト削減）。 |
| デザイン | UI は分離されているが、一貫性が低い。 | 解決は難しいが、可能。 |
| パフォーマンス | システムが分離されているため処理は簡単だが、パフォーマンス改善の作業が重複する。 | ページと機能によって異なるが、redBus の PageSpeedInsights スコアは 80 を超えている。 |
| 開発 | 開発チームの分離。 | 時間の 30%～ 40% の削減。 |
Tokopedia
Tokopedia の商品詳細ページ（PDP）には、ショップと商品に関する複数のタブがあります。以前は、このページのレイアウトは 3 列に分割されており、画面サイズが小さい場合、左側の商品名が切り取られることがありました（次の「変更前」の動画をご覧ください）。
このレイアウトの問題を解決するため、コンテナクエリを簡単かつ迅速に導入しました。 この実装後、商品名が常に完全に表示される柔軟なレイアウトを実現できました（次の「変更後」の動画をご覧ください）。
変更前
変更後
コード
次のコードは、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 コマースサイトのコンテナクエリのもう 1 つのユースケースは、再利用されたコンポーネントを探すことです。たとえば、[カートに追加] ボタンは、親コンテナに応じて異なる表示になることがあります（商品カード内にある場合はアイコンのみ、ページ上のメインの CTA の場合はアイコンとテキスト）。このボタンは、コンテナクエリの候補として適しています。
サイトを段階的に改善することもできます。たとえば、Tokopedia の省略記号の例のような小さなユースケースから始めて、そこにコンテナクエリを実装します。その後、さらに多くのケースを見つけて、CSS を改善します。
リソース:
- コンテナクエリが安定版ブラウザに実装されました
- コンテナクエリ - ブラウザでの設計
- コンテナクエリのデモ
- デモ: コンテナクエリカード
- 動画: ウェブ UI の新機能 - I/O 2023
- バグの報告や新機能のリクエストがございましたら、お気軽にお問い合わせください。
このシリーズの他の記事では、e コマース企業がスクロール駆動型アニメーション、ポップオーバー、コンテナクエリ、has() セレクタなどの新しい CSS と UI 機能を使用してメリットを得た方法について説明しています。