👑
このクエストはプレミアム限定です
プレミアムプランにアップグレードすると、すべてのクエストが
解放されます！
プレミアムにアップグレード
← クエスト一覧へ戻る
← クエスト一覧
クエスト10：総合問題（商品カード）
スライド
1
/
3
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌊 Tailwind CSS基礎
/
Quest 10
/ 10
クエスト10：総合問題（商品カード）
発展
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
コメントのヒントを見ながら、各要素に適切な Tailwind クラスを追加して商品カードを完成させよう！
📖 解説を見る
🏆 Tailwind CSS 総合問題
ここまで学んだ技術を使って
商品カードコンポーネント
を完成させよう！
• 角丸・影・overflow-hidden → カード全体
• グラデーション背景 → 画像エリア
• padding・spacing → コンテンツエリア
• flex justify-between → 価格とボタン
• hover: + transition → インタラクション
ヒントを見る
カード外枠: bg-white rounded-xl shadow-lg overflow-hidden max-w-sm。画像: bg-gradient-to-br from-blue-400 to-purple-500 h-48 flex items-center justify-center
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50 p-6 font-sans"> <!-- 総合問題：商品カードをTailwindで完成させよう！ --> <!-- ヒントのクラスをそれぞれの要素に追加していこう --> <!-- カードコンテナ: bg-white rounded-xl shadow-lg overflow-hidden max-w-sm hover:shadow-2xl transition duration-300 --> <div> <!-- 画像エリア: bg-gradient-to-br from-blue-400 to-purple-500 h-48 flex items-center justify-center --> <div> <!-- アイコン: text-white text-6xl --> <span>🛍️</span> </div> <!-- コンテンツ: p-6 --> <div> <!-- カテゴリ: text-xs font-semibold text-blue-500 uppercase tracking-wider mb-1 block --> <span>ファッション</span> <!-- 商品名: text-xl font-bold text-gray-800 mb-2 --> <h2>プレミアムTシャツ</h2> <!-- 説明文: text-gray-500 text-sm mb-4 --> <p>上質な素材を使った快適な着心地。カジュアルからビジネスまで幅広く対応。</p> <!-- 価格＋ボタン行: flex justify-between items-center --> <div> <!-- 価格: text-2xl font-bold text-gray-900 --> <span>¥3,980</span> <!-- ボタン: bg-blue-500 text-white text-sm font-bold px-4 py-2 rounded-full hover:bg-blue-700 transition duration-200 --> <button>カートに追加</button> </div> </div> </div> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
🏆
Tailwind CSS基礎コース 完全制覇！
全クエストをクリアしました！すごい！
🗺️ クエスト一覧へ
Xでシェア
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
