AIが書いたHTML/CSSを理解する練習法

AIが作ったWebページを表示できても、「この1行を変えたらどうなる？」と聞かれると答えられない。そんなときは、完成品をもう一度生成するより、自分で一部を作り直すほうが学習につながります。この記事ではHTMLとCSSを題材に、環境を整えてから変更を確かめるまでの練習を順番に紹介します。

まずは「動く」と「理解した」を分ける

AIが出したHTMLをブラウザーで開くことと、タグの役割を説明できることは別です。どちらも学習の入口ですが、次に目指したいのは、見出し・文章・色・余白を自分で変更できる状態です。

例えば「カードの中に見出しと説明文を置く」という小さな目標を設定します。レイアウトを凝ったり、データベースを導入したりする必要はありません。

用語解説：HTMLとCSS
HTMLは見出しや段落などの内容と構造を表します。CSSは色、余白、文字の大きさなどの見た目を指定します。

できたかどうかを「ページが表示された」で終わらせない
タグを一つ説明できるか、CSSを一つ変更して変化を確かめられるかを合格条件にする

ステップ1：二つのファイルを用意して表示する

PCの任意の場所に`html-practice`というフォルダーを作り、テキストエディターで`index.html`と`style.css`を用意します。外部ライブラリや有料サービスは不要です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>今日の学習メモ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="memo">
    <h1>今日の学習メモ</h1>
    <p>HTMLとCSSの違いを確認中です。</p>
  </main>
</body>
</html>

保存した`index.html`をブラウザーで開いてください。見出し「今日の学習メモ」と、その下の文章が表示されればHTMLの読み込みはできています。ここではインターネット公開は不要です。

ポイントは`h1`と`p`の違いです。`h1`はページの主要な見出し、`p`は段落を意味します。`main`はページの中心となる内容を囲む要素です。

ステップ2：CSSの1行だけを変えてみる

次に、同じフォルダー内の`style.css`へ以下を保存します。HTMLの`link`要素に書いたファイル名と、実際の名前が一致していることを確認してください。

.memo {
  max-width: 36rem;
  margin: 2rem auto;
  padding: 1.5rem;
  border: 1px solid #d1d5db;
}
.memo h1 {
  color: #1e40af;
}

いったん再読み込みし、見出しが青系の色になり、内容の周囲に余白と枠線が付けば成功です。次は`padding: 1.5rem`を`padding: 3rem`に変え、枠の内側の余白が広がるか確認してみましょう。

用語解説：セレクター
CSSで「どのHTML要素にスタイルを適用するか」を指定する書き方です。`.memo h1`は、`memo`クラスの要素の内側にある`h1`を対象にします。

思ったように変わらなければ、ファイルを保存したか、再読み込みしたか、`class="memo"`のスペルが一致しているかを見直します。CSSが効かないときに原因を順に調べる練習になります。

ステップ3：AIには「答え」ではなく説明と確認を頼む

AIへの依頼は、ただ「サイトを作って」ではなく、何を学びたいかを先に伝えます。生成コードを読む練習なら、いきなり別の完成品を求める必要はありません。

私はHTML/CSSの独学を始めた初心者です。
目的：自分で小さな紹介ページを編集できるようになりたい。
対象コード：下に貼るindex.htmlとstyle.css。
依頼：
1. main、h1、p、.memoの役割をそれぞれ1文で説明。
2. 私が一行だけ変更できる練習問題を2問出す。
3. すぐ正解を出さず、私の回答後に理由を説明する。
条件：新しいライブラリの追加や全文書き直しはしない。
確認：変更前後の見え方を自分で比べる方法も教えて。

プロンプトで役割や条件を指定しても、AIの説明が常に正しいとは限りません。回答と実際のブラウザー表示を照らし合わせ、「どのコードが何に対応するか」を自分の言葉でメモしてください。

参考記事のX投稿は、情報を整理して渡すこと、やらないことを決めること、複雑な作業を段階に分けることを提案しています。ここではそれを初心者の学習行動に置き換えています。