コンテナクエリーを使用してコンテンツ幅でレスポンシブする方法

コンテナクエリーとは

windowサイズではなくて、コンテナのサイズでレスポンシブできます。

使用方法

親containerに、container-type: inline-size; を当てる。

@container (max-width: 600px) {~~~} コンテナクエリを記述する。

コンテナータイプの明示とコンテナクエリの使用

container-type: inline-size; を当てると、コンテナクエリの参照対象になります。

@containerは、対象の名前の指定がない場合は、最寄りのcontainer-type な領域を参照する。

.container {
    container-type: inline-size;
}
.card-A {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2px;
}

@container (max-width: 300px) {
    .card-A {
        background-color: rgba(85, 137, 90, 0.73);
        grid-template-columns: 1fr;
    }
    .img-neko {
        width: 100%;
        height: auto;
    }
}

<div class="container-wrapper">
    <div class="container">
        <div class="card-A">
            <img src="./neko1.png" alt="" class="img-neko" />
            <span>これはねこです。This is a cat.</span>
        </div>
    </div>
</div>

コンテナに名前をつける場合

container-nameでコンテナに名前を付けることができます。クエリが参照するコンテナを指定できます。

container-name: name; を使用します

.containerA {
    padding: 1rem;
    background-color: beige;
    container-type: inline-size;
    container-name: cat;
    width: 400px;
}

@container cat (max-width: 400px) {
    .card-A {
        background-color: rgba(85, 137, 90, 0.73);
        grid-template-columns: 1fr;
    }
    .img-neko {
        width: 100%;
        height: auto;
    }
}

<div class="container-wrapper">
    <div class="containerA">
        <div class="containerB">
            <div class="card-A">
                <img src="./neko1.png" alt="" class="img-neko" />
                <span>これはねこです。This is a cat.</span>
            </div>
        </div>
    </div>
</div>

上記の例は、直近の親の.containerBにもcontainer-type: inline-size;の記述がある状態で、そこを参照しないで、container-name: cat;がある.containerAを参照していることを表しています。

Container Queries

CSS Container Queries – MDN

注意事項

iPhoneでは動作しなかった。（2022.9

WindowsのChromeは使えた。（2022.9

利用するためのにはブラウザの挑戦的なフラグをONにしなければならないかも。

ON to “Enable CSS Container Queries” if you work to it. this address is “chrome://flags/”.

win FireFox 105.0.1	win Chrome 106.0	win Edge 105.0	iOS FireFox	iOS Chrome	iOS Safari
x	o	o	x	x	x

CSS Container Queries (Size) – Can I use

Memo.

container-type:の指定で、要素をクエリ コンテナとして定義。コンテナクエリはコンテナサイズを紹介できるようにする。

container-name: @containerが参照するの為の名前。

container: typeとnameを定義する簡略プロパティ。shorthand property.

container-type: size; 高さは喪失する。高さの指定が必要と思う。mdnの説明は私には理解できなかった。無念。

container-type: inline-size; 子要素の積算でサイズが決まる。containのときと振る舞いが同じかな。