【コピペで完成】BMI計算ツールの作り方｜HTMLとJavaScriptで始める簡単Web開発入門

「プログラミングって難しそう…」「何から始めればいいか分からない」「自分で何か作ってみたいけど、なんだか敷居が高い…」

そんなふうに感じていませんか？

実は、私のブログでも公開しているBMI計算ツール、あの高機能なツールも、じつは驚くほど簡単に自作できるんです！
この記事では、あの便利なBMI計算ツールを「ほぼコピペ」でゼロから作る方法を、初心者向けに丁寧に解説します。

専門的な知識は必要ありません。HTML・CSS・JavaScriptといったWeb開発の基礎的な技術を、手を動かしながら自然に学ぶことができます。

自分だけのオリジナルツールを作り上げる達成感とともに、開発者としての一歩を踏み出しましょう！

【実際のBMI計算ツールの動作を試してみたい方はこちらからどうぞ】▼

: BMI計算ツール｜肥満度チェック＆理想体重に加え、健康アドバイスも自動表示！
「健康診断の結果を見てドキッとした…」「ダイエットを始めたいけど、目標が曖昧で続かない」そんな体型や健康に関するお悩み、ありませんか？「BMIってよく聞くけど、数字の意味がわからない…」「この体重 ...

実際のツールの完成図があると、イメージが湧いて安心ですね。

ほーく

【機能紹介】BMI計算ツールでできること

今回ご紹介するBMI計算ツールは、ただの数値計算にとどまりません。
健康管理に役立つ情報を一括表示し、使う人の「次の一歩」までサポートしてくれる、初心者にもやさしいツールです。

1. 身長と体重を入力するだけで「BMI」を自動計算

BMI（ボディマス指数）は、体重(kg) ÷ 身長(m)^2 の式で求められます。
小数点以下第2位まで、正確な数値をリアルタイムで算出します。

2. 肥満度の精密判定（日本の基準に準拠）

厚生労働省が定める基準を採用。
「低体重」「普通体重」「肥満（1度〜4度）」など、体型カテゴリをわかりやすく表示します。

3. 健康的な「標準体重（BMI22）」を自動表示

入力した身長に対して、最も健康的とされるBMI＝22の体重を自動計算。
健康目標の目安として活用できます。

4. 適正体重の範囲（BMI18.5〜25）を表示

「痩せすぎ？太りすぎ？」がすぐわかる！
医学的に望ましいとされる適正体重の範囲を明示します。

5. 【ここが独自！】あなたに合わせた「健康アドバイス」を自動表示

計算されたBMIカテゴリに応じて、具体的な改善アドバイスや注意点を表示。
たとえば「肥満（2度）」なら「適度な運動と食事改善から始めましょう」など、行動につながる実用的なヒントが得られます。

【準備編】開発環境の準備はこれだけ！今すぐ始められる環境を整えよう

「プログラミングって、何か特別なソフトや難しい設定が必要なんでしょ？」
そんなイメージを持っている方も多いかもしれませんが、Webツールの開発は驚くほどシンプルです。
まずは、今回のBMI計算ツールを作るために必要な準備を見ていきましょう。

必要なものはこの4つだけ！

パソコン：WindowsでもMacでもOK。特別なスペックは不要です。
インターネット接続：コードのダウンロードや調べ物に必要です。
テキストエディタ：プログラムを書くためのアプリです。
Webブラウザ：作ったツールの動作確認に使います。

おすすめのテキストエディタ：VS Code

プログラミング初心者に一番おすすめなのが、Visual Studio Code（通称 VS Code）です。

無料で使える
コードが見やすく色分けされる
入力補助やエラー検出機能がある

といった理由から、多くのプロも愛用しています。

まだ持っていない方は、以下のように検索してみてください：
「VS Code インストール方法」

※もちろん、「メモ帳（Windows）」や「テキストエディット（Mac）」でもOKですが、VS Codeの方が断然快適です！

Webブラウザは普段使っているものでOK！

Google Chrome
Microsoft Edge
Safari
など、普段使っているブラウザでそのまま動作確認できます。

作業用フォルダを作成しよう

ファイルを整理するために、デスクトップなど分かりやすい場所に作業用フォルダを作っておきましょう。

例：bmi_tool という名前のフォルダを作成

HTMLファイルを新規作成しよう

bmi_tool フォルダの中に新しいテキストファイルを作成
ファイル名を index.html に変更します

ポイント
拡張子（.html）まで正確に入力しましょう。index.html という名前にすることで、ブラウザで直接開いて表示できるようになります。

これで準備はすべて完了です！

【基礎知識編】たったこれだけ！Webツール開発に必要な3つの言語をざっくり解説

「プログラミングって難しそう…」と思っている方も大丈夫。
今回のBMI計算ツールを作るうえで必要なのは、たった3つの言語の役割をざっくりイメージでつかむことだけです。

それでは、Webページを作るために必要な基本用語をやさしく解説していきます。

HTML（エイチティーエムエル）

役割：Webページの骨組みをつくる言語

見出しや文字、画像、ボタンなど、ページ上の要素を配置する設計図のようなものです。
実際に画面に表示される「中身」をつくります。

例えるなら…
家の「柱」や「壁」を組み立てる作業です。

CSS（シーエスエス）

役割：Webページの見た目を整える言語

HTMLでつくった骨組みに、色・レイアウト・文字の大きさ・余白などを加えて、きれいに装飾します。
Webページを「おしゃれに」「読みやすく」するために必須です。

例えるなら…
家の「壁紙」や「照明」など、内装をデザインするイメージです。

JavaScript（ジャバスクリプト）

役割：Webページに動きを加える言語

「ボタンを押したら計算が始まる」「入力内容をチェックする」など、ページに動きをつけるために使うのがJavaScriptです。
今回のBMI計算も、このJavaScriptで処理を行います。

例えるなら…
家に電気を通したり、スイッチで照明をつけたりする感覚です。

DOM（ドム）ってなに？

役割：JavaScriptからHTMLを操作する仕組み

