コンテナクエリのスゴさをあらためて体感するCRANK2022/2/14にFirefoxの対応により全ブラウザで使えるようになったコンテナクエリ。従来の@mediaのレスポンシブ対応を大きく変えてくれるものです。本セッションではコンテナクエリの基本的な使い方、一緒に使えるようになったcqwといった新しい単位までを紹介します。絶対役立つ!最先端のCSS総ざらいのセッション書き起こし記事になります。イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。@tonkotsuboy_com)です。マネーフォワードでフロントエンドエンジニアをしていて、JavaScriptコードレシピ集という書籍や日経ソフトウェアの記事を執筆しています。queries(@media)によるレスポンシブ対応の課題についてお話します。赤枠のようなSNSページのリアクションバー(「返信する」「いいね」などのリアクションとその数を表示するコンポーネント)を開発するとしましょう。親要素の領域によって2種類のサイズ(「いいね」などのテキストあり/なしのもの)を用意するとします。このように領域にあわせてサイズを変えるとき、@mediaを使ってレスポンシブ対応することが考えられますが、@mediaの基準はウィンドウの幅ですので、親要素の幅にあわせるには画面幅ごとに細かく条件分岐する必要があります。etc.このように画面幅を基準に多くの条件分岐を考える必要があり、分岐を実現するには非常に多くの@mediaを書く必要があります。注文が追加されることもあります。ナビゲーションバーの幅を変えたのでメインエリアの幅も変わったナビゲーションは開閉機能をもたせたので、開いたときだけメインエリアの幅が変わる○○pxのときだけレイアウトがおかしいこの例のように、@mediaでウィンドウサイズだけを基準として複雑なレスポンシブ対応を行うには限界があります。コンテナクエリの登場そこで登場するのがコンテナクエリです。queries(@media)と異なり、コンテナクエリは任意の要素のサイズを基準にできます。コンテナクエリの基準となる要素のことを「コンテナ」と呼び、さきほどの例の場合、リアクションバーが配置されている親要素を@containerのサイズの基準にできます。大きなコンテナでは「いいね」などのテキストを表示して、小さなコンテナではテキストなし、アイコン/数値のみという条件分岐ができるようになります。コンテナクエリを使う3ステップコンテナクエリを実際に使うには、3つのステップがあります。今回の例では返信ボタンやいいねボタンを囲んでいる親要素である.reaction-bar要素をコンテナとします。ある要素をコンテナにしたい場合は、CSSでその要素にcontainer-typeかcontainerプロパティを指定します。今回は.reaction-bar要素に対してcontainer-typeを指定します。今回はインライン方向(横幅)のサイズが大きいときにはテキストを表示、小さいときにはテキストを非表示にしたいので、インライン方向を基準にします。どちらの方向を基準にスタイルを適用するかは、container-typeプロパティで指定できます。インライン(横)/ブロック(縦)両方を監視クエリを書く@containerルールを使ってコンテナクエリを記述します。下記のクエリを書くと、コンテナの幅が560px以下のときだけ内部のスタイルが適用されるようになります。none;を指定します。デモをご覧いただければ、コンテナのサイズにあわせてテキストの表示・非表示が切り替わっていることが確認できます。コンテナクエリとコンポーネント開発コンテナクエリはReactなどのコンポーネント開発と非常に相性が良いです。今回のリアクションバーのコンポーネント開発者は、コンポーネントがどこに配置されるかを考える必要はなく、コンポーネントが配置されるコンテナの広さだけを考えれば良くなります。リアクションバーを作るコンポーネント開発者は、ウィンドウサイズを意識することなく、適切なコンテナサイズに対する適切な見た目だけを担保するよう、コンポーネントを開発します。全体を作る開発者にリアクションバーコンポーネントを渡して任意の場所に配置してもらえば、配置された場所のサイズにあわせて期待通りに表示されます。cqh)が使えるようになりました。cqwはコンテナの幅に対する割合サイズで、100cqwがコンテナの幅の100%です。cqhはコンテナの高さに対する割合サイズで、100cqhがコンテナの高さの100%です。次の例のように、コンテナ内に5文字(「古都めぐり」)のテキストをぴったり配置したい場合を考えます。この場合、1文字分が100cqwを5分割して20cqwになるようにします。19cqw;を指定します。Safariできれいに5分割できない場合があるため、少し小さめの19cqwにしておきます。このようにcqwを使ってフォントサイズを指定すると、親要素のサイズが変わってもかならず5文字がコンテナ内にぴったり均等に表示されます(デモ)。110が@containerに対応したことにより、@container、container-type、cqw/cqhはすべてのブラウザで利用できるようになりました。コンテナに対する割合サイズ詳細はZennでも解説していますので、ぜひご覧ください。@tonkotsuboy_comでも最新フロントエンド技術について発信していますので、ぜひフォローしてください。ご清聴ありがとうございました。絶対役立つ!最先端のCSS総ざらいのセッション書き起こし記事になります。イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。記事化いただきました。コンテナクエリの使い方を、デモを交えてステップバイステップで解説。