BMI計算機を作ろう

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

HTMLファイルを作ろう

身長・体重の入力欄、計算ボタン、結果表示エリアを配置しましょう。

💡 ヒント
index.html, style.css, script.js を作成します。身長・体重の入力欄と計算ボタンを配置します。
📝 模範解答を見る

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>BMI計算機</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app">
    <h1>⚖️ BMI計算機</h1>
    <div class="form-group">
      <label>身長（cm）</label>
      <input type="number" id="height" placeholder="例: 165">
    </div>
    <div class="form-group">
      <label>体重（kg）</label>
      <input type="number" id="weight" placeholder="例: 55">
    </div>
    <button id="calc-btn">計算する</button>
    <div id="result" class="result" style="display:none;"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>
2

入力値を取得しよう

計算ボタンのクリックイベントで、身長と体重の値を数値として取得しましょう。

💡 ヒント
getElementById で input 要素を取得し、.value で値を取り出します。Number() で数値に変換しましょう。

参考: JS レッスン2: 変数とデータ型

📝 模範解答を見る

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

const heightInput = document.getElementById("height");
const weightInput = document.getElementById("weight");
const calcBtn = document.getElementById("calc-btn");
const resultEl = document.getElementById("result");

calcBtn.addEventListener("click", function() {
  const h = Number(heightInput.value);
  const w = Number(weightInput.value);
});
3

BMIを計算しよう

BMIの計算式を書きましょう。身長は cm → m に変換してから計算します。

💡 ヒント
BMI = 体重(kg) ÷ 身長(m) ÷ 身長(m) です。cm を m に変換するには 100 で割ります。toFixed(1) で小数第1位まで表示します。
📝 模範解答を見る

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

// クリックイベント内に追加
const heightM = h / 100;
const bmi = (w / (heightM * heightM)).toFixed(1);
4

判定結果を表示しよう

BMIの値に応じて判定結果を表示しましょう。

💡 ヒント
BMI 18.5未満は「やせ型」、18.5〜25未満は「普通体重」、25以上は「肥満」と判定します。

参考: JS レッスン3: 条件分岐

📝 模範解答を見る

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

// クリックイベント内に追加
let label;
if (bmi < 18.5) {
  label = "やせ型";
} else if (bmi < 25) {
  label = "普通体重";
} else {
  label = "肥満";
}
resultEl.style.display = "block";
resultEl.innerHTML = '<p class="bmi">' + bmi + '</p><p class="label">' + label + '</p>';
5

入力チェックを追加しよう

身長や体重が未入力・0以下の場合にエラーメッセージを出しましょう。

💡 ヒント
値が0以下や空の場合はエラーメッセージを表示して return します。
📝 模範解答を見る

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

// クリックイベントの最初に追加
if (!h || !w || h <= 0 || w <= 0) {
  resultEl.style.display = "block";
  resultEl.innerHTML = '<p style="color:#ff6b6b;">正しい値を入力してください</p>';
  return;
}
6

CSSでデザインを整えて完成！

CSSでフォームと結果表示を整えて完成です！

💡 ヒント
カードを中央配置し、結果エリアに背景色をつけてBMI値を大きく表示します。
📝 模範解答を見る

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

* { 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: 32px; width: 340px; text-align: center; }
h1 { font-size: 1.3rem; color: #333; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; text-align: left; }
label { font-size: 14px; font-weight: bold; color: #555; }
input { width: 100%; padding: 10px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 16px; margin-top: 4px; }
button { width: 100%; padding: 12px; border: none; border-radius: 8px; background: #3a86ff; color: #fff; font-size: 16px; cursor: pointer; }
.result { margin-top: 20px; padding: 16px; border-radius: 12px; background: #f0f9ff; }
.bmi { font-size: 2rem; font-weight: bold; color: #3a86ff; }
.label { font-size: 14px; color: #555; margin-top: 4px; }
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら