HTML,CSS,JSファイルの分け方編（動画補足版）

🟥 1. アイキャッチ（タイトル＋動画サムネ）

目的： 一目で内容と動画の関係が分かるようにする。
内容例：

🎥 【動画補足】HTML,CSS,JSファイルの分け方編（動画補足版）！

下にYouTube埋め込み or 「▶動画を見る」ボタン

（動画埋め込みタグ or iframe）

🟧 2. 冒頭リード（つながりを明示）

今回の動画では「HTML・CSS・JavaScriptを分ける理由」について紹介しました。
この記事では、動画内で出てきたタグや設定方法を、もう少し詳しく見ていきます。

🟨 3. 今日のゴール（内容を先出し）

💡この記事で学べること

なぜ1ファイルに全部書くと読みにくいのか

「役割ごとに分ける」ことでどんなメリットがあるか

HTML＝骨格、CSS＝見た目、JS＝動きの図解

🟩 ファイルに全部書くと読みにくくなる理由

1️⃣ どこに何があるかわからなくなる

HTML・CSS・JSが混ざると、
「構造」「見た目」「動き」が1つの画面に入り乱れます。

たとえば：

<html>
  <style>h1 { color: red; }</style>
  <script>console.log("Hello!");</script>
  <body><h1>タイトル</h1></body>
</html>

これでも動きますが、
見たい部分（CSSだけ・JSだけ）を探すのが大変です。

2️⃣ 修正や追加がしづらくなる

後からデザインを変えたいとき、
HTMLの中を全部スクロールして <style> を探すことに…
JSも同じファイルにあると、動作を直すときに見落としがち。

→ 「ファイルが分かれていれば」
デザインは style.css
動きは script.js
中身は index.html
と、役割ごとにすぐ見つけられます ✅

3️⃣ チーム作業でぶつかる

1つのファイルを複数人で編集すると、
上書きミスや差分管理が難しくなります。
Gitなどで管理する際にも「1行変えただけで全体が更新扱い」になるので不便です。

4️⃣ 読み込み速度にも影響

HTML内に直接書くよりも、
CSSやJSを外部ファイルにしてキャッシュできる方が、
ページの読み込みが早くなる場合があります。
→ 特に複数ページのサイトでは大きな差になります。

「役割ごとに分ける」メリット

1️⃣ 見やすさ・理解しやすさ

HTML：ページの構造や内容
CSS：デザインや見た目
JavaScript：動きやインタラクション

役割ごとに分けることで、
「どこを見れば何が書いてあるか」がすぐに分かります。

例：

index.html → 文章や見出しを確認  
style.css → 色やフォント、レイアウトを確認  
script.js → ボタンやアニメーションの動作を確認

2️⃣ 再利用性が高まる

複数ページで同じCSSやJSを使うとき、外部ファイルなら読み込みだけで済む
1つの変更がすべてのページに反映される
コードの重複を減らせる

3️⃣ チーム開発で便利

役割ごとに担当を分けやすい
- デザイナー → CSS
- フロントエンドエンジニア → JS
- コーダー → HTML
Gitなどでの管理もしやすく、競合や混乱を避けやすい

HTML＝骨格、CSS＝見た目、JS＝動きの図解

       ┌───────────────┐
       │   HTML (骨格)  │
       │  ページの構造  │
       └───────────────┘
                │
                ▼
       ┌───────────────┐
       │   CSS (見た目)  │
       │  色・フォント・ │
       │  レイアウト     │
       └───────────────┘
                │
                ▼
       ┌───────────────┐
       │   JS (動き)     │
       │  アニメーション │
       │  ボタンの挙動   │
       └───────────────┘

HTMLがなければページ自体がない → 骨格
CSSはHTMLの上に乗って見た目を整える → 服やペンキのイメージ
JSは骨格と見た目に命を吹き込む → モーションや操作を可能に

🟩 実践：ファイルの分け方

各ファイルの作り方（VSCodeなどでのファイル新規作成）
拡張子の意味（.html / .css / .js）
それぞれのファイルにどんな内容を入れるか
index.html からの読み込み関係を図示（フォルダ構造図）

project/
│
├─ index.html
├─ style.css
└─ script.js

`<link>` タグの詳細

属性の意味：rel / href
ファイルパスの指定方法（相対パス・絶対パスの例）
複数のCSSを読み込むこともできる、など応用メモ

属性名	意味	例
rel	ファイルの関係を示す	stylesheet
href	読み込むファイルの場所	style.css

`<script>` タグの詳細

src 属性と defer 属性の違い
defer と async の違い（軽く触れる程度）
HTMLの最後に書く方法もあるよ、という補足

🧩 例：

<script src="script.js" defer></script>

→ deferを付けるとHTMLを先に読み込んでからスクリプトが動く。

⬜ よくあるミス

ファイル名のスペルミス（例：scrip.jsになってる）
パス指定の間違い（フォルダ構造を意識できていない）
<script> タグに src と中身を同時に書いてる　など

🟥 1. アイキャッチ（タイトル＋動画サムネ）
🟧 2. 冒頭リード（つながりを明示）
🟨 3. 今日のゴール（内容を先出し）
🟩 ファイルに全部書くと読みにくくなる理由
「役割ごとに分ける」メリット
HTML＝骨格、CSS＝見た目、JS＝動きの図解
🟩 実践：ファイルの分け方
⬜ よくあるミス

🟫 次回予告・導線

🟫 次回予告・導線

🎨 次回：「CSS実践編」
このページで作ったHTMLを、次の動画でデザインしていきます。

[▶ 次回「CSS実践編」動画を見る]
（または）
📱 QRコード： 次回動画ページにリンク