この記事は プログラミング完全初心者 向けです。
「コピペして動いたけど、何が起きてるのか分からない😵💫」を解消するために、1行ずつ解説します！
✅ ゴール（これが分かればOK）
- HTML：ページに「文字」と「ボタン」を置く
- CSS：見た目（色・位置・サイズ）を変える
- JavaScript：ボタンを押したら文字が変わる（動き）
0. 準備（3分）📦
フォルダの中にこの3つを作ります👇
web30min/
├ index.html
├ style.css
└ script.js
1. HTML（骨組み）🧱：index.html を1行ずつ解説
まずは index.html（ページの土台）👇
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのWeb</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>はじめてのWebサイト</h1>
<p id="text">ボタンを押してみてください</p>
<button id="btn">クリック</button>
<script src="script.js"></script>
</body>
</html>
✅ 1行ずつ解説（HTML）
<!DOCTYPE html>
- 「これはHTMLですよ！」という宣言です。
- おまじないと思ってOK（ほぼ必須）
<html lang="ja">
- HTMLの開始タグです。
-
lang="ja"は「このページは日本語ですよ」という意味
→ ブラウザや検索エンジンに優しい設定です😊
<head> ... </head>
- ここは「ページの設定を書く場所」です。
- 画面には直接表示されません。
<meta charset="UTF-8">
- 文字コードの指定です。
- 日本語を文字化けさせないために 必須 と思ってOK！
<title>はじめてのWeb</title>
- ブラウザのタブに表示されるタイトルです。
- ページの「名前」みたいなものですね📌
<link rel="stylesheet" href="style.css">
- CSSファイルを読み込む行です。
-
href="style.css"は「このファイル名のCSSを使うよ」という意味。 - HTMLだけだと見た目が地味なので、CSSで装飾するために必要です🎨
</head>
- headの終わり。
<body> ... </body>
- ここが「画面に表示される部分」です。
- ユーザーが見るのは基本ここです👀
<h1>はじめてのWebサイト</h1>
- 見出し（タイトル）です。
-
h1は「一番大きい見出し」という意味。
<p id="text">ボタンを押してみてください</p>
-
pは「文章（段落）」です。 -
id="text"が超重要！
✅ id="text" は「この部分に名前をつけた」イメージ
→ JavaScriptがこの文章を探して、あとで変更できるようになります。
<button id="btn">クリック</button>
- ボタンを作ります。
-
id="btn"は「このボタンに名前をつけた」イメージ
→ JavaScriptが「このボタンが押された！」を検知するために必要です🖱️
<script src="script.js"></script>
- JavaScriptファイルを読み込みます。
-
src="script.js"は「このJSを使うよ」の意味。
✅ ここが bodyの一番下にあるのがポイント！
理由：HTMLの表示が終わってからJSを動かしたいから
（先にJSを動かすと、まだボタンが存在しなくてエラーになりやすい😵💫）
2. CSS（見た目）🎨：style.css を1行ずつ解説
次に style.css（見た目を整える）👇
body {
text-align: center;
font-family: sans-serif;
}
h1 {
color: blue;
}
button {
padding: 10px 20px;
font-size: 16px;
}
✅ 1行ずつ解説（CSS）
body { ... }
- body全体（ページ全体）にスタイルを当てます。
text-align: center;
- 文字を中央寄せにします。
- 初心者が見た目を整えるのに一番分かりやすい効果✨
font-family: sans-serif;
- フォントを見やすい書体にします。
- sans-serif は「ゴシック系フォント」みたいなイメージ。
h1 { color: blue; }
-
h1（見出し）だけを青くします。 - CSSは「どこに」「何を」するかを書くもの。
h1→ 見出し、color→ 色
button { ... }
- ボタン全体にスタイルを当てます。
padding: 10px 20px;
- ボタンの内側の余白です。
- 押しやすくなります👍
（10px：上下、20px：左右）
font-size: 16px;
- ボタンの文字サイズです。
- 小さすぎると読みにくいので適度に大きくします。
3. JavaScript（動き）⚡：script.js を1行ずつ解説
最後に script.js（ボタンで動かす）👇
const text = document.getElementById("text");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
text.textContent = "文字が変わりました！🎉";
});
✅ 1行ずつ解説（JavaScript）
const text = document.getElementById("text");
-
documentは「このページ全体」のこと。 -
getElementById("text")は「idがtextの要素を探して持ってくる」です。
つまり👇
✅ HTMLの <p id="text"> ... </p> を見つけて、操作できるようにしてる
const text = ... は「textという名前で覚えておく」
→ あとで text を使って文章を書き換えられるようになります。
const btn = document.getElementById("btn");
- 同じく、HTMLの
<button id="btn">を見つけています。 - これで「このボタンが押されたか」を監視できます👀
btn.addEventListener("click", () => { ... });
ここが一番大事です！
-
addEventListenerは「イベントを追加する」という意味。 - イベント＝「起きたこと」
-
"click"は「クリックされた」というイベントです。
つまり👇
✅ 「このボタンがクリックされたら、次の処理を実行してね」
() => { ... }
- これは「クリックされたときに実行する処理」を書く箱です。
- 難しく感じるなら「クリックされたらここが動く！」でOK😊
text.textContent = "文字が変わりました！🎉";
-
textはさっきの<p id="text">のこと -
textContentは「その中の文字」
つまり👇
✅ 「pタグの文字を、この文章に変更する」
✅ まとめ：これだけ覚えればOK！👏
- HTML：表示するものを置く（文字・ボタン）
- CSS：見た目を変える（色・中央寄せ・サイズ）
- JS：イベント（クリック）で文字を書き換える
🎮 ミニ課題（できたら強い！）
- ボタンの文字を「変更！」にしてみる
-
color: red;にしてみる - JSのメッセージを自分の好きな言葉にする