コンテナクエリスニペットジェネレーターとは
コンテナクエリスニペットジェネレーターは、コンポーネントベースのレスポンシブデザイン向けの@container CSSルールを生成します。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Use container queries to style an element based on the size of its parent container instead of the viewport. They are the component-level equivalent of media queries and are useful for reusable widget layouts.
Limitations
- Container queries require Chrome 105+, Edge 105+, Firefox 110+, and Safari 16+. Older browsers ignore the feature entirely.
- The container-name property must reference a container-type ancestor in the DOM. Elements outside the container tree cannot query it.
- Container query units (cqw, cqh, cqi, cqb, cqmin, cqmax) are only meaningful inside a @container block and may produce unexpected values outside one.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。