コンテナで変わる！CSS Container Queriesで作るレスポンシブカード
プロンプト
CSS Container Queries をデモするWebページを作成。カードコンポーネントが親コンテナの幅によってレイアウトを変更する。グリッドに複数のカードを配置し、各カードに画像(プレースホルダー)、タイトル、説明文を含める。コンテナ幅が300px未満で、横並び(画像左、テキスト右)から縦並び(画像上、テキスト下)に切り替わる。container-type: inline-size、@container (max-width: 300px) を使用。CSSカスタムプロパティ、スムーズなトランジションを適用。親コンテナの幅を縮小するトグルボタンを追加し、クエリを発火させる。JSはトグルとコンテナリサイズのみ。
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
CSS Container Queries を使うと、ビューポートではなく親コンテナのサイズに応じて要素のスタイルを変更できます。再利用可能なコンポーネントを様々なレイアウトに適応させるのに最適です。このデモでは、コンテナ幅が300px未満になるとカードが横並びから縦並びに切り替わります。
container-type: inline-size と @container (max-width: 300px) でレイアウトを制御。CSSカスタムプロパティとトランジションを組み合わせてスムーズな変化を実現。グローバルなメディアクエリに頼らないレスポンシブデザインに。
プロンプトの解説
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選