コンテナクエリ単位計算機とは
Container query units work like viewport units but are relative to a query container rather than the viewport. cqi is 1% of the container inline size, cqw is 1% of the container width, cqb is 1% of the container block size, cqmin and cqmax are the min/max of cqi and cqb. They enable component-level responsive sizing where a component adapts to its container, not the browser window.
クイックアンサー
Use container query units (cqi, cqw, cqb, cqmin, cqmax) with clamp() for component-level responsive sizing. They work like viewport units but scale with the parent container width. Set container-type: inline-size on the parent and use the clamp() expression in child styles.
制限事項
- Container query units require container-type to be set on an ancestor. Without an established container context, they fall back to viewport-relative behavior, which can produce values far larger than intended.
- Browser support for container query units matches container query support: Chrome 105+, Firefox 110+, Safari 16+, Edge 105+. Older browsers do not recognize these units at all.
- When multiple container ancestors exist, the nearest ancestor with container-type set is used. This can produce unexpected behavior if a deeply nested component accidentally references a closer container.
使い方
- Enter the minimum and maximum target sizes for your CSS property in pixels.
- Set the container width range — the min container width where the property reaches its minimum, and the max width where it reaches its maximum.
- Choose a container query unit and the CSS property name.
- Copy the clamp() expression and ensure the parent element has container-type: inline-size.
主な用途
- Make a card title font-size scale with the card width instead of the viewport width.
- Create a component padding that adapts to the available container space.
- Build dashboard widgets where every element scales proportionally to the widget container.