CSSコンテナクエリジェネレータ
名前付きコンテナ、ブレークポイントまたはカスタムプロパティ条件、適用するスタイルから @container CSSルール（サイズ、inline-size、またはスタイルクエリ）を生成します。ドラッグでサイズ変更可能なライブプレビューを含みます。
入力
@container <name> (...)を通じてこのコンテナを具体的に対象にします。container-typeが設定されている最も近い祖先に一致する無名コンテナの場合は空白のままにします。
@containerルール内の.cardセレクタでラップされます。これはプレビューで変わる内容です。
出力
Result will appear here.
分離されたShadow DOM内の実際のマークアップ。リサイズハンドルをドラッグ（size/inline-size）するか、トグル（style）を使用して条件を発動させます。
上記のCSSが対象とする.container / .card構造、およびプレビューのリサイズ/トグル機能。
上記のライブプレビューを駆動するもの。上記のCSS、デモカードの基本スタイル、および（スタイルクエリモードの場合）チェックボックス配線。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-container-query-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"containerName": "sidebar",
"containerType": "inline-size",
"conditionType": "min-width",
"minWidthPx": "400",
"maxWidthPx": "700",
"styleProperty": "--theme",
"styleValue": "dark",
"declarations": "display: flex;\n flex-direction: row;\n gap: 1re…"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-container-query-generator` tool (CSS Container Query Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-container-query-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSコンテナクエリジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
何をするツール
CSSコンテナクエリジェネレータは、貼り付け可能な @container ルールを構築します。これはコンポーネントがブラウザのビューポートではなく、コンテナ 自体のサイズ（またはカスタムプロパティ）に基づいて自身のスタイルを変更できるようにする CSS です。コンテナタイプを選択し、ブレークポイントまたはカスタムプロパティ条件を設定し、条件が一致したときに適用されるべきスタイルを入力します。オプションを変更すると、ライブプレビューがリアルタイムで更新されます。サンプルコンテナのリサイズハンドルをドラッグしてサイズ/inline-sizeクエリを試すか、スタイルクエリのためのチェックボックスを切り替えます。
コンテナクエリとは何か
メディアクエリはビューポートのみを見ます。コンテナクエリは、要素が自身の最も近い コンテインメント文脈 のサイズに応答することを可能にします。つまり、同じカードコンポーネントが広いサイドバーでは一つの方法でレイアウトされ、狭い列に詰め込まれたときは別の方法でレイアウトされることができ、これはスクリーンの全体的なサイズに関係なく機能します：
.container {
container-type: inline-size;
container-name: sidebar;
}
@container sidebar (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}container-type は要素をコンテインメントにオプトイン（inline-size は幅のみ、size は幅と高さ）し、container-name はオプションで、container-type が設定されている最も近い祖先の代わりに、このコンテナを名前で指定することができます。
3つのコンテナタイプ
- Inline-size — 最も一般的な選択肢。インラインアクシス（横書きモードでは幅）のみにコンテインメントを確立するため、
min-width/max-width条件でクエリできます。 - Size — 両方のアクシスでコンテインメントを確立するため、高さベースの条件も可能になります。コンテナが明示的な高さまたは制限された高さを持つ必要があります。高さが自動のコンテナはサイズコンテインメントができません。
- Style — 寸法ではなくカスタムプロパティの値をクエリします（
style(--prop: value)経由）。container-type: sizeまたはinline-sizeを必要としません。すべてのコンテナはスタイルクエリコンテキストを確立します。ツリーの上の方で設定されたテーマまたは状態変数に基づいて再スタイルする必要があるコンポーネントに役立ちます。
使い方
- オプションでコンテナを命名します。コンテインメントが設定されている最も近い祖先と一致する無名コンテナの場合は、空白のままにします。
- コンテナタイプ を選択します。
- Inline-size/Size の場合、条件（min-width、max-width、または min+max 範囲）を選択し、ブレークポイントをピクセル単位で設定します。Style の場合、カスタムプロパティ名と、一致させるべき値を設定します。
- 条件が一致したときに適用されるスタイルを入力します。これらはプレビューと同じように、
@containerブロック内の.cardセレクタで囲まれます。flex または grid ルール自体の構築に関するヘルプが必要ですか？ CSSフレックスボックスジェネレータ または CSSグリッドジェネレータ を試して、結果をここに貼り付けます。 - CSS と、プレビューの構造を再利用したい場合はデモマークアップをコピーし、
.cardセレクタを自分のコンポーネントと一致するように調整します。
FAQ
@media と異なり、@container ルールになぜセレクタが必要なのですか？
メディアクエリはビューポートについてのみ関係するため、そのボディは単純な宣言を保持できます。コンテナクエリは要素自体のサイズについて関係します。その要素は切り替えるプロパティを持たないかもしれません。そのため、ブラウザはブロック内にセレクタが必要で、何を再スタイルするかを知る必要があります。
size コンテインメントが要素で機能しないのはなぜですか？
container-type: size は要素が確定した高さ（または aspect-ratio）を持つ必要があります。それなしでは、ブラウザはサイズコンテインメントを確立できず、クエリは一致しません。高さが固定されていない場合は、inline-size に切り替えてください。
サイズ条件とスタイル条件を組み合わせることはできますか？
1つの @container ルールではできません。このツールの条件がターゲットとしている方を選んでから、両方が必要な場合は、手動で2番目の @container ブロックをネストしてください。
このツールは何かを保存またはアップロードしますか？ いいえ。ライブプレビューを含むすべては、ブラウザでローカルに実行されます。入力したものは何もデバイスを離れることはありません。
代わりにビューポートベースのブレークポイントが必要な場合は？ CSSメディアクエリジェネレータ を使用してください。同じ考え方ですが、要素のコンテナではなくブラウザのビューポートにキーがされています。