👑
このクエストはプレミアム限定です
プレミアムプランにアップグレードすると、すべてのクエストが
解放されます！
プレミアムにアップグレード
← クエスト一覧へ戻る
← クエスト一覧
レスポンシブデザイン
スライド
1
/
1
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌐 Web開発総合
/
Quest 8
/ 10
レスポンシブデザイン
応用
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
画面幅が768px以下のときにカードを縦並びにしよう！
📖 解説を見る
メディアクエリを使って、スマートフォンやタブレットでも見やすいレスポンシブデザインを実装します。
ヒントを見る
@media (max-width: 768px) { .cards { flex-direction: column; } } を使おう！
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
style.css
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive</title> <link rel="stylesheet" href="style.css"> </head> <body> <header><h1>My Site</h1></header> <div class="cards"> <div class="card"><h2>Card 1</h2><p>モバイルでは縦並びになります。</p></div> <div class="card"><h2>Card 2</h2><p>メディアクエリで切り替え！</p></div> <div class="card"><h2>Card 3</h2><p>レスポンシブデザイン。</p></div> </div> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; } header { background: #4f46e5; color: white; padding: 16px 24px; } .cards { display: flex; gap: 16px; padding: 24px; } .card { flex: 1; background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; } /* ここにメディアクエリを追加しよう */
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 1 正解
レッスンに戻る
全問正解でクエストクリア！
未挑戦
問題 1: モバイルでheaderの文字サイズを小さくするメディアクエリを追加しよう（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
