カウンターアプリを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

3つのファイルを作ろう

index.html・style.css・script.js の3ファイルを作成してください。

💡 ヒント
index.html, style.css, script.js を同じフォルダに作ります。HTMLからCSSとJSを読み込みましょう。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>カウンター</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <script src="script.js"></script>
  </body>
</html>
2

HTMLの構造を作ろう

タイトル、カウント表示、3つのボタン（＋1・−1・リセット）のHTMLを書いてください。各要素に id をつけましょう。

💡 ヒント
タイトル（h1）、数字を表示する要素（p に id をつける）、3つのボタン（＋1、−1、リセット）を配置します。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<div class="app">
  <h1>カウンター</h1>
  <p class="count" id="count">0</p>
  <div class="buttons">
    <button class="minus" id="minus-btn">−1</button>
    <button class="reset" id="reset-btn">リセット</button>
    <button class="plus" id="plus-btn">＋1</button>
  </div>
</div>
3

CSSで見た目を整えよう

カードを画面中央に配置し、数字を大きく、ボタンを横並びにするCSSを書いてください。

💡 ヒント
カードを中央揃え（Flexbox）にし、数字を大きく表示します。ボタンは横並び（Flexbox）にしましょう。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

* { box-sizing: border-box; margin: 0; }
body {
  font-family: sans-serif;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.app {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 40px;
  text-align: center;
  width: 300px;
}
h1 { font-size: 1.2rem; color: #333; margin-bottom: 16px; }
.count { font-size: 4rem; font-weight: bold; color: #3a86ff; margin-bottom: 24px; }
.buttons { display: flex; gap: 12px; justify-content: center; }
button {
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
}
.plus { background: #3a86ff; }
.minus { background: #ff6b6b; }
.reset { background: #888; }
4

カウント用の変数を作ろう

script.js に、カウントを管理する変数と、数字を表示する要素の取得を書いてください。

💡 ヒント
let で変数を宣言し、初期値を 0 にします。getElementById で表示要素を取得しておきます。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

// script.js
let count = 0;
const display = document.getElementById("count");
5

＋1ボタンの処理を書こう

＋1ボタンをクリックしたとき、カウントを1増やして画面に反映する処理を書いてください。

💡 ヒント
addEventListener で click イベントを登録し、count を1増やして textContent を更新します。

参考: JS レッスン6

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

document.getElementById("plus-btn").addEventListener("click", function() {
  count++;
  display.textContent = count;
});
6

−1ボタンとリセットボタンの処理を書こう

同じ要領で、−1ボタンとリセットボタンの処理を書いてください。

💡 ヒント
−1は count--、リセットは count = 0 にして textContent を更新します。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

document.getElementById("minus-btn").addEventListener("click", function() {
  count--;
  display.textContent = count;
});

document.getElementById("reset-btn").addEventListener("click", function() {
  count = 0;
  display.textContent = count;
});
7

動作確認して完成！

ブラウザで開いて、3つのボタンすべてが正しく動くか確認しましょう。

💡 ヒント
3つのボタンすべてが正しく動くか確認しましょう。動かない場合は、コンソール（F12）でエラーを確認してください。
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

完成！3つのボタンが正しく動作すればOKです。

⚠️ よくある間違い：
・getElementById の id 名が HTML と一致していない
・addEventListener の綴りミス
・script タグが body の閉じタグの前にない
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら