`container-type` プロパティ (CSS)

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年2月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルにばらつきがある場合があります。

完全な互換性情報を見る
もっと詳しく

container-type は CSS のプロパティで、コンテナークエリーで使用されるコンテナーコンテキストの種類を指定します。

構文

css

/* キーワード値 */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;
container-type: anchored;

/* 2 つの値 */
container-type: size scroll-state;

/* グローバル値 */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

値

このプロパティは、以下のリストから 1 つまたは 2 つのキーワード値を指定します。2 つの値を指定する場合、1 つは scroll-state でなければならず、もう 1 つは inline-size または size でなければなりません。

anchored: そのコンテナー内で、アンカー付きコンテナークエリー用のクエリコンテナーを確立します。この場合、要素のサイズは独立して計算されるわけではなく、抑制は適用されません。
inline-size: コンテナーのインライン軸上のサイズクエリー用のクエリーコンテナーを確立します。要素にスタイル抑制とインラインサイズ抑制を適用します。要素のインラインサイズは、子要素を無視して単独で計算することができます（CSS コンテナーの使用を参照してください）。
normal: この要素はコンテナーサイズクエリー、スクロール状態クエリー、アンカークエリーのクエリーコンテナーではありませんが、コンテナースタイルクエリーおよび名前のみのコンテナークエリーのクエリーコンテナーであることに変わりはありません。
scroll-state: コンテナーのスクロール状態クエリー用のクエリコンテナーを設定します。この場合、要素のサイズは単独で計算されず、抑制は適用されません。
size: インラインおよびブロックの両方の寸法でコンテナーサイズクエリーのためのクエリーコンテナーを確立します。コンテナーにスタイル抑制とサイズ抑制を適用します。サイズ抑制は、インライン方向とブロック方向の両方で要素に適用されます。要素のサイズは、子要素を無視して単独で計算できます。

公式定義

初期値	`normal`
適用対象	すべての要素
継承	なし
計算値	指定通り
アニメーションの種類	色

形式文法

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

解説

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

特定の種類のコンテナークエリーは、特定の container-type プロパティの値が設定されている要素に対してのみ実行可能です。このプロパティは、それらのコンテナーに対して特定のコンテナーコンテキストを確立します。

サイズ: 最大または最小サイズ、アスペクト比、方向などの一般的なサイズまたはインラインサイズの条件に基づいて、コンテナーの子に CSS ルールを選択的に適用できるようにします。
スクロール状態: コンテナーが途中までスクロールされているスクロールコンテナーであるかどうか、コンテナーがスクロールスナップコンテナーにスナップされているスナップターゲットであるかどうかなどのスクロール状態の条件に基づいて、コンテナーの子に CSS ルールを選択的に適用できるようにします。
アンカー付き: コンテナーがアンカー位置指定されており、かつ position-try の代替オプションが適用されているかどうかに基づいて、そのコンテナーの子要素に対して CSS ルールを選択的に適用することができるようにします。

コンテナーに container-type が設定されていない場合、その要素はコンテナーサイズ、スクロール状態、またはアンカー付きクエリーのクエリーコンテナーとはなりませんが、コンテナースタイルクエリーや名前のみのコンテナークエリーのコンテナークエリーとして使用することは可能です。

コンテナーサイズクエリー

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

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

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

メモ: コンテナの子要素のサイズ設定には、コンテナークエリーの長さ単位を使用できます。

コンテナースクロール状態クエリー

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

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

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

アンカー付きコンテナークエリー

アンカー付きコンテナークエリーを使用すると、position-try-fallbacks プロパティで指定された position-try 代替が有効になっている場合、アンカー位置指定されたコンテナーの子要素に対して、CSS ルールを選択的に適用することができます。

例えば、アンカー位置指定されたツールチップ要素があり、position-area の値が top であるためデフォルトでアンカーの上部に配置されているものの、position-try-fallbacks の値として flip-block が指定されている場合を考えます。これにより、ツールチップがビューポートの上端からオーバーフローし始めた際に、ブロック方向に沿って反転し、アンカーの下部に配置されるようになります。これに container-type: anchored を設定すれば、@container アットルールを通じて position-try 代替が適用されたことを検出し、それに応じて CSS を適用することができます。

css

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top;
  position-try-fallbacks: flip-block;
  container-type: anchored;
}

例

インラインサイズ抑制の確立

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

html

<div class="container">
  <div class="card">
    <h3>通常のカード</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>広幅のカード</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 とします。

css

.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 を超える場合に、コンテナーの要素にスタイルが適用されます。

css

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

仕様書

仕様書
CSS Conditional Rules Module Level 5 # container-type
CSS Anchor Positioning Module Level 2 # container-type-anchored

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは 2026年10月27日に MDN の貢献者によって最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

container-type プロパティ (CSS)

MDN の改良に協力

`container-type` プロパティ (CSS)