Container)の相対的なサイズを表す特別な単位が使用できます。つの活用方法をとおして、その可能性を考えていきます。Units)は以下のとおりです。horizontal-tb)を前提としています。参照されるサイズはもっとも近いコンテナ要素です。指定されている要素(基準コンテナ)が見つからない場合には、最終的に小さいビューポート(sv*)が参照されます。いった単位は有効です。上記の例であればパーセント単位(%)でも実現できるので、あまり恩恵は感じられません。別の使い方を探っていきます。使用することで、コンポーネントのサイズを基準としたリキッドレイアウトが可能になります。使用した実装を見ていきます。あれば、リキッドレイアウトの指定は以下のようになります。指定した基準となる変数を指定する方法が考えられます。変数に値や計算式を格納することで、それ以降の指定がシンプルになります。サイズを指定する方法も考えられます。vw(ビューポート幅)で指定した場合、ブラウザ側でフォントサイズの変更ができなくなるという、アクセシビリティ上の問題があるので避けたほうがよいでしょう。達成基準を引用します。までサイズ変更できる。解説書ここまで、従来のビューポートベースでのリキッドレイアウトの例を紹介しましたが、続いて、コンテナクエリの単位を使用した例を見ていきます。コンテナクエリベース見出し「コンテナクエリベース」ビューポートベースでは、同じコンポーネントであっても、収まるレイアウトの幅に応じてスタイル調整が必要でしたが、コンテナクエリでは、基準となるコンテナのサイズに基づいたサイズが適用されるため、同一のコンポーネントをさまざまなレイアウトで使用することが可能になります。あれば以下の指定が考えられます。100cqi);}</style>以下はライブデモですが、スライダーを動かしてコンテナの幅を変更すると、余白(padding)やフォントサイズ(font-size)もあわせて変化します。指定する方法とは異なり、基準となるコンテナごとに指定する必要があります。var(--fluid-ratio));}このように、コンテナクエリベースでリキッドレイアウトを実現することができるのですが、コンポーネントの組み合わせによっては、余白やフォントサイズのバランスが悪くなる可能性もあるため、緻密な設計が求められるかもしれません。リキッドレイアウトのメリット・デメリット見出し「リキッドレイアウトのメリット・デメリット」ウェブサイトにおけるリキッドレイアウトの実装については、以下のメリット(Pros)と、デメリット(Cons)が考えられます。拡大・縮小してもデザインカンプに近い印象を与えられるテキストの折り返し位置が変わらない水平スクロールバーが発生しづらい各デザインカンプの溝(中間サイズのレイアウト)を補完できるリサイズしたときのレイアウトの変化が流麗であるという点も挙げられますが、ユーザが利用した際に気づく可能性は低いかもしれません。1絶対値(px)を指定した要素と競合してレイアウトが破綻する可能性があるコンテナクエリベースでは、前述したように、コンポーネントの組み合わせによるバランス調整の難しさも挙げられます。最終的にはウェブサイトの目的次第ですが、導入する際にはこれらの点を踏まえて慎重に検討したほうがよいでしょう。指定できるため、要素のアスペクト比(縦横比)を保持することができます。カードコンポーネントであれば、以下のようなコードになります。使用できるという利点があります。カラムレイアウトのコードです。つを比較すると、コンテンツがアスペクト比に収まらないとき、隣り合うグリッドの見え方が異なります。以下はライブデモです。属性を指定しているので、内容を編集して各要素の高さに違いを出すことができます。ようなレイアウト2を考えてみます。先にライブデモを確認します。スライダーを動かしてコンテナのサイズを変更しても、レイアウトは維持されたままになります。指定しているため、比率を保ったまま拡大・縮小することができます。適用するにとどまりました。グリッドを作るために以下の指定をしています。10cqi);}おわりに見出し「おわりに」この記事では、コンテナクエリの単位の活用方法を説明しました。コンテナクエリを本格的に使う機会も少ないため、もっと有用な使い方があるかもしれません。無理に使うものではありませんが、引き続きコンテナクエリの可能性を追求し、役立つテクニックやアイデアが見つかりましたら紹介できればと考えています。設定されているので、どこまでも際限なく縮小してしまいます。