container-type

container-type プロパティは、以下のリスト内の 1 つの値、または 2 つの値（そのうちの 1 つは scroll-state で、もう 1 つは inline-size または size）を指定できます。言い換えれば、要素は、サイズクエリーコンテナー、スクロール状態クエリーコンテナー、その両方、またはどちらでもないものとして設定できます。

inline-size

コンテナーのインライン軸上のサイズクエリー用のクエリーコンテナーを確立します。 要素にレイアウト、スタイル、インラインサイズ抑制を適用します。

インラインサイズ抑制が要素に適用されます。要素のインラインサイズは、子要素を無視して単独で計算することができます （CSS コンテナーの使用を参照してください）。

normal

この要素はコンテナーサイズクエリーのクエリーコンテナーではありませんが、コンテナースタイルクエリーのクエリーコンテナーであることに変わりはありません。

scroll-state

コンテナーのスクロール状態クエリー用のクエリコンテナーを設定します。この場合、要素のサイズは単独で計算されず、抑制は適用されません。

size

インラインおよびブロックの両方の寸法で コンテナーサイズクエリーのためのクエリー コンテナーを確立します。 コンテナーにレイアウト抑制、スタイル抑制、サイズ抑制を適用します。

サイズ抑制は、インライン方向とブロック方向の両方で要素に適用されます。要素のサイズは、子要素を無視して単独で計算できます。

container-type = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]  

コンテナークエリーを使用すると、コンテナーに対して実行される条件付きクエリーに基づいて、コンテナー内にスタイルを選択的に適用することができます。 @container アットルールは、コンテナーに対して実行されるテスト、およびクエリーの返値が true の場合にコンテナーのコンテンツに適用されるルールを指定するために使用されます。

コンテナークエリーは、要素をサイズまたはスクロール状態のコンテナー、あるいはその両方として定義する container-type プロパティを持つ要素に対してのみ実行されます。

コンテナーサイズクエリーを使用すると、最大または最小のサイズ、アスペクト比、向きなどのサイズ条件に基づいて、コンテナーの子孫に CSS ルールを選択的に適用することができます。

サイズコンテナーには、さらにサイズ抑制が適用されます。これにより、要素がそのコンテンツからサイズ情報を取得できなくなります。これは、無限ループを避けるためにコンテナークエリーにとって重要です。そうしないと、コンテナークエリー内の CSS ルールによってコンテンツのサイズが変更され、その結果、クエリーの評価が false になり、親要素のサイズが変更され、その結果、コンテンツのサイズが変更され、クエリーの評価が再び true になり、というように無限ループに陥ってしまいます。この連鎖は、無限ループとして繰り返されます。

コンテナーのサイズは、親要素の全幅に拡大するブロックレベル要素など、コンテキストによって設定するか、明示的に定義する必要があります。コンテキストによるサイズや明示的なサイズを利用できない場合、サイズが抑制されている要素は折りたたまれます。

コンテナースクロール状態クエリーを使用すると、次のようなスクロール状態の条件に基づいて、コンテナーの子要素に CSS ルールを選択的に適用することができます。

• コンテナーのコンテンツが部分的にスクロールされているかどうか。
• コンテナーがスクロールスナップコンテナーにスナップされているスナップターゲットであるかどうか。
• コンテナーが position: sticky によって位置指定され、スクロールコンテナーの境界に貼り付いているかどうか。

最初のケースでは、クエリーの対象となるコンテナーはスクロールコンテナーそのものです。他の 2 件の場合、クエリーの対象となるコンテナーは、親スクロールコンテナーのスクロール位置の影響を受ける要素です。

次の HTML の例には、画像、タイトル、テキストを持つカード部品があります。

<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

コンテナーコンテキストを作成するには、要素に container-type プロパティを追加します。以下は、 inline-size 値を使用してコンテナーのインライン軸のコンテナーコンテキストを作成しています。

.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

コンテナークエリーを @container アットルールで書くと、コンテナーの横幅が 400px を超える場合に、コンテナーの要素にスタイルが適用されます。

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

• CSS コンテナークエリー
• コンテナーのサイズおよびスタイルクエリーの使用
• コンテナーのスクロール状態クエリーの使用
• @container アットルール
• CSS container 一括指定プロパティ
• CSS container-name プロパティ
• CSS content-visibility プロパティ