主要ブラウザでの互換性はどうですか？

CSSコンテナクエリの出力はChrome、Safari、Firefox、Edgeの最新版で動作します。古いブラウザ対応が必要な場合はCaniuse.comで各プロパティの対応状況を確認してください。

対応しているブラウザは？

Chrome、Safari、Firefox、Edgeなど主要モダンブラウザの最新版で動作確認しています。Internet Explorerや極端に古いバージョンは対象外です。

デザイン・CSS無料登録不要

CSSコンテナクエリ

CSSのcontainer queriesの書き方とユースケースを解説する無料オンラインツール。

Input

Result

--- 基本の書き方 ---
.parent {
  container-type: inline-size;
  container-name: card;
}

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

--- container-type ---
normal        コンテナクエリ無効 (デフォルト)
size          幅と高さの両方で判定
inline-size   インライン方向(通常は幅)で判定

--- 名前なしでもOK ---
.parent { container-type: inline-size; }

@container (min-width: 300px) {
  .child { font-size: 1.2rem; }
}

--- メディアクエリとの違い ---
@media     → ビューポート(画面)のサイズで判定
@container → 親コンテナのサイズで判定

--- ブラウザ対応 ---
Chrome 105+, Firefox 110+, Safari 16+
すべてのモダンブラウザで利用可能

FAQ

よくある質問

はい。CSSコンテナクエリはレスポンシブ対応しており、iPhone・Android・タブレット・PCなど、モダンなブラウザを搭載した端末であればどこからでも利用できます。

こちらもおすすめ

Flexコンテナプロパティ

Flexコンテナプロパティを表示する無料オンラインツール。Flexコンテナプロパティをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

Gridコンテナプロパティ

Gridコンテナプロパティを表示する無料オンラインツール。Gridコンテナプロパティをブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

CSSメディアクエリ集

レスポンシブデザインに使う主要なCSSメディアクエリのテンプレート集。コピペで使える無料オンラインツール。

CSS角度単位

CSS角度単位を表示する無料オンラインツール。CSS角度単位をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...