AIが書いたHTML・CSS・JavaScriptを読む：初学者が役割を見分けて直す場所を探す手順

先に結論：3層の早見表

HTMLが内容の構造、CSSが見た目、JavaScriptが動きや操作性を担当します（MDN: JavaScript とは）。

初学者が直す場所を探すときは、次のように「データ」を足した3層で考えると便利です。この3分類は公式の用語ではなく、この記事での整理です。

• 見た目、主に見る場所：<style>の中、.cssファイル、HTMLのclass名、こんな症状なら疑う：色・余白・並び・大きさ・スマホでの崩れがおかしい
• 動き、主に見る場所：<script>の中、.jsファイル、addEventListener、こんな症状なら疑う：ボタンを押しても反応しない、押すと違う動きをする
• データ、主に見る場所：表示される文字そのもの、const items = [...]のような配列、保存処理、こんな症状なら疑う：文言や件数が違う、再読み込みで消える

HTMLは、見た目とデータの両方に関わります。文字は「データ」、classやidの名前は「見た目と動きをつなぐ札」と考えてください。

説明用の例：3層が混ざった小さなページ

次は、やることメモを表示する短いページの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>やることメモ</title>
<style>
  .memo { color: #333; }
  .done { color: gray; text-decoration: line-through; }
</style>
</head>
<body>
<h1>やることメモ</h1>
<ul id="list"></ul>
<button id="add">追加</button>
<script>
  const items = ["牛乳を買う", "部屋を片づける"];
  const list = document.querySelector("#list");
  function render() {
    list.innerHTML = "";
    for (const text of items) {
      const li = document.createElement("li");
      li.className = "memo";
      li.textContent = text;
      list.appendChild(li);
    }
  }
  document.querySelector("#add").addEventListener("click", () => {
    items.push("新しいメモ");
    render();
  });
  render();
</script>
</body>
</html>

この例を3層に分けて読むと、次のようになります。

• 見た目：<style>内の.memoと.done。
• 動き：<script>内のrender関数と、ボタンのaddEventListener。
• データ：const items = [...]。メモの中身はここにあります。

「完了にした項目に取り消し線が出ない」という症状なら、見た目の.doneは書いてあります。ところがli.classNameにはmemoしか入れていません。つまり原因は見た目の記述ではなく、doneという札を付ける動きがないことです。細かい文法が分からなくても、この切り分けだけで質問が具体的になります。

症状から層を決める手順

1. 何が、いつ、どうおかしいかを一文にする

「表示が変」では絞れません。「ボタンを押した後だけ、リストの文字が灰色にならない」のように、操作の前後を含めて書いてください。押す前からおかしければ見た目かデータ、押した後だけなら動きを先に疑います。

2. 見た目なら、開発者ツールで要素を検査する

ページ上でおかしい部分を右クリックして「検査」を選ぶと、その要素にどのCSSが当たっているかが分かります。MDNのCSSデバッグの解説では、次の点が挙げられています（MDN: CSS のデバッグ）。

• 別のルールに上書きされていると、取り消し線が引かれて表示される。
• 対応していないプロパティや値は無視される。
• プロパティのON/OFFを切り替えて、効き方を試せる。

ツール上の変更は試すためのもので、ファイルは書き換わりません。良さそうな値が見つかったら、その値をAIに伝えるか、自分でファイルに写します。

3. 動きなら、JavaScriptがどのHTML要素を探しているかを見る

動きの不具合でまず確認したいのは、document.querySelector("#add")のような部分です。#addは「id="add"を持つ要素」を探しています。HTML側のidが違えば、ボタンは見つからず反応しません。

もう一つはスクリプトを置く位置です。JavaScriptがHTML要素を操作する場合、HTMLが先に読み込まれている必要があります。ページ末尾に置く、または外部スクリプトにtype="module"やdeferを使う方法があります（MDN: JavaScript とは）。

4. データなら、画面の文字がどこから来ているかをたどる

画面に出ている文字を、コード全体から検索してください。見つかった場所がitemsのような配列なら、そこが直す場所です。見つからなければ、外部ファイルや保存済みのデータから読み込まれている可能性があります。

「再読み込みすると消える」場合、データがブラウザに保存されていない可能性があります。MDNのWeb Storage APIの解説では、localStorageはブラウザを閉じても残り、sessionStorageはセッション終了で消えるとされています（MDN: Web Storage API）。ただし保存先は閲覧している端末のブラウザなので、別の端末とは共有されません。

症状別の早見表

• 色や余白が指定と違う、最初に疑う層：見た目、最初にやること：要素を検査し、取り消し線の付いたルールを探す
• CSSを書いたのに効かない、最初に疑う層：見た目（またはHTMLのclass）、最初にやること：HTMLのclass名とCSSの名前が一字一句同じか見る
• ボタンを押しても何も起きない、最初に疑う層：動き、最初にやること：idやclassがHTMLとJavaScriptで一致しているか見る
• 押すと別の動きをする、最初に疑う層：動き、最初にやること：addEventListenerの中身を読み、AIに一行ずつ説明させる
• 文言・件数が違う、最初に疑う層：データ、最初にやること：画面の文字をコード内で検索する
• 再読み込みで消える、最初に疑う層：データ、最初にやること：保存処理があるか、AIに確認する
• 何を見ればよいか不明、最初に疑う層：切り分け前、最初にやること：上の一文メモを作り、下の質問例を使う

AIへの質問例

AIには「全部直して」ではなく、層を指定して依頼すると、変更範囲が小さく済みます。説明用の例を示します。【 】の部分は自分の内容に置き換えてください。

切り分けを頼む

次のHTMLファイル全体を貼ります。
症状：【ボタンを押した後だけ、リストの文字が灰色にならない】
やってほしいこと：
1. この症状の原因が「見た目(CSS)」「動き(JavaScript)」「データ」のどれかを、理由つきで答えてください。
2. 直す場所を、コードの該当行を引用して1〜2か所に絞ってください。
3. まだコードは直さないでください。

最小の修正を頼む

上の原因の説明のとおり直してください。
条件：
- 変更するのは該当の関数だけにしてください。
- 変更前と変更後を並べて見せてください。
- 変えた理由を、プログラミング初心者向けに3行以内で書いてください。

読めない部分を説明させる

次の5行が何をしているか、「どの要素を探し」「何が起きたら」「何を変えるか」の形で説明してください。
【ここにコードを貼る】

個人情報、パスワード、APIキー、実在の顧客データはコードに混ぜて貼らないでください。ダミーの文字に置き換えてから渡します。

人が確認すること

AIの修正案を受け取ったら、次の3点は自分の目で確かめます。

1. 症状が直ったか：最初に書いた一文の操作をもう一度やります。
2. 別の場所が壊れていないか：隣のボタンや、スマホ幅の表示も開きます。
3. 変更箇所が説明と一致しているか：AIが「1か所だけ」と言ったのに、ファイル全体が書き換わっていたら、差分を見直してください。

直す前のファイルは、コピーを取っておくと元に戻せます。

迷ったときの順番

層が決まらないときは、「画面の文字をコード内で検索する」「要素を検査する」「ボタンのidを照合する」の順に確かめてください。この順番は編集上の目安です。最初の1つで見つかれば、それ以上は調べなくて大丈夫です。