Day 3・実践 — AI生成のHTML/CSSを読んで直す

AIが作ったHTML/CSSの読み方

まず構造(HTML)、次に見た目(CSS)の順で追うと、AIのコードは怖くない。

AIに「かっこいいページを作って」と頼むと、いきなり長いコードが返ってきます。ここで固まってしまう人は多いです。でも大丈夫。読む順番さえ決めておけば、量が多くても迷いません。

たとえるなら

AIのコードを読むのは、知らない街で建物を見るのに似ています。まず「骨組み(何階建てで、どこに部屋があるか)」を見て、そのあと「内装(壁の色やソファの位置)」を見る。骨組みが、内装がです。順番を逆にすると迷子になります。

ステップ1: まず構造(HTML)だけを見る

最初は色やレイアウトのことは忘れて、HTMLのだけを上から順に指でなぞります。見出しはどれか、段落はどれか、リンクやボタンはどこか。ここで「このページには何が置いてあるか」の地図が頭に入ります。

HTML

<header>
  <h1>カフェ・ハル</h1>
  <nav>
    <a href="/menu">メニュー</a>
    <a href="/access">アクセス</a>
  </nav>
</header>
<main>
  <p>朝7時から開いている街のカフェです。</p>
</main>

色の指定は一切ない。でも「上にヘッダー、中に見出しとナビ、下に本文」という骨組みは読み取れる。

たとえるなら

(header や main のような意味を持つタグ)は、部屋のドアに貼られた名札のようなものです。名札を読むだけで「ここは玄関、ここは居間」と分かる。div ばかりのコードは名札のないマンションで、部屋の用途が一目では分かりません。

ステップ2: 次に見た目(CSS)を見る

骨組みが頭に入ってから、はじめてCSSを見ます。は「どの部品を、どう飾るか」の指示書です。(セレクタ)が『どの部品に』、その中括弧の中が『どう飾るか』です。HTMLで見た部品名と照らし合わせながら読むと、迷いません。

CSS

nav a {
  color: #d2691e;
  margin-right: 16px;
}

nav の中の a に対して、文字色とすき間を指定している。ステップ1で見た nav を思い出せば意味がすぐ分かる。

なぜ構造が先なのか

見た目から読むと「この赤い文字はどの部品?」と毎回HTMLに戻る羽目になり、行ったり来たりで疲れます。先に地図(構造)を持っていれば、CSSは地図に色を塗る作業として素直に読めます。だから順番が大事なのです。

AIにはこう頼む

長いコードで迷ったら、AIに「このHTMLの構造だけを箇条書きで説明して。CSSの見た目の話は後回しでいい」と頼みましょう。AIが地図を先に描いてくれるので、あなたは答え合わせをするだけで済みます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

AIが作った長いHTML/CSSを読むとき、おすすめの順番はどれ?

HTMLとCSSはそれぞれ何の役割か、たとえを使って説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。