本文へ移動

k8o

お問い合わせ

255文字以内で入力してください

GitHub Issueからのお問い合わせもお待ちしております。

← Playgrounds一覧に戻る
CSSデモ1件

Name-only container queries

@containerに名前だけを書き、その名前のコンテナの中にある要素へスタイルを当てるCSSの書き方です。

Playground

コンテナの名前でカードのレイアウトを切り替える

親のcontainer-nameをラジオで切り替えると、中のカードに当たる@containerのブロックが変わる様子を確認できます。

親のcontainer-nameの値

親 (container-name: none)

k8o

Webフロントエンドのエンジニアです。

カードのスタイルは@container sidebarと@container footerに分けて書いてあり、親の名前と一致したほうが当たります。カードのクラスは変えていません。