📦
CSS Container Queries
親コンテナサイズに反応するコンポーネント
メディアクエリはビューポートサイズにのみ反応するため、同じコンポーネントがサイドバーとメイン領域で異なる表示が必要な場合に限界がありました。Container Queriesはcontainer-typeを宣言した親のサイズを基準に@containerルールを適用します。
これにより、再利用可能なコンポーネントが配置場所に関係なく正しく反応する真のコンポーネントベースデザインが可能になります。
適用方法
1
親要素にcontainer-type: inline-sizeを宣言する
2
必要に応じてcontainer-nameで名前を付与する
3
@containerルールでコンテナサイズベースのスタイルを記述する
4
既存のメディアクエリベースのレスポンシブコードと比較し段階的に移行する
メリット
- ✓ コンポーネントが配置位置に独立して反応する
- ✓ メディアクエリ依存度を減らしコードが簡潔になる
デメリット
- ✗ container-typeが新しいフォーマッティングコンテキストを生成しレイアウトに影響しうる
- ✗ ネストされたコンテナクエリのデバッグが難しい場合がある
ユースケース
ダッシュボードウィジェットが配置領域に応じて自動適応
デザインシステムのコンポーネントを様々なコンテキストで再利用