HTML・CSS・JavaScriptの違い｜AIでWebアプリを作る人ほど知っておきたい基礎
ReactやNext.jsからWeb開発を始めると、
「結局HTMLとJavaScriptはどういう関係なの？」
と混乱することがあります。
そこで今回は、同じ小さなアプリを使って、
HTML・CSS・JavaScriptの役割
を実際に確認します。
---
結論
最初はこう覚えれば十分です。
HTML
＝構造と意味
CSS
＝見た目
JavaScript
＝動き
---
HTML
まず画面の構造を作ります。
<div class="counter">
<h1>カウンター</h1>
<p id="count">0</p>
<button id="plusButton">
+1する
</button>
</div>
ここでは、
<h1>
が見出し。
<p>
が文章。
<button>
がボタンです。
HTMLには単なる見た目ではなく「意味」もあります。
---
CSS
次に見た目を整えます。
.counter {
max-width: 400px;
margin: 50px auto;
text-align: center;
}
#count {
font-size: 48px;
font-weight: bold;
}
button {
padding: 12px 24px;
font-size: 18px;
cursor: pointer;
}
これで、
- 横幅
- 余白
- フォントサイズ
- ボタンサイズ
などを調整できます。
---
JavaScript
最後に動きを追加します。
let count = 0;
const countElement =
document.querySelector("#count");
const plusButton =
document.querySelector("#plusButton");
plusButton.addEventListener("click", () => {
count += 1;
countElement.textContent = count;
});
ボタンをクリックすると、
count += 1;
で数字が増えます。
そして、
countElement.textContent = count;
で画面を書き換えています。
---
3つを合わせる
HTML
「ボタンがあります」
CSS
「ボタンはこの見た目です」
JavaScript
「押したら数字を増やします」
という関係です。
---
Reactはどこに入る？
ReactはHTMLの代替言語というより、
JavaScriptでUIを構築・管理しやすくするための仕組み
として理解すると混乱が減ります。
React風に書くと、
function Counter() {
const [count, setCount] = useState(0);
return (
<main>
<h1>カウンター</h1>
<p>{count}</p>
<button
onClick={() => setCount(count + 1)}
>
+1する
</button>
</main>
);
}
となります。
見た目は違いますが、ブラウザ上では最終的にWebの基本技術につながっています。
---
なぜbuttonを使うの？
見た目だけなら、
<div>送信</div>
でもボタンっぽくできます。
しかし、本当にボタンなら、
<button>送信</button>
を使う方が適切です。
ブラウザにはbutton要素に対してキーボード操作などの標準動作があります。
MDNも、目的に合ったHTML要素を使うことをアクセシビリティの基本として説明しています。
---
AIにレビューしてもらう
こんな指示が便利です。
以下のUIコードをレビューしてください。
確認項目:
1. HTML要素の意味が適切か
2. divをbutton代わりにしていないか
3. inputにlabelがあるか
4. キーボードでも操作できるか
5. 見た目を変えずに改善できるか
コード:
（貼り付け）
---
まとめ
AI時代でも、
HTML
CSS
JavaScript
HTTP
の基礎を知っておく価値は高いです。
理由は簡単です。
AIが生成するReactやNext.jsのコードも、
Webの基本原理の上で動いているから。
最新フレームワークを追う前に、
「ブラウザでは何が起こっているのか」
を理解しておくと、その後の学習速度が上がります。
参考資料（2026年8月24日確認）
- MDN Web Docs「HTML: A good basis for accessibility」
- MDN Web Docs「HTTP」