DOM（Document Object Model）は、Webページの構造を“部品化”して操作できるようにするものです。
たとえば、「このボタンが押されたら、この文字を変える」といったことができるのは、DOMのおかげです。

例えるなら…
HTMLの部品に名前を付けて、JavaScriptで操作できるようにした“指示書”のようなものです。

難しく考えなくてOK！ここで出てきた用語は、今はふわっと理解していれば十分です。
実際にコードを書いていくと、自然に覚えていけるのでご安心ください。

ほーく

【ステップ1】いよいよコードを書こう！〜HTML編〜

いよいよ実践編に入ります！
まずは、BMI計算ツールの画面構成をつくる「HTML（エイチティーエムエル）」から始めましょう。

それでは、先ほど作成したindex.htmlファイルをテキストエディタで開いてください。
そして、以下のコードをすべてコピー＆ペーストで貼り付けてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>あなたの健康をサポート！BMI計算ツール</title>
    <meta name="description" content="身長と体重を入力するだけで、BMIを正確に計算。適正体重や健康アドバイスも提供し、あなたの健康管理をサポートします。">
    <style>
        /* CSSはここに記述します */
    </style>
</head>
<body>
    <div class="container">
        <h1>あなたの健康をサポート！<br>BMI計算ツール</h1>
        <p class="description">身長と体重を入力するだけで、BMI（ボディマス指数）を簡単に計算できます。あなたの健康状態をチェックし、役立つアドバイスと適正体重・標準体重の目安も確認しましょう。</p>

        <div class="input-group">
            <label for="height">身長 <small>(cm)</small></label>
            <input type="number" id="height" placeholder="例: 170.5" min="50" max="300" step="0.1">
        </div>

        <div class="input-group">
            <label for="weight">体重 <small>(kg)</small></label>
            <input type="number" id="weight" placeholder="例: 65.2" min="1" max="500" step="0.1">
        </div>

        <button onclick="calculateBMI()">BMIを計算する</button>

        <div id="result-area">
            <div id="result-title">計算結果</div>
            <div id="result-value-display"></div>
            <div id="category-display"></div>
            
            <div class="weight-info" id="optimal-weight-info">
                <strong>適正体重の目安:</strong> <span class="value" id="optimal-weight-range"></span>
            </div>
            
            <div class="weight-info" id="standard-weight-info">
                <strong>標準体重:</strong> <span class="value" id="standard-weight"></span>
            </div>

            <div id="advice-area">
                </div>
        </div>

    </div>

    <script>
        // JavaScriptはここに記述します
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>あなたの健康をサポート！BMI計算ツール</title>

<style>

/* CSSはここに記述します */

</style>

</head>

<body>

<h1>あなたの健康をサポート！<br>BMI計算ツール</h1>

<p class="description">身長と体重を入力するだけで、BMI（ボディマス指数）を簡単に計算できます。あなたの健康状態をチェックし、役立つアドバイスと適正体重・標準体重の目安も確認しましょう。</p>

</div>

</div>

<button onclick="calculateBMI()">BMIを計算する</button>

<strong>適正体重の目安:</strong> <span class="value" id="optimal-weight-range"></span>

</div>

</div>

</div>

// JavaScriptはここに記述します

</script>

</body>

</html>

ブラウザで開いてみよう！

コードを貼り付けたら、ファイルを保存してください。
次に、index.html ファイルを ダブルクリック するか、Webブラウザにドラッグ＆ドロップして開いてみましょう。

表示を確認！

おそらく、見た目はまだシンプルですが、

入力欄（身長・体重）
ボタン（BMIを計算する）
結果表示スペース

など、BMI計算ツールの「土台」がすでに完成しています！

HTMLコードの簡単な解説

コードを読み解くのが初めての方も安心してください。ここでは、HTMLの主な構成要素をやさしく解説します。

上部の基本設定

<!DOCTYPE html>
　→ このHTMLファイルが「HTML5」で書かれていることを宣言するおまじないです。
<html lang="ja">
　→ このページは「日本語」で書かれていると伝えています。

<head>タグ（ページの基本情報）

<head>
　→ ページの見えない設定（文字コードやタイトルなど）を書く場所です。
<meta charset="UTF-8">
　→ 文字化けを防ぐための設定です。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
　→ スマホでも見やすく表示されるように整えるための設定です。
<title>BMI計算ツール</title>
　→ ブラウザのタブに表示されるタイトルを設定します。
<style>〜</style>
　→ ここにCSS（見た目のデザイン）を記述します。

<body>タグ（ページに表示される内容）

<body>
　→ 実際にブラウザで見える部分（画面の中身）を記述します。
<div class="container">
　→ すべての要素をまとめる「大きな箱」です。CSSでデザインする時に便利です。
<h1>、<p>
　→ それぞれ「見出し」と「段落の文章」を表示します。
<label for="height">
　→ 入力欄の「説明文」です。
<input type="number" id="height">
　→ 数値を入力する欄です。idはJavaScriptからこの欄を操作するために使います。
<button onclick="calculateBMI()">
　→ ボタンです。クリックされると、calculateBMI() という関数が実行されます。
<div id="result-area">
　→ 計算結果を表示するスペースです。ここもidを使ってJavaScriptから操作します。

<script>タグ

<script>
　→ ここにJavaScript（動きをつけるプログラム）を書いていきます。

タグの意味がわかると、組み立てが楽しくなってきますよ。

ほーく

【ステップ2】見た目を整えよう！【CSS編】ツールの「デザイン」をつける

次は、見た目をキレイに整えるCSS（スタイルシート）の出番です！

まずは、先ほどのHTMLコード内にある <style> タグの中に、以下のCSSコードをコピー＆ペーストしてください。

