👑
このクエストはプレミアム限定です
プレミアムプランにアップグレードすると、すべてのクエストが
解放されます！
プレミアムにアップグレード
← クエスト一覧へ戻る
← クエスト一覧
スムーススクロールの実装
スライド
1
/
1
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌐 Web開発総合
/
Quest 7
/ 10
スムーススクロールの実装
応用
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
ナビのリンクをクリックすると各セクションへスムーズスクロールするようにしよう！
📖 解説を見る
ナビゲーションリンクをクリックすると、ページ内の対応するセクションへスムーズにスクロールする機能を実装します。
ヒントを見る
CSS の scroll-behavior: smooth; または JS の scrollIntoView({behavior: "smooth"}) を使おう！
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
style.css
script.js
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Smooth Scroll</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> </nav> <section id="section1"><h2>Section 1</h2><p>ここがセクション1です。</p></section> <section id="section2"><h2>Section 2</h2><p>ここがセクション2です。</p></section> <section id="section3"><h2>Section 3</h2><p>ここがセクション3です。</p></section> <script src="script.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: sans-serif; } nav { position: sticky; top: 0; background: #1e1b4b; padding: 16px 32px; display: flex; gap: 24px; } nav a { color: white; text-decoration: none; } nav a:hover { color: #a5b4fc; } section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; } #section1 { background: #ede9fe; } #section2 { background: #dbeafe; } #section3 { background: #d1fae5; } section h2 { font-size: 2rem; color: #1e1b4b; margin-bottom: 16px; }
// CSS の scroll-behavior: smooth だけで動く！ // さらに JS でも制御したい場合： 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: ナビにアクティブなリンクのスタイルを追加してみよう（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
