コンテナクエリ（@container）

コンテナクエリとは

type プロパティ

単位プロパティ

コンテナクエリ（@container）とは

コンテナ幅によってスタイルが適用

要素に container: [name] / [プロパティ]を追加、サイズにより変更する場合は@container [name] (min-width:xxxpx)と記述する

メディアクエリ : 画面全体
コンテナクエリ : コンテナ幅（asideを引いた伸長するmainコンテンツなど）

header

坊ちゃん

親譲りの無鉄砲で小供の時から損ばかりしている。font-size: max(3.2cqi, 14px);

親譲りの無鉄砲で小供の時から損ばかりしている。font-size: 3.2cqb;

here

footer

.container01_wrap {
  display: grid;
  grid-template-columns: 1fr 150px;
  grid-template-rows: auto 1fr auto;
  @media screen and (max-width: 736px) {
    display: block;
  }

  & .header_0 {
    grid-area: 1 / 1 / 2 / 3;
  }
  & .main_0 {
    grid-area: 2 / 1 / 3 / 2;

    & .container01 {
      width: stretch;
      container: sam_cont / inline-size;
      & .ph {
        &::after {
          aspect-ratio: 16 / 9;
          content: "container width < 540px";
        }
      }
    }
    @container sam_cont (min-width:540px) {
      .container01 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        & .ph {
          grid-area: 1 / 1 / 4 / 2;
        }
        & .title {
          grid-area: 1 / 2 / 2 / 3;
        }
        & .copy {
          grid-area: 2 / 2 / 3 / 3;
        }
        & .link {
          grid-area: 3 / 2 / 4 / 3;
        }
      }
    }
  }
  & .aside_0 {
    grid-area: 2 / 2 / 3 / 3;
    &::after {
      content: "aside: \A 150px固定";
      white-space: pre;
    }
    @media screen and (max-width: 736px) {
      &::after {
        content: "aside: \A block layout";
      }
    }
  }
  & .footer_0 {
    grid-area: 3 / 1 / 4 / 3;
  }
}

container-type プロパティ

インナー幅を超えるネガディブマージン

inline-size : コンテナ要素インライン軸（normalで横）
size : コンテナ要素インライン軸とブロック軸（横縦）
normal : 通常（クエリコンテナではない）
scroll-state : スクロールに基づくさまざまな動きを指定できる（Chrome、Edgeのみ 2025.08時点）

ショートハンド

container: [container-name] / [container-type];

コンテナクエリ単位プロパティ

親コンテナ要素に対する相対的な値。親にcontainer-typeを設定してから使用。

cqw : [幅 : width ] コンテナ要素の %。1cqw = container width 1%。
cqh : [高 : height ] コンテナ要素の %。 1cqh = container height 1%。heightの場合はcontainer-typeも設定しないと反映されない。
cqi : [幅 : width ] コンテナインライン要素の %。1cqi = container inline width 1%。
cqb : [高 : height ] コンテナブロック要素の %。 1cqb = container block height 1%。
cqmin : コンテナインライン要素 or コンテナブロック要素の小さい値の %。
cqmax : コンテナインライン要素 or コンテナブロック要素の大きい値の %。