<style>
        /* --- 全体的なスタイル設定 --- */
        body {
            font-family: 'Segoe UI', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
            display: flex;
            justify-content: center; /* 水平方向中央揃え */
            /* align-items: center;  垂直方向中央揃えは削除して上部表示に */
            min-height: 100vh;       
            background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
            color: #333;
        }
        .container {
            background-color: #ffffff;
            padding: 35px 45px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            width: 100%;
            max-width: 500px; /* 少し広げて情報を入れやすく */
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .container::before { /* 装飾用の擬似要素 */
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            width: 150px;
            height: 150px;
            background-color: rgba(0, 123, 255, 0.05);
            border-radius: 50%;
            z-index: 0;
        }
        .container::after { /* 装飾用の擬似要素 */
            content: '';
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 120px;
            height: 120px;
            background-color: rgba(40, 167, 69, 0.05);
            border-radius: 50%;
            z-index: 0;
        }

        /* --- ヘッダー --- */
        h1 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 2.4em;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
        p.description {
            font-size: 1.1em;
            color: #555;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        /* --- 入力グループ --- */
        .input-group {
            margin-bottom: 22px;
            text-align: left;
            position: relative;
            z-index: 1; /* 入力フィールドが装飾の上にくるように */
        }
        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #4a6a8a;
            font-weight: 600;
            font-size: 1em;
            transition: color 0.3s;
        }
        .input-group input {
            width: calc(100% - 24px); /* パディング分を調整 */
            padding: 14px 12px;
            border: 1px solid #c9d8e5;
            border-radius: 10px;
            font-size: 1.15em;
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            -webkit-appearance: none; /* iOSでのデザイン崩れ防止 */
            -moz-appearance: none; /* Firefoxでのデザイン崩れ防止 */
            appearance: none;
        }
        .input-group input:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
            outline: none;
        }
        .input-group input::placeholder {
            color: #b0c4de;
        }

        /* --- ボタン --- */
        button {
            background-color: #007bff;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 10px;
            font-size: 1.2em;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;
            width: 100%;
            margin-top: 20px;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
            position: relative;
            z-index: 1;
        }
        button:hover {
            background-color: #0056b3;
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
        }
        button:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
        }

        /* --- 結果表示エリア --- */
        #result-area {
            margin-top: 35px;
            padding: 25px;
            background-color: #e6f7ff;
            border-radius: 12px;
            border: 1px solid #b3e0ff;
            color: #333;
            font-size: 1.1em;
            display: none; /* 最初は非表示 */
            text-align: left; /* テキストを左寄せに */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            position: relative;
            z-index: 1;
        }
        #result-area.error { /* エラー時のスタイル */
            background-color: #ffe5e5;
            border-color: #ffcccc;
            color: #c00;
        }
        #result-area.normal { /* 普通体重時のスタイル */
            background-color: #e8f7e8;
            border-color: #c8e6c9;
        }
        #result-area.warning { /* 低体重・肥満時のスタイル */
            background-color: #fff8e1;
            border-color: #ffe0b2;
        }
        #result-area.danger { /* 高度肥満時のスタイル */
            background-color: #fce4ec;
            border-color: #f8bbd0;
        }

        #result-title {
            font-size: 1.3em;
            font-weight: bold;
            color: #007bff; /* 結果タイトル色 */
            margin-bottom: 12px;
        }
        #result-value-display {
            font-size: 2.2em; /* BMI値のサイズ */
            color: #0056b3;
            font-weight: 700;
            margin-bottom: 8px;
        }
        #category-display {
            font-size: 1.3em; /* 判定のサイズ */
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        
        .weight-info { /* 適正体重・標準体重の共通スタイル */
            font-size: 0.95em;
            margin-top: 10px;
            color: #666;
            line-height: 1.5;
            border-top: 1px dashed #e0e0e0;
            padding-top: 12px;
        }
        .weight-info:first-of-type { /* 最初のweight-infoの罫線は不要 */
            border-top: none;
            padding-top: 0;
        }
        .weight-info strong {
            color: #007bff;
        }
        .weight-info .value {
            font-size: 1.1em;
            font-weight: bold;
            color: #0056b3;
        }

        #advice-area {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e0e0e0;
        }
        #advice-area p {
            font-size: 0.95em;
            line-height: 1.5;
            color: #555;
            margin-bottom: 10px;
        }
        #advice-area ul {
            padding-left: 20px;
            margin: 0;
            color: #555;
            font-size: 0.9em;
        }
        #advice-area li {
            margin-bottom: 5px;
        }
        

        /* --- フッターへのリンク --- */
        .footer-link {
            margin-top: 35px;
            font-size: 0.9em;
            color: #777;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .footer-link a {
            color: #007bff;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s;
        }
        .footer-link a:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        /* --- レスポンシブ対応 --- */
        @media (max-width: 600px) {
            .container {
                padding: 25px 25px;
                margin: 15px;
            }
            h1 {
                font-size: 2em;
            }
            .input-group input, button {
                font-size: 1em;
                padding: 12px;
            }
            #result-area {
                font-size: 1em;
                padding: 20px;
            }
            #result-value-display {
                font-size: 1.8em;
            }
            #category-display {
                font-size: 1.1em;
            }
            .weight-info {
                font-size: 0.9em;
            }
            .weight-info .value {
                font-size: 1em;
            }
        }
    </style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

<style>

/* --- 全体的なスタイル設定 --- */

body {

font-family: 'Segoe UI', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

display: flex;

justify-content: center; /* 水平方向中央揃え */

/* align-items: center; 垂直方向中央揃えは削除して上部表示に */

min-height: 100vh;

background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);

margin: 0;

padding: 20px;

box-sizing: border-box;

color: #333;

}

.container {

background-color: #ffffff;

padding: 35px 45px;

border-radius: 15px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

width: 100%;

max-width: 500px; /* 少し広げて情報を入れやすく */

text-align: center;

position: relative;

overflow: hidden;

}

.container::before { /* 装飾用の擬似要素 */

content: '';

position: absolute;

top: -50px;

left: -50px;

width: 150px;

height: 150px;

background-color: rgba(0, 123, 255, 0.05);

border-radius: 50%;

z-index: 0;

}

