コンテナークエリーを使用して親要素のサイズに応じたスタイリングをする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回は、コンテナークエリーを使用して親要素のサイズに応じたスタイリングをする方法をご紹介します。

コンテナークエリーとは？

コンテナークエリーとは、特定の親要素（コンテナー）のサイズに基づいたスタイリングを可能にする機能です。

メディアクエリーは画面サイズですが、コンテナークエリは特定の要素のサイズを基準とするため、より柔軟にレスポンシブ対応が可能です。

コンテナークエリを用いたスタイリングの例をお示しします。

HTMLの構造は以下の通りです。

<div class="parent">
  <div class="child"></div>
</div>

.parentの横幅に基づいて.childをスタイリングします。

基本のスタイルは以下の通りです。

.childは背景色が黒の128pxの正方形になるようにしています。

.parent {}

.child {
    aspect-ratio: 1/1;
    background: black;
    width: 128px;
}

コンテナークエリを有効にするために、基準となる要素にcontainer-typeを付与する必要があります。

container-typeには3種類の値が存在します。

値	挙動
`size`	インライン（横幅）およびブロック（縦幅）の両方の寸法が基準に使用されます
`inline-size`	インライン（横幅）の寸法が基準に使用されます
`normal`	実質的にコンテナークエリーが無効になります

今回の例では、.parentの横幅に基づいて.childをスタイリングするため、inline-sizeを使用します。

.parentにcontainer-type: inline-size;を追加します。

.parent {
    container-type: inline-size;
}

今回は、「.parentの横幅が512px以下のとき、.childの背景色が赤になる」を条件とします。

コンテナークエリーの@container記法（メディアクエリーの@mediaと同じ）でスタイリングすると、以下のようになります。

.child {
    ...

    @container (max-width: 512px) {
        background: red;
    }
}

.parentの横幅が512px以下のとき、.childの背景色が赤に変化するようになりました。

先にお示しした例のままですと、基準としている親要素が分かりづらく、コンテナークエリーを有効にした要素が複数ある場合に混乱の要因になってしまいます。

.child {
 ...

    /* どの要素の横幅なのかが分からない */
    @container (max-width: 512px) {
        ...
    }
}

そこで、親要素にcontaner-nameを付与し、@container内で基準とする親要素を明示します。

以下のようにcontaner-nameを使用します。（その際、値は引用符で囲わないように注意してください）

.parent {
    ...

    container-name: parentElement;
}

.child {
    ...

    @container parentElement (max-width: 512px) {
        ...
    }
}

なお、container-nameを使用しない場合は、一番近いコンテナークエリーを有効にした要素が基準となります。

今回は、コンテナークエリーを使用して親要素のサイズに応じたスタイリングをする方法をご紹介しました。

従来のメディアクエリーでは画面幅基準のみのレスポンシブ対応でしたが、コンテナークエリーを使用することでより柔軟にできるようになりました。

スタイリングされる方の一助となれば幸いです。

ご精読ありがとうございました。