コンテナで変わる！CSS Container Queriesで作るレスポンシブカード
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
CSS Container Queries をデモするWebページを作成。カードコンポーネントが親コンテナの幅によってレイアウトを変更する。グリッドに複数のカードを配置し、各カードに画像(プレースホルダー)、タイトル、説明文を含める。コンテナ幅が300px未満で、横並び(画像左、テキスト右)から縦並び(画像上、テキスト下)に切り替わる。container-type: inline-size、@container (max-width: 300px) を使用。CSSカスタムプロパティ、スムーズなトランジションを適用。親コンテナの幅を縮小するトグルボタンを追加し、クエリを発火させる。JSはトグルとコンテナリサイズのみ。
CSS Container Queries を使うと、ビューポートではなく親コンテナのサイズに応じて要素のスタイルを変更できます。再利用可能なコンポーネントを様々なレイアウトに適応させるのに最適です。このデモでは、コンテナ幅が300px未満になるとカードが横並びから縦並びに切り替わります。
container-type: inline-size と @container (max-width: 300px) でレイアウトを制御。CSSカスタムプロパティとトランジションを組み合わせてスムーズな変化を実現。グローバルなメディアクエリに頼らないレスポンシブデザインに。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選