CSSの単位 cqi を知ってますか？

ある日自分のサイトを見ていると、ページ幅によっては、以下の画像のように角が丸すぎることに気が付きました。

border-radiusはpxで指定した覚えがあったので、なにかおかしいと思いスタイルを確認してみると、以下のように記述されていました。

border-radius: 6cqi;

。。。なんだこれは。
pxじゃないぞ、かといってemでもremでもないし、%でもない。なんだこの単位は。

cqiとは#

cqiはCSSで使われる単位の一つです。
Container Query Inlineの略で、基準となるコンテナの相対的なサイズを表す特別な単位です。
コンテナークエリー(Container Query)とは、CSSで指定した基準となるコンテナの幅に応じてスタイルを変更することができる機能です。主要なブラウザではブラウザで対応されているようです。

CSS Container Queries

@mediaでの記述では、ウィンドウサイズのことを考えて、各要素のスタイルを変更していく必要があります。
一方コンテナクエリーであれば、自分の親要素の幅のことだけを考えてスタイルを変更することができます。

コンテナクエリーの使い方#

実際に使ってみました。
以下のコードを元にして、コンテナクエリーを追加してどう変化するかを確認していきたいと思います。

<div class="card">
    <p>コンテナー幅: <span id="width"></span></p>
    <div class="card-inner">
        <img src="/placeholder.png" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae luctus eros, in varius turpis. Praesent eu dapibus nulla. Quisque et nunc et justo congue convallis non nec ipsum. In porta nisl vitae ipsum faucibus, quis iaculis dolor condimentum.</p>
    </div>
    <div class="resizable-handle" id="resizable-handle"></div>
</div>

<style>
    .card {
        background-color: #bfd1e3;
        color:black;
        padding:1rem;
        /* 以下は手動で横幅を制御できるようにするため */
        position: relative;
        resize: horizontal;
        overflow: auto;
    }
    .resizable-handle {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 20px;
        width: 20px;
        cursor: ew-resize;
        background-color: darkgrey;
    }
    img {
        width: 100%;
        height: auto;
        border-radius: 6px;
    }
    p{margin: 0}
</style>

デフォルト時の表示#

min-width: 360pxでコンテナクエリーを適用した場合#

スマホでも動きを確認できるように、min-width: 360pxでコンテナクエリーを適用してみました。
ウィンドウサイズを変えずとも、.cardの幅によってスタイルが変わることが確認できます。

<style>
    .card {
        container-type: inline-size;
        /* コンテナに名前をつけられます。複数コンテナ利用する場合に便利です */
        container-name: card-container;
    } 
    /* 
    コンテナ名を指定しない場合には、以下のように記述します。
    @container (min-width: 360px){
     */
    @container card-container (min-width: 360px){
        .card-inner {
            display: grid;
            gap: 6px;
            grid-auto-flow: column;
        }
        img {border-radius: 0;}
    }
</style>

cqiの使い所#

cqiはコンテナの幅に合わせて横幅などを指定するのに便利です。
例えば、以下のように360px以上で、画像の横幅を20cqiに固定し、pタグのフォントサイズをclampで以下のように指定してみます。

<style>
    @container card-container (min-width: 360px) {
        img {
            width: 20cqi;
        }
        p {
            font-size: clamp(.5rem, 20cqi, 3rem);
        }
    }
</style>