1. HTMLのタグ（たぐ）
HTMLのタグは、ページの「なかみ」をつくる ことばです。
| タグ | 意味（やさしい説明） | 例 |
|---|---|---|
<h1>〜</h1> | いちばん大きい見出し | <h1>タイトル</h1> |
<h2>〜</h2> | 見出し（中くらい） | <h2>小タイトル</h2> |
<p>〜</p> | 文章のまとまり（パラグラフ） | <p>本文</p> |
<a href="URL">〜</a> | リンクをつける | <a href="about.html">こちら</a> |
<img src="" alt=""> | 画像を入れる | <img src="photo.jpg" alt="花"> |
<ul><li>〜</li></ul> | ・（点つき）リスト | <ul><li>りんご</li></ul> |
<ol><li>〜</li></ol> | 番号つきリスト | <ol><li>手順1</li></ol> |
<div>〜</div> | まとまり（デザインのブロック） | <div>箱</div> |
<span>〜</span> | 小さな部分をまとめる | <span>赤文字</span> |
<input> | 入力のための箱 | <input type="text"> |
<button>〜</button> | ボタン | <button>送信</button> |
2. よくつかうCSSプロパティ（ぶんしょうの見た目）
CSSのプロパティは、文字や箱の「見た目」を変える ために つかいます。
| プロパティ | 意味（やさしい説明） | 例 |
|---|---|---|
color | 文字のいろ | color: red; |
background-color | 背景のいろ | background-color: yellow; |
font-size | 文字の大きさ | font-size: 20px; |
text-align | 文字のよこ位置（左・まんなか・右） | text-align: center; |
width | はこの よこ（幅） | width: 200px; |
height | はこの たて（高さ） | height: 100px; |
border | ふち（線） | border: 1px solid #000; |
border-radius | すみを まるくする | border-radius: 8px; |
margin | はこの外がわのすきま | margin: 10px; |
padding | はこの内がわのすきま | padding: 10px; |
display | ならび方を決める | display: flex; |
justify-content | よこの そろえ方（flex時） | justify-content: center; |
align-items | たての そろえ方（flex時） | align-items: center; |
3. よくつかうJavaScript（動き）
ページをうごかす ための ことばです。
| ことば | 意味（やさしい説明） | 例 |
|---|---|---|
document.getElementById() | HTMLの中から 1つのパーツを さがす | document.getElementById("title") |
addEventListener() | イベント（クリックなど）を きく | btn.addEventListener("click", fn) |
textContent | 中の文字を かえる | msg.textContent = "こんにちは" |
style | CSSを JavaScriptで かえる | box.style.color = "red" |
classList.add() | クラス（デザイン名）を つける | box.classList.add("show") |
classList.toggle() | クラスを つけたり けしたり | text.classList.toggle("hide") |
4. まとめ
- タグは ページの「なかみ」
- CSSプロパティは「見た目」
- JavaScriptは「うごき」