CSS Container Queriesを使ってみる
同じカードをメインカラムとサイドバーで使うと、画面幅は変わっていないのに、置かれた場所の幅によって窮屈に見えることがあります。Media Queriesだけでは画面全体の幅しか見られず、コンポーネント側で配置先に合わせるのが難しい場面です。
そこで、親要素のサイズを基準にスタイルを切り替えるContainer Queriesを使い、カード自身が利用できる幅へ応じる方法を確認します。
Container Queriesとは
Container Queriesは、ビューポートではなく親要素のサイズに応じてスタイルを切り替えるCSSの機能です。
例えば同じカードをメインカラムとサイドバーの両方で使う場合、カードが置かれた領域の幅に合わせてレイアウトを変更できます。コンポーネント自身にレスポンシブな振る舞いを持たせられるのが特徴です。
Media Queriesとの違い
Media Queriesは、主に画面やビューポートの幅を基準にします。
@media (min-width: 768px) {
.card {
display: flex;
}
}一方、Container Queriesが基準にするのは指定したコンテナです。そのため、画面が広くてもサイドバー内では縦並び、コンテンツ領域で十分な幅があれば横並び、といった制御ができます。
container-typeを指定する
まず、サイズを監視したい親要素にcontainer-typeを指定します。inline-sizeは、主に横幅を基準としたクエリーを有効にする値です。
.card-wrapper {
container-type: inline-size;
}コンテナが複数ある場合は、container-nameも指定すると対象を分かりやすくできます。
.card-wrapper {
container-name: card-area;
container-type: inline-size;
}@containerでスタイルを切り替える
次に@containerを使い、コンテナの幅が400px以上になったときだけカードを横並びにします。
.card {
display: grid;
gap: 16px;
}
@container card-area (min-width: 400px) {
.card {
grid-template-columns: 160px 1fr;
align-items: center;
}
}この指定なら、.card-wrapperの幅が400px未満のときは縦並び、400px以上のときは画像とテキストが横並びになります。
コンポーネント設計で便利な場面
Container Queriesは、次のような再利用するUIに向いています。
- 設置場所によって幅が変わるカード
- グリッドの列数に応じて表示を変えたい商品一覧
- サイドバーとメイン領域の両方で使うパネル
- 複数のカラム構成に組み込むウィジェット
ページ全体のレイアウトはMedia Queries、内部で再利用するUIはContainer Queriesというように使い分けると、スタイルの責務を整理しやすくなります。
Container Queriesを活用し、置かれる場所に自然に適応できるコンポーネントを作ってみてください。
今回は以上です。