ついに全ブラウザ対応! コンテナクエリのスゴさをあらためて体感する

本記事は、TechFeed Experts Night#14 〜絶対役立つ！最先端のCSS総ざらいのセッション書き起こし記事になります。イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。

本セッションの登壇者

セッション動画

鹿野壮(Twitter: @tonkotsuboy_com)です。マネーフォワードでフロントエンドエンジニアをしていて、JavaScriptコードレシピ集という書籍や日経ソフトウェアの記事を執筆しています。

Media queriesによるレスポンシブ対応の課題

今回は**Container queries(コンテナクエリ)**について紹介しますが、その前に従来のMedia queries(@media)によるレスポンシブ対応の課題についてお話します。

たとえば赤枠のようなSNSページのリアクションバー(「返信する」「いいね」などのリアクションとその数を表示するコンポーネント)を開発するとしましょう。

そして親要素の領域によって2種類のサイズ(「いいね」などのテキストあり/なしのもの)を用意するとします。

このように領域にあわせてサイズを変えるとき、@mediaを使ってレスポンシブ対応することが考えられますが、@mediaの基準はウィンドウの幅ですので、親要素の幅にあわせるには画面幅ごとに細かく条件分岐する必要があります。

画面幅1480px以上のとき … すべて「いいね」などのテキストあり
画面幅1080px以上1480px未満のとき … 上部エリアではテキストあり、下部エリアは2カラム表示なのでテキストなし
画面幅859px以上1080px未満のとき … 上部ではテキストあり、下部エリアも1カラム表示に切り替わるのでテキストあり
画面幅825px以上859px未満のとき … 上部ではテキストあり、下部エリアの幅が狭くなるのでテキストなし
画面幅825px未満のとき … etc.

このように画面幅を基準に多くの条件分岐を考える必要があり、分岐を実現するには非常に多くの@mediaを書く必要があります。

さらに注文が追加されることもあります。

ナビゲーションバーの幅を変えたのでメインエリアの幅も変わった
ナビゲーションは開閉機能をもたせたので、開いたときだけメインエリアの幅が変わる
○○pxのときだけレイアウトがおかしい

この例のように、@mediaでウィンドウサイズだけを基準として複雑なレスポンシブ対応を行うには限界があります。

コンテナクエリの登場

そこで登場するのがコンテナクエリです。ウィンドウサイズを基準とするMedia queries(@media)と異なり、コンテナクエリは任意の要素のサイズを基準にできます。

コンテナクエリの基準となる要素のことを「コンテナ」と呼び、さきほどの例の場合、リアクションバーが配置されている親要素を@containerのサイズの基準にできます。

大きなコンテナでは「いいね」などのテキストを表示して、小さなコンテナではテキストなし、アイコン/数値のみという条件分岐ができるようになります。

コンテナクエリを使う3ステップ

コンテナクエリを実際に使うには、3つのステップがあります。

基準となるコンテナの決定

今回の例では返信ボタンやいいねボタンを囲んでいる親要素である.reaction-bar要素をコンテナとします。

ある要素をコンテナにしたい場合は、CSSでその要素にcontainer-typeかcontainerプロパティを指定します。今回は.reaction-bar要素に対してcontainer-typeを指定します。

方向の指定

今回はインライン方向(横幅)のサイズが大きいときにはテキストを表示、小さいときにはテキストを非表示にしたいので、インライン方向を基準にします。

どちらの方向を基準にスタイルを適用するかは、container-typeプロパティで指定できます。

container-type: inline-size; …インライン(横)方向のみを監視
container-type: size; … インライン(横)/ブロック(縦)両方を監視

クエリを書く

@containerルールを使ってコンテナクエリを記述します。下記のクエリを書くと、コンテナの幅が560px以下のときだけ内部のスタイルが適用されるようになります。

今回はコンテナの幅が560px以下のときだけ.text要素を非表示にしたいので、@container (max-width: 560px) {}で囲んだ中で.reason-bar .textにdisplay: none;を指定します。

デモをご覧いただければ、コンテナのサイズにあわせてテキストの表示・非表示が切り替わっていることが確認できます。

コンテナクエリとコンポーネント開発

コンテナクエリはReactなどのコンポーネント開発と非常に相性が良いです。

今回のリアクションバーのコンポーネント開発者は、コンポーネントがどこに配置されるかを考える必要はなく、コンポーネントが配置されるコンテナの広さだけを考えれば良くなります。

リアクションバーを作るコンポーネント開発者は、ウィンドウサイズを意識することなく、適切なコンテナサイズに対する適切な見た目だけを担保するよう、コンポーネントを開発します。全体を作る開発者にリアクションバーコンポーネントを渡して任意の場所に配置してもらえば、配置された場所のサイズにあわせて期待通りに表示されます。

コンテナに対する割合サイズ

さらに、コンテナの幅/高さに対する割合サイズ(cqw / cqh)が使えるようになりました。

cqwはコンテナの幅に対する割合サイズで、100cqwがコンテナの幅の100%です。

cqhはコンテナの高さに対する割合サイズで、100cqhがコンテナの高さの100%です。

`cqw` / `cqh`の活用例

次の例のように、コンテナ内に5文字(「古都めぐり」)のテキストをぴったり配置したい場合を考えます。

この場合、1文字分が100cqwを5分割して20cqwになるようにします。

そして左のようなHTML要素に対して、.text-containerにcontainer-type: inline-size;を指定してコンテナとし、内部の.text-container .textにfont-size: 19cqw;を指定します。ちなみにfont-size: 20cqw;とすると、コンテナサイズによってはFirefox / Safariできれいに5分割できない場合があるため、少し小さめの19cqwにしておきます。

このようにcqwを使ってフォントサイズを指定すると、親要素のサイズが変わってもかならず5文字がコンテナ内にぴったり均等に表示されます(デモ)。

対応ブラウザ

2023年2月14日にFirefox 110が@containerに対応したことにより、@container、container-type、cqw/cqhはすべてのブラウザで利用できるようになりました。

まとめ

コンテナクエリを使うと、ウィンドウではなく任意の要素のサイズを基準にレスポンシブ対応が可能
コンテナのサイズさえ気にすればよいので、コンポーネント開発が便利になる
コンテナクエリ関連のCSSは大きく3つ
- container-type: inline-size; … 基準となるコンテナ要素と方向の指定
- @container … コンテナクエリ
- cqw / cqh … コンテナに対する割合サイズ

詳細はZennでも解説していますので、ぜひご覧ください。

また、Twitter @tonkotsuboy_comでも最新フロントエンド技術について発信していますので、ぜひフォローしてください。

ご清聴ありがとうございました。