コンテナクエリ

定義

コンテナクエリは、レイアウトを切り替える基準を画面全体ではなく、その要素を包んでいる 親コンテナの大きさに置くやり方です。同じカードコンポーネントでも、広い場所に置かれれば 画像と文章を横に並べ、狭い場所に置かれれば上下に積み重ねて、自分から見た目を変えます。 ブレイクポイントがウィンドウ全体の大きさを見て判断するのに対して、コンテナクエリは その要素が実際に立っている場所の幅を見て判断します。新しいCSSの@containerルールで 使い、コンポーネントが置かれた文脈に応じて自分から適応するように設計したいときに 役立ちます。

なぜ重要か

いまどきの画面は、ひとつのコンポーネントをいくつもの場所で使い回します。同じ商品カードが 広い本文にも、狭いサイドバーにも、二カラムのグリッドの中にも入ります。画面の幅だけを 基準にすると、サイドバーのような狭い場所に置かれたカードまで、画面が広いというだけの 理由で横並びを押し通し、無理に潰れて不格好になってしまいます。コンテナクエリなら、 それぞれのカードが自分の場所の幅を直接見て判断するので、どこに置かれてもその空間に 合った姿で現れます。おかげで一度うまく作ったコンポーネントを、場所ごとに手直しせずに そのまま何か所でも使い回せて、デザインシステムの一貫性と保守性が大きく上がります。 コンポーネントが自分の文脈を自分で引き受けるので、あとでレイアウトを変えたり新しい 場所に移したりしても、カードを作り直さなくてよいのが特に心強いところです。

よくある間違い

• 親要素にコンテナとして使うという宣言を書き忘れることです。@containerは対象となる 親にcontainer-typeを指定しておかないと働かないのに、この宣言を忘れるとルールが 静かに無視され、何も変化が起きません。
• どんな場合でもコンテナクエリを押し通そうとすることです。ページ全体の大きな骨組みを 変える仕事は、いまでもブレイクポイントのほうが向いています。コンテナクエリは、 場所ごとに使い回される独立したコンポーネントに使うときこそいちばん輝きます。
• コンテナに指定した親自身の大きさを、その中の子が反対に変えようとすることです。 コンテナが子の大きさに応じてまた大きくなる循環が生まれると、レイアウトが揺れ動く ことがあるので、大きさを決める親とそれに反応する子の役割をはっきり分けておきます。

実務のヒント

• 画面全体ではなく、その要素が置かれた場所を基準にしたいときにコンテナクエリを 思い出してください。サイドバーでも本文でも、カードが自分の幅に合わせて自動で 適応するので、どこでも使い回せるコンポーネントを作るのにとても向いています。
• まだ対応が完全ではない環境に備えて、@supportsでフォールバックを用意しましょう。 コンテナクエリがなくても基本の縦積みのような無難な形で見えるようにしておけば、 どのブラウザでもコンテンツが崩れず安全に表示されます。
• コンテナに名前を付けておくと、何重にも入れ子になった状況でもどの親を基準にするかを はっきり選べます。カードの中にカードが入るような複雑な構造でも、狙ったコンテナに 正しく反応するようになり、思わぬレイアウトの変化を防げます。

関連概念