👑
このクエストはプレミアム限定です
プレミアムプランにアップグレードすると、すべてのクエストが
解放されます！
プレミアムにアップグレード
← クエスト一覧へ戻る
← クエスト一覧
ボタンのインタラクション
スライド
1
/
1
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
🌐 Web開発総合
/
Quest 6
/ 10
ボタンのインタラクション
応用
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
＋ボタンで数字が増え、−ボタンで減るカウンターを作ろう！
📖 解説を見る
ボタンクリックでカウンターを増減させるインタラクティブなUIをJavaScriptで実装します。
ヒントを見る
document.getElementById で要素を取得し、addEventListener でクリックイベントを登録しよう！
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
style.css
script.js
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Counter</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="counter-wrap"> <h1>カウンター</h1> <div class="counter"> <button id="btn-minus">−</button> <span id="count">0</span> <button id="btn-plus">＋</button> </div> <button id="btn-reset">リセット</button> </div> <script src="script.js"></script> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; background: #f0f4ff; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .counter-wrap { text-align: center; } h1 { color: #4f46e5; margin-bottom: 32px; font-size: 2rem; } .counter { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; } .counter button { width: 56px; height: 56px; font-size: 24px; background: #4f46e5; color: white; border: none; border-radius: 50%; cursor: pointer; } .counter button:hover { background: #4338ca; } #count { font-size: 3rem; font-weight: bold; min-width: 80px; color: #1e1b4b; } #btn-reset { padding: 8px 24px; background: #6b7280; color: white; border: none; border-radius: 8px; cursor: pointer; }
let count = 0; // ここにイベントリスナーを追加しよう
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 1 正解
レッスンに戻る
全問正解でクエストクリア！
未挑戦
問題 1: カウンターが0未満にならないようにしよう（自由回答）
index.html
style.css
実行 / プレビュー更新
🖼 プレビュー
実行結果
実行できたよ！
もう一度チャレンジ！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
