コンテナクエリを使用すると、非常に動的で柔軟なレスポンシブ デザインを実現できます。コンテナクエリは、@container
at ルールを使用します。これは @media
を使用したメディアクエリと同様に機能しますが、@container
はビューポートとユーザー エージェントではなく、親コンテナにスタイル情報をクエリします。
コンテナクエリは、新たに利用可能になったベースラインの一部です。
コンテナクエリでは、コンテナサイズに応じてコンポーネントがインターフェース内の場所に対応できます。たとえば、カード コンポーネントは、配置されているコンテナ(サイドバー、ヒーロー セクション、ページの本文内のグリッドなど)に応じてサイズとスタイルを調整できます。
次の図に示すように、マクロ レイアウトのメディアクエリ、マイクロ レイアウトのコンテナクエリ、ユーザー設定に基づくメディアクエリを組み合わせて、強力なレスポンシブ デザイン システムを作成できます。コンテナクエリの詳細と新しいレスポンシブ デザインをご覧ください。
この記事は、新しい CSS と UI 機能を使用してウェブサイトを強化した e コマース企業について説��するシリーズの一部です。今回は、一部の企業がどのようにコンテナクエリを使用し、そのメリットを享受しているかを詳しく見ていきます。
redBus
redBus は、モバイル版と PC 版で異なるコードを維持、配信しています。おすすめスポットと貨物のページにコンテナクエリを実装した後、これらのサイトのコードを 1 つのコードベースに統合することができました。これにより応答性が向上し、開発時間が短縮されました。次の例は、Cargo ページを使用した方法を示しています。
コード
次の例では、.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
- バグの報告または新機能のリクエストを行いますか?ご意見をお聞かせください。
スクロールドリブン アニメーション、ポップオーバー、コンテナクエリ、has()
セレクタなどの新しい CSS と UI の機能を使用して、e コマース企業がどのようにメリットを得るかについて説明しているこのシリーズの他の記事もご覧ください。