👑
このクエストはプレミアム限定です
プレミアムプランにアップグレードすると、すべてのクエストが
解放されます！
プレミアムにアップグレード
← クエスト一覧へ戻る
← クエスト一覧
総合問題：ランディングページを完成させる
スライド
1
/
2
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌐 Web開発総合
/
Quest 10
/ 10
総合問題：ランディングページを完成させる
発展
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
ヘッダー・ヒーロー・機能紹介カード・フッターを含む1ページサイトを完成させよう！
📖 解説を見る
これまでの技術を全て使って、簡単なランディングページを完成させましょう。ヘッダー・ヒーロー・カードセクション・フォーターを作ります。
ヒントを見る
これまでのクエストで作ったコードを組み合わせよう！
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
style.css
script.js
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Landing Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- ヘッダー --> <header> <div class="logo">MyApp</div> <nav> <a href="#features">Features</a> <a href="#contact">Contact</a> </nav> </header> <!-- ヒーローセクション --> <section class="hero" id="home"> <h1>Welcome to MyApp</h1> <p>素晴らしいプロダクトをお届けします</p> <button class="btn" onclick="alert('始めましょう！')">Get Started</button> </section> <!-- 機能紹介 --> <section class="features" id="features"> <h2>Features</h2> <div class="cards"> <!-- ここにカードを3つ追加しよう --> </div> </section> <!-- フッター --> <footer> <p>© 2024 MyApp. All rights reserved.</p> </footer> <script src="script.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: sans-serif; color: #1e1b4b; } /* ヘッダー */ header { position: sticky; top: 0; background: #1e1b4b; color: white; padding: 16px 32px; display: flex; justify-content: space-between; align-items: center; z-index: 100; } .logo { font-size: 22px; font-weight: bold; color: #a5b4fc; } nav a { color: white; text-decoration: none; margin-left: 24px; } nav a:hover { color: #a5b4fc; } /* ヒーロー */ .hero { min-height: 80vh; background: linear-gradient(135deg, #1e1b4b, #4338ca); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; } .hero h1 { font-size: 3rem; margin-bottom: 16px; } .hero p { font-size: 1.2rem; margin-bottom: 32px; color: #c7d2fe; } /* ボタン */ .btn { padding: 14px 32px; background: #6366f1; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: transform 0.2s; } .btn:hover { transform: translateY(-2px); background: #4f46e5; } /* 機能セクション */ .features { padding: 80px 32px; background: #f8fafc; text-align: center; } .features h2 { font-size: 2rem; margin-bottom: 40px; color: #1e1b4b; } .cards { display: flex; gap: 24px; max-width: 900px; margin: 0 auto; } .card { flex: 1; background: white; border-radius: 16px; padding: 32px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .card h3 { color: #4f46e5; margin-bottom: 12px; } /* フッター */ footer { background: #1e1b4b; color: #a5b4fc; text-align: center; padding: 32px; } @media (max-width: 768px) { .cards { flex-direction: column; } .hero h1 { font-size: 2rem; } }
// スムーススクロール document.querySelectorAll("nav a").forEach(function(link) { link.addEventListener("click", function(e) { e.preventDefault(); const target = document.querySelector(this.getAttribute("href")); if (target) target.scrollIntoView({ behavior: "smooth" }); }); });
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 1 正解
レッスンに戻る
全問正解でクエストクリア！
未挑戦
問題 1: カードに画像アイコン（絵文字でもOK）を追加してみよう（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
🏆
Web開発総合コース 完全制覇！
全クエストをクリアしました！すごい！
🗺️ クエスト一覧へ
Xでシェア
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