.container::after { /* 装飾用の擬似要素 */

content: '';

position: absolute;

bottom: -50px;

right: -50px;

width: 120px;

height: 120px;

background-color: rgba(40, 167, 69, 0.05);

border-radius: 50%;

z-index: 0;

}

/* --- ヘッダー --- */

h1 {

color: #2c3e50;

margin-bottom: 15px;

font-size: 2.4em;

font-weight: 700;

letter-spacing: -0.5px;

}

p.description {

font-size: 1.1em;

color: #555;

margin-bottom: 30px;

line-height: 1.6;

}

/* --- 入力グループ --- */

.input-group {

margin-bottom: 22px;

text-align: left;

position: relative;

z-index: 1; /* 入力フィールドが装飾の上にくるように */

}

.input-group label {

display: block;

margin-bottom: 8px;

color: #4a6a8a;

font-weight: 600;

font-size: 1em;

transition: color 0.3s;

}

.input-group input {

width: calc(100% - 24px); /* パディング分を調整 */

padding: 14px 12px;

border: 1px solid #c9d8e5;

border-radius: 10px;

font-size: 1.15em;

box-sizing: border-box;

transition: border-color 0.3s ease, box-shadow 0.3s ease;

-webkit-appearance: none; /* iOSでのデザイン崩れ防止 */

-moz-appearance: none; /* Firefoxでのデザイン崩れ防止 */

appearance: none;

}

.input-group input:focus {

border-color: #007bff;

box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);

outline: none;

}

.input-group input::placeholder {

color: #b0c4de;

}

/* --- ボタン --- */

button {

background-color: #007bff;

color: white;

padding: 15px 30px;

border: none;

border-radius: 10px;

font-size: 1.2em;

font-weight: 600;

cursor: pointer;

transition: background-color 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease;

width: 100%;

margin-top: 20px;

box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);

position: relative;

z-index: 1;

}

button:hover {

background-color: #0056b3;

transform: translateY(-3px);

box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);

}

button:active {

transform: translateY(0);

box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);

}

/* --- 結果表示エリア --- */

#result-area {

margin-top: 35px;

padding: 25px;

background-color: #e6f7ff;

border-radius: 12px;

border: 1px solid #b3e0ff;

color: #333;

font-size: 1.1em;

display: none; /* 最初は非表示 */

text-align: left; /* テキストを左寄せに */

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

position: relative;

z-index: 1;

}

#result-area.error { /* エラー時のスタイル */

background-color: #ffe5e5;

border-color: #ffcccc;

color: #c00;

}

#result-area.normal { /* 普通体重時のスタイル */

background-color: #e8f7e8;

border-color: #c8e6c9;

}

#result-area.warning { /* 低体重・肥満時のスタイル */

background-color: #fff8e1;

border-color: #ffe0b2;

}

#result-area.danger { /* 高度肥満時のスタイル */

background-color: #fce4ec;

border-color: #f8bbd0;

}

#result-title {

font-size: 1.3em;

font-weight: bold;

color: #007bff; /* 結果タイトル色 */

margin-bottom: 12px;

}

#result-value-display {

font-size: 2.2em; /* BMI値のサイズ */

color: #0056b3;

font-weight: 700;

margin-bottom: 8px;

}

#category-display {

font-size: 1.3em; /* 判定のサイズ */

font-weight: bold;

margin-bottom: 15px;

color: #333;

}

.weight-info { /* 適正体重・標準体重の共通スタイル */

font-size: 0.95em;

margin-top: 10px;

color: #666;

line-height: 1.5;

border-top: 1px dashed #e0e0e0;

padding-top: 12px;

}

.weight-info:first-of-type { /* 最初のweight-infoの罫線は不要 */

border-top: none;

padding-top: 0;

}

.weight-info strong {

color: #007bff;

}

.weight-info .value {

font-size: 1.1em;

font-weight: bold;

color: #0056b3;

}

#advice-area {

margin-top: 15px;

padding-top: 15px;

border-top: 1px solid #e0e0e0;

}

#advice-area p {

font-size: 0.95em;

line-height: 1.5;

color: #555;

margin-bottom: 10px;

}

#advice-area ul {

padding-left: 20px;

margin: 0;

color: #555;

font-size: 0.9em;

}

#advice-area li {

margin-bottom: 5px;

}

/* --- フッターへのリンク --- */

.footer-link {

margin-top: 35px;

font-size: 0.9em;

color: #777;

text-align: center;

position: relative;

z-index: 1;

}

.footer-link a {

color: #007bff;

text-decoration: none;

font-weight: 600;

transition: color 0.3s;

}

.footer-link a:hover {

color: #0056b3;

text-decoration: underline;

}

/* --- レスポンシブ対応 --- */

@media (max-width: 600px) {

.container {

padding: 25px 25px;

margin: 15px;

}

h1 {

font-size: 2em;

}

.input-group input, button {

font-size: 1em;

padding: 12px;

}

#result-area {

font-size: 1em;

padding: 20px;

}

#result-value-display {

font-size: 1.8em;

}

#category-display {

font-size: 1.1em;

}

.weight-info {

font-size: 0.9em;

}

.weight-info .value {

font-size: 1em;

}

</style>

CSSコードを貼り付けたら、index.htmlを保存し、ブラウザで再読み込みしてみてください。

どうですか？殺風景だったページが、一気にデザイン性のあるツールへと変身したはずです！

CSSコードのやさしい解説

CSSは基本的に

セレクタ { プロパティ: 値; }

という形で書きます。ポイントごとに見ていきましょう。

body
- ページ全体の背景色やフォントを設定
- display: flex; justify-content: center;：中央寄せ
- min-height: 100vh;：画面の高さを常に100%確保
- background: linear-gradient(...)：グラデーションの背景に

.container（ツール全体の枠）
- 背景を白に（background-color: #ffffff;）
- 内側の余白を設定（padding）
- 角を丸く（border-radius）
- 影をつけて立体感（box-shadow）

h1, p.description
- 見出しや説明文の文字サイズ・色・余白などを調整

