Flexboxレスポンシブカードギャラリー
プロンプト
Flexboxを使用して、画面サイズに基づいて自動的にレイアウトを調整するレスポンシブカードギャラリーを作成します。カードは同じ高さ、適切な間隔を保ち、整列を維持する必要があります。ホバー効果と、カテゴリ別にカードを表示/非表示にするフィルター機能を含めてください。
CODE PREVIEW
このコードをAIが指示通りに書き換えます。プレビューは無料、コードのコピー・ダウンロードは¥100で解放されます。
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
このチュートリアルでは、Flexboxを使用したレスポンシブカードギャラリーを紹介します。レイアウトは画面サイズに基づいて自動的に調整され、モバイルでは1列、タブレットでは2列、デスクトップでは3列で表示されます。各カードはflexboxプロパティを通じて同じ高さを維持し、整列された見た目を保証します。
フィルター機能により、ユーザーはカテゴリ（Web、Design、Mobile）ごとにカードを表示/非表示にできます。フィルタリング時には、カードがスムーズにフェードアウトして縮小し、選択時にはフェードインします。ホバー効果は、わずかな浮き上がりと影の変化で視覚的なフィードバックを提供します。
使用されている主要なFlexboxプロパティは次の通りです：display: flex、flex-wrap: wrap、flex: 1 1 300px（伸長、縮小、基準）、justify-content: center。段落要素のflex-grow: 1により、コンテンツの長さに関わらずカードの高さが均等になります。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選