.input-group input, button
- 入力欄とボタンの見た目を整えます
- padding：ボタンの内側の余白
- border-radius：角を丸く
- transition：マウスを乗せたときのアニメーションをなめらかに

#result-area
- 計算結果を表示する場所
- display: none;：初期状態では非表示 → 計算結果が出たときに表示されます（JavaScriptで制御）

#result-area.normal など
- BMIの判定結果に応じて色や枠線を変更
- 「普通体重」「肥満」などの判定が見た目でパッとわかる工夫です

@media (max-width: 600px)
- スマートフォン対応（レスポンシブデザイン）
- 小さい画面でも文字サイズや余白が崩れないように調整しています

デザイン次第で印象がガラッと変わりますよ！

ほーく

これだけのコードで、オシャレで使いやすいWebツールの見た目が完成します
次は、ツールに動きを加える「頭脳」＝JavaScriptを組み込んでいきましょう！

【ステップ3】ツールを動かそう！【JavaScript編】計算＆アドバイスに「動き」を加える

いよいよ最後のステップです！

今度は、身長と体重をもとにBMIを計算してアドバイスを表示する「頭脳」を組み込みましょう。

HTMLファイルの一番下、</body>タグの直前にある<script>タグの中に、以下のJavaScriptコードをコピー＆ペーストしてください。

<script>
        function calculateBMI() {
            const heightCm = parseFloat(document.getElementById('height').value);
            const weightKg = parseFloat(document.getElementById('weight').value);

            const resultArea = document.getElementById('result-area');
            const resultValueDisplay = document.getElementById('result-value-display');
            const categoryDisplay = document.getElementById('category-display');
            const optimalWeightRangeSpan = document.getElementById('optimal-weight-range');
            const standardWeightSpan = document.getElementById('standard-weight'); 
            const adviceArea = document.getElementById('advice-area');

            // --- 1. 入力値のバリデーションとエラーハンドリング ---
            // まずは表示をリセット
            resultArea.style.display = 'none';
            resultArea.classList.remove('error', 'normal', 'warning', 'danger');
            adviceArea.innerHTML = ''; // アドバイスエリアをクリア
            // エラーメッセージのリセット
            resultValueDisplay.textContent = ''; 
            categoryDisplay.innerHTML = ''; // innerHTMLでリセット

            if (isNaN(heightCm) || isNaN(weightKg) || heightCm <= 0 || weightKg <= 0) {
                resultArea.classList.add('error');
                categoryDisplay.innerHTML = '⚠️ <strong>正しい身長と体重を半角数字で入力してください。</strong>'; // <strong>タグで太字に
                adviceArea.innerHTML = '<p>入力値は正の数である必要があります。例: 身長170.5cm, 体重65.2kg</p>';
                resultArea.style.display = 'block';
                return;
            }
            if (heightCm < 50 || heightCm > 250) { 
                resultArea.classList.add('error');
                categoryDisplay.innerHTML = '⚠️ <strong>身長が一般的な範囲ではありません。</strong>'; // <strong>タグで太字に
                adviceArea.innerHTML = '<p>身長は50cmから250cmの範囲で入力してください。</p>';
                resultArea.style.display = 'block';
                return;
            }
            if (weightKg < 1 || weightKg > 300) { 
                resultArea.classList.add('error');
                categoryDisplay.innerHTML = '⚠️ <strong>体重が一般的な範囲ではありません。</strong>'; // <strong>タグで太字に
                adviceArea.innerHTML = '<p>体重は1kgから300kgの範囲で入力してください。</p>';
                resultArea.style.display = 'block';
                return;
            }


            // --- 2. BMIの計算 ---
            const heightM = heightCm / 100; // 身長をメートルに変換
            const bmi = weightKg / (heightM * heightM);

            // 結果を小数点以下2桁で表示
            resultValueDisplay.textContent = bmi.toFixed(2);

            // --- 3. BMIカテゴリ判定とクラス付与 ---
            let category = '';
            let categoryClass = ''; // スタイルクラス
            let adviceContent = ''; // アドバイステキスト
            
            // 適正体重の計算 (BMI 18.5〜25の範囲)
            let optimalMinWeight = 18.5 * heightM * heightM;
            let optimalMaxWeight = 25 * heightM * heightM;

            // 標準体重の計算 (BMI 22の場合)
            const standardWeight = 22 * heightM * heightM;

            if (bmi < 18.5) {
                category = '<strong>低体重（やせ型）</strong>'; 
                categoryClass = 'warning';
                adviceContent = `
                    <p>現在のBMIは<strong>低体重（やせ型）</strong>です。健康的でバランスの取れた食生活を心がけ、無理なく体重を増やすことを検討しましょう。</p>
                    <ul>
                        <li>栄養豊富な食事をバランス良く摂りましょう。</li>
                        <li>適切な量のタンパク質を意識しましょう。</li>
                        <li>適度な筋力トレーニングも効果的です。</li>
                    </ul>
                `;
            } else if (bmi >= 18.5 && bmi < 25) {
                category = '<strong>普通体重</strong>'; 
                categoryClass = 'normal';
                adviceContent = `
                    <p>現在のBMIは<strong>普通体重</strong>です！素晴らしい健康状態を維持されています。このままバランスの取れた生活を続けましょう。</p>
                    <ul>
                        <li>現在の良い習慣を継続しましょう。</li>
                        <li>適度な運動を定期的に取り入れましょう。</li>
                        <li>十分な睡眠とストレス管理も重要です。</li>
                    </ul>
                `;
            } else if (bmi >= 25 && bmi < 30) {
                category = '<strong>肥満（1度）</strong>'; 
                categoryClass = 'warning';
                adviceContent = `
                    <p>現在のBMIは<strong>肥満（1度）</strong>です。生活習慣を見直し、体重管理を意識することが健康維持に繋がります。</p>
                    <ul>
                        <li>野菜を多く取り入れたバランスの良い食事を。</li>
                        <li>毎日30分程度のウォーキングから始めてみましょう。</li>
                        <li>早食いを避け、よく噛んでゆっくり食べましょう。</li>
                    </ul>
                `;
            } else if (bmi >= 30 && bmi < 35) {
                category = '<strong>肥満（2度）</strong>'; 
                categoryClass = 'danger';
                adviceContent = `
                    <p>現在のBMIは<strong>肥満（2度）</strong>です。健康リスクが高まる可能性があります。専門家への相談も検討し、本格的な体重管理を始めましょう。</p>
                    <ul>
                        <li>専門家（医師、管理栄養士）に相談することをお勧めします。</li>
                        <li>無理のない範囲で運動量を増やしましょう。</li>
                        <li>加工食品や高カロリーなものの摂取を控えめに。</li>
                    </ul>
                `;
            } else if (bmi >= 35 && bmi < 40) {
                category = '<strong>肥満（3度）</strong>'; 
                categoryClass = 'danger';
                adviceContent = `
                    <p>現在のBMIは<strong>肥満（3度）</strong>です。生活習慣病のリスクが非常に高まっています。早めに医療機関を受診し、専門的な指導を受けることを強くお勧めします。</p>
                    <ul>
                        <li>速やかに医療機関で健康状態をチェックしましょう。</li>
                        <li>食事療法や運動療法について専門家の指導を受けましょう。</li>
                    </ul>
                `;
            } else { // bmi >= 40
                category = '<strong>肥満（4度）</strong>'; 
                categoryClass = 'danger';
                adviceContent = `
                    <p>現在のBMIは<strong>肥満（4度）</strong>です。極めて高い健康リスクがあります。すぐに医療機関を受診し、専門的な治療計画を立てることが不可欠です。</p>
                    <ul>
                        <li>緊急に医療機関での詳細な検査と治療が必要です。</li>
                        <li>医師の指示のもと、厳密な食事・運動管理を行いましょう。</li>
                    </ul>
                `;
            }

            // categoryDisplayとadviceAreaにはHTMLタグが含まれるため innerHTML を使用
            categoryDisplay.innerHTML = category; 
            resultArea.classList.add(categoryClass); 
            
            // --- 4. 適正体重と標準体重の表示 ---
            optimalWeightRangeSpan.textContent = `${optimalMinWeight.toFixed(1)} kg ～ ${optimalMaxWeight.toFixed(1)} kg`;
            standardWeightSpan.textContent = `${standardWeight.toFixed(1)} kg`; 

            // --- 5. パーソナライズされたアドバイスの表示 ---
            adviceArea.innerHTML = adviceContent;

            // 結果エリアを表示
            resultArea.style.display = 'block';

            // 結果表示後にスクロールして見せる (UI/UXの改善)
            resultArea.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    </script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

function calculateBMI() {

const heightCm = parseFloat(document.getElementById('height').value);

const weightKg = parseFloat(document.getElementById('weight').value);

const resultArea = document.getElementById('result-area');

const resultValueDisplay = document.getElementById('result-value-display');

const categoryDisplay = document.getElementById('category-display');

const optimalWeightRangeSpan = document.getElementById('optimal-weight-range');

const standardWeightSpan = document.getElementById('standard-weight');

const adviceArea = document.getElementById('advice-area');

// --- 1. 入力値のバリデーションとエラーハンドリング ---

// まずは表示をリセット

resultArea.style.display = 'none';

resultArea.classList.remove('error', 'normal', 'warning', 'danger');

adviceArea.innerHTML = ''; // アドバイスエリアをクリア

// エラーメッセージのリセット

resultValueDisplay.textContent = '';

categoryDisplay.innerHTML = ''; // innerHTMLでリセット

if (isNaN(heightCm) || isNaN(weightKg) || heightCm <= 0 || weightKg <= 0) {

resultArea.classList.add('error');

categoryDisplay.innerHTML = '⚠️ <strong>正しい身長と体重を半角数字で入力してください。</strong>'; // <strong>タグで太字に

adviceArea.innerHTML = '<p>入力値は正の数である必要があります。例: 身長170.5cm, 体重65.2kg</p>';

resultArea.style.display = 'block';

return;

}

if (heightCm < 50 || heightCm > 250) {

resultArea.classList.add('error');

categoryDisplay.innerHTML = '⚠️ <strong>身長が一般的な範囲ではありません。</strong>'; // <strong>タグで太字に

adviceArea.innerHTML = '<p>身長は50cmから250cmの範囲で入力してください。</p>';

resultArea.style.display = 'block';

return;

}

if (weightKg < 1 || weightKg > 300) {

resultArea.classList.add('error');

categoryDisplay.innerHTML = '⚠️ <strong>体重が一般的な範囲ではありません。</strong>'; // <strong>タグで太字に

adviceArea.innerHTML = '<p>体重は1kgから300kgの範囲で入力してください。</p>';

resultArea.style.display = 'block';

return;

}

// --- 2. BMIの計算 ---

const heightM = heightCm / 100; // 身長をメートルに変換

const bmi = weightKg / (heightM * heightM);

// 結果を小数点以下2桁で表示

resultValueDisplay.textContent = bmi.toFixed(2);

// --- 3. BMIカテゴリ判定とクラス付与 ---

let category = '';

let categoryClass = ''; // スタイルクラス

let adviceContent = ''; // アドバイステキスト

// 適正体重の計算 (BMI 18.5〜25の範囲)

let optimalMinWeight = 18.5 * heightM * heightM;

let optimalMaxWeight = 25 * heightM * heightM;

// 標準体重の計算 (BMI 22の場合)

const standardWeight = 22 * heightM * heightM;

if (bmi < 18.5) {

category = '<strong>低体重（やせ型）</strong>';

categoryClass = 'warning';

adviceContent = `

<p>現在のBMIは<strong>低体重（やせ型）</strong>です。健康的でバランスの取れた食生活を心がけ、無理なく体重を増やすことを検討しましょう。</p>

<ul>

<li>栄養豊富な食事をバランス良く摂りましょう。</li>

<li>適切な量のタンパク質を意識しましょう。</li>

<li>適度な筋力トレーニングも効果的です。</li>

</ul>

} else if (bmi >= 18.5 && bmi < 25) {

category = '<strong>普通体重</strong>';

categoryClass = 'normal';

adviceContent = `

<p>現在のBMIは<strong>普通体重</strong>です！素晴らしい健康状態を維持されています。このままバランスの取れた生活を続けましょう。</p>

<ul>

<li>現在の良い習慣を継続しましょう。</li>

<li>適度な運動を定期的に取り入れましょう。</li>

<li>十分な睡眠とストレス管理も重要です。</li>

</ul>

} else if (bmi >= 25 && bmi < 30) {

category = '<strong>肥満（1度）</strong>';

categoryClass = 'warning';

adviceContent = `

<p>現在のBMIは<strong>肥満（1度）</strong>です。生活習慣を見直し、体重管理を意識することが健康維持に繋がります。</p>

<ul>

<li>野菜を多く取り入れたバランスの良い食事を。</li>

<li>毎日30分程度のウォーキングから始めてみましょう。</li>

<li>早食いを避け、よく噛んでゆっくり食べましょう。</li>

</ul>

} else if (bmi >= 30 && bmi < 35) {

category = '<strong>肥満（2度）</strong>';

categoryClass = 'danger';

adviceContent = `

<p>現在のBMIは<strong>肥満（2度）</strong>です。健康リスクが高まる可能性があります。専門家への相談も検討し、本格的な体重管理を始めましょう。</p>

<ul>

<li>専門家（医師、管理栄養士）に相談することをお勧めします。</li>

<li>無理のない範囲で運動量を増やしましょう。</li>

<li>加工食品や高カロリーなものの摂取を控えめに。</li>

</ul>

} else if (bmi >= 35 && bmi < 40) {

category = '<strong>肥満（3度）</strong>';

categoryClass = 'danger';

adviceContent = `

<p>現在のBMIは<strong>肥満（3度）</strong>です。生活習慣病のリスクが非常に高まっています。早めに医療機関を受診し、専門的な指導を受けることを強くお勧めします。</p>

<ul>

<li>速やかに医療機関で健康状態をチェックしましょう。</li>

<li>食事療法や運動療法について専門家の指導を受けましょう。</li>

</ul>

} else { // bmi >= 40

category = '<strong>肥満（4度）</strong>';

categoryClass = 'danger';

adviceContent = `

<p>現在のBMIは<strong>肥満（4度）</strong>です。極めて高い健康リスクがあります。すぐに医療機関を受診し、専門的な治療計画を立てることが不可欠です。</p>

<ul>

<li>緊急に医療機関での詳細な検査と治療が必要です。</li>

<li>医師の指示のもと、厳密な食事・運動管理を行いましょう。</li>

</ul>

}

// categoryDisplayとadviceAreaにはHTMLタグが含まれるため innerHTML を使用

categoryDisplay.innerHTML = category;

resultArea.classList.add(categoryClass);

// --- 4. 適正体重と標準体重の表示 ---

optimalWeightRangeSpan.textContent = `${optimalMinWeight.toFixed(1)} kg ～ ${optimalMaxWeight.toFixed(1)} kg`;

standardWeightSpan.textContent = `${standardWeight.toFixed(1)} kg`;

// --- 5. パーソナライズされたアドバイスの表示 ---

adviceArea.innerHTML = adviceContent;

// 結果エリアを表示

resultArea.style.display = 'block';

// 結果表示後にスクロールして見せる (UI/UXの改善)

resultArea.scrollIntoView({ behavior: 'smooth', block: 'center' });

}

</script>

コードを貼り付けたら、index.htmlを保存し、ブラウザで再読み込みしてください。

ボタンを押すと動く…ワクワクしますね！

ほーく

動作チェック！

身長と体重を入力して「BMIを計算する」ボタンを押すと…

BMI値
判定（普通・やせ・肥満など）
適正体重・標準体重
パーソナルなアドバイス

が表示されるようになったはずです！

JavaScriptコードのやさしい解説

このコードは calculateBMI() という関数（処理のまとまり）でできています。
ボタンがクリックされると、この関数が実行される仕組みです。

入力値を取得して変数に保存

document.getElementById('ID'): 指定したIDの要素を取得
.value: 入力された値を取り出す
parseFloat(): 入力値は文字列なので、数値に変換
const 変数名 = 値;: 変更不可の変数を宣言（「箱」を作る）

入力チェック（バリデーション）

isNaN(値): 数値でなければ true
||: どちらかが true なら true（OR）
if (...) { return; }: 入力が不正なら、処理を終了してエラーメッセージを出す
classList.add('error'): エラー用の赤いデザインを追加

BMIの計算

heightM = heightCm / 100: 身長をメートルに変換
BMI = weightKg / (heightM * heightM): BMIの計算式
.toFixed(2): 小数点以下2桁に丸めて表示

判定とアドバイスの決定

if...else if...else: BMIの値に応じて判定とアドバイスを分岐
categoryDisplay.innerHTML = category: 結果に太字（<strong>）などを含めたいので innerHTML を使う
resultArea.classList.add(categoryClass): 判定に応じたCSSを適用して見た目を変える
adviceContent: 各BMIタイプごとのアドバイスを定義（リストや段落もHTMLで記述）

適正体重・標準体重の計算

標準体重（BMI22の体重）を計算
textContent を使ってHTMLの各エリアに反映（数値だけなので innerHTML は不要）

結果の表示とスクロール

resultArea.style.display = 'block': 非表示だった結果エリアを表示
scrollIntoView({ behavior: 'smooth', block: 'center' }): 結果が画面中央にスーッとスクロールされて表示。スマホで特に便利！

完成です！

これで、あなたの手で動くWebツールができあがりました！

デザイン（CSS）
骨組み（HTML）
動き（JavaScript）

これらを組み合わせて、自分だけの便利ツールを作れるようになったんです!

さらなるステップアップ！カスタマイズに挑戦しよう

ここまで本当にお疲れさまでした！

あなたは、HTML・CSS・JavaScriptを使って、しっかり動く高機能なWebツールを作り上げました。
これはとても大きな一歩であり、これからの自信にもつながるはずです。

でも、ここで終わりじゃない！

今回作ったBMI計算ツールは、あなたのアイデア次第でどんどん進化させることができます。
せっかく作ったからには、自分好みにカスタマイズしてみましょう！

たとえば、こんなカスタマイズができます：

デザインを変える
CSSを少し編集するだけで、ボタンの色・背景・フォント・角の丸みなどを自由にアレンジできます。
→ ブログの雰囲気や季節に合わせたデザインにするのもおすすめです。
アドバイスの内容を変更する
JavaScriptの adviceContent を編集すれば、自分の言葉でメッセージを書いたり、
より具体的な健康アドバイスやおすすめの運動を追加することも可能です。
新しい機能を追加してみる（応用編）
- 年齢や性別の入力欄を追加し、よりパーソナライズされたアドバイスを表示する
- 過去の計算結果を保存できる「履歴機能」（ローカルストレージを使います）をつける
- 消費カロリーや目標体重までの期間を計算できる別ツールを作ってみる

作って終わりじゃない、自分だけのツールに進化させてみよう！

ほーく

もっと学びたい方へ！おすすめの学習リソース

さらにスキルを伸ばして、もっと便利なWebツールを作ってみませんか？

ここでは、HTML・CSS・JavaScriptの基礎から応用まで学べる厳選リソースをご紹介します。
あなたの学習スタイルに合わせて選んでみてください！

書籍でじっくり学びたい方におすすめ

『確かな力が身につくJavaScript超入門』

JavaScriptの基本から実践までを、図解を交えて丁寧に解説。
はじめてでも安心して読み進められる、初心者に理想的な一冊です。

確かな力が身につくJavaScript「超」入門第2版

ＳＢクリエイティブ/狩野祐東

Amazon

楽天

『スラスラわかるHTML&CSSのきほん』

Web制作の基礎を体系的に学べます。見やすいレイアウトで、迷わず理解できる構成が魅力。
HTML・CSSを初めて学ぶ方にもピッタリです。

スラスラわかるHTML&CSSのきほん第3版

ＳＢクリエイティブ/狩野祐東

Amazon

楽天

オンラインで手を動かしながら学びたい人へ

Udemy（ユーデミー）

プロ講師による動画講座が豊富！
・初心者向け〜実務レベルまで幅広く対応
・動画形式で「見て → 真似して → 自分で書く」流れが作れる
・頻繁にセール開催、1,000円台で買えることも！

まとめ：ゼロからイチを生み出す感動を！

本記事では、HTML・CSS・JavaScriptを使って、BMI計算ツールをゼロから作る方法をご紹介しました。

「難しそう…」と思っていた方も、コピペをきっかけに動くWebツールを完成させた今、きっと大きな達成感を感じているはずです。

あなたが身につけたこと

Webページを組み立てる HTML
デザインを整える CSS
ツールに動きを加える JavaScript

そしてなにより、自分で形にする楽しさを体験しました！

このBMIツールは、自分の健康状態を“見える化”できる便利なツール。
計算結果に応じたアドバイスがあるから、次に何をすればいいかもわかります。

ぜひ、この知識を活かして、あなた自身のアイデアで新たなWebツール開発に挑戦してみてください。

【実際のBMI計算ツールの動作を試してみたい方はこちらからどうぞ】▼

: BMI計算ツール｜肥満度チェック＆理想体重に加え、健康アドバイスも自動表示！
「健康診断の結果を見てドキッとした…」「ダイエットを始めたいけど、目標が曖昧で続かない」そんな体型や健康に関するお悩み、ありませんか？「BMIってよく聞くけど、数字の意味がわからない…」「この体重 ...

【コピペで完成】BMI計算ツールの作り方｜HTMLとJavaScriptで始める簡単Web開発入門

【機能紹介】BMI計算ツールでできること

1. 身長と体重を入力するだけで「BMI」を自動計算

2. 肥満度の精密判定（日本の基準に準拠）

3. 健康的な「標準体重（BMI22）」を自動表示

4. 適正体重の範囲（BMI18.5〜25）を表示

5. 【ここが独自！】あなたに合わせた「健康アドバイス」を自動表示

【準備編】開発環境の準備はこれだけ！今すぐ始められる環境を整えよう

必要なものはこの4つだけ！

おすすめのテキストエディタ：VS Code

Webブラウザは普段使っているものでOK！

作業用フォルダを作成しよう

HTMLファイルを新規作成しよう

【基礎知識編】たったこれだけ！Webツール開発に必要な3つの言語をざっくり解説

HTML（エイチティーエムエル）

CSS（シーエスエス）

JavaScript（ジャバスクリプト）

DOM（ドム）ってなに？

【ステップ1】いよいよコードを書こう！〜HTML編〜

ブラウザで開いてみよう！

表示を確認！

HTMLコードの簡単な解説

上部の基本設定

<head>タグ（ページの基本情報）

<body>タグ（ページに表示される内容）

<script>タグ

【ステップ2】見た目を整えよう！【CSS編】ツールの「デザイン」をつける

CSSコードのやさしい解説

【ステップ3】ツールを動かそう！【JavaScript編】計算＆アドバイスに「動き」を加える

動作チェック！

JavaScriptコードのやさしい解説

入力値を取得して変数に保存

入力チェック（バリデーション）

BMIの計算

判定とアドバイスの決定

適正体重・標準体重の計算

結果の表示とスクロール

完成です！

さらなるステップアップ！カスタマイズに挑戦しよう

でも、ここで終わりじゃない！

たとえば、こんなカスタマイズができます：

もっと学びたい方へ！おすすめの学習リソース

書籍でじっくり学びたい方におすすめ

『確かな力が身につくJavaScript超入門』

『スラスラわかるHTML&CSSのきほん』

オンラインで手を動かしながら学びたい人へ

Udemy（ユーデミー）

まとめ：ゼロからイチを生み出す感動を！

あなたが身につけたこと

関連記事