Day 0・Webページの正体 — HTML/CSS/JSの三層

なぜ基礎が必要か

AIが作ったHTML/CSSを読んで直せると、丸ごとコピペの怖さから抜け出せる。

AIにコードを作ってもらうはとても便利です。でも、AIが出したコードをそのまま丸ごとコピペして貼るだけだと、少し困ったことが起きます。動いているうちは良いのですが、いざ「ここだけ直したい」「なぜか表示が崩れた」となったとき、どこを触ればいいか分からず手が止まってしまうのです。

たとえるなら

AIは、頼めば料理を作ってくれる優秀なコックさんです。でも、あなたが味を全く分からないと、味が濃すぎても「もう少し薄く」と的確に頼めません。基礎(読む力)は、あなたの舌です。舌があれば、AIに正しく直しをお願いできます。

丸ごとコピペの怖さ

中身を分からずに貼ったコードは、後から必ず「読めない負債」になります。小さな修正のたびにAIに全部作り直させることになり、そのたびに別の場所が壊れる、という悪循環に入りがちです。読めれば、壊れた1行だけを狙って直せます。

とはいえ、あなたがゼロからコードを書けるようになる必要はありません。この講座のゴールは「書ける」ではなく「読んで、少し直せる」です。AIが作ったを見て、これは骨組み(HTML)だな、これは見た目(CSS)だな、と当たりをつけられれば十分です。

基礎がないと

「なんか崩れた、全部作り直して」としか言えず、AIも何が問題か分からない。直すたびに別の場所が壊れる。

基礎があると

「見出しの色だけ変えたい。CSSの h1 の color を直して」と場所を指定できる。直しが早く、事故も少ない。

CSS

h1 {
  color: red;
}

この3行が読めるだけで「見出しを赤にしている」と分かる。分かれば color の値を変えるだけで直せる

AIにはこう頼む

基礎があると頼み方が具体的になります。「見出しの色を赤から紺に変えて。CSSの h1 の color の部分だけ直して」のように、場所と変更内容をセットで伝えられると、AIの修正はほぼ一発で決まります。

なぜ今このDay 0を学ぶの?

この先の講座で出てくる話は、すべて「HTMLは骨組み、CSSは見た目」という土台の上に乗っているからです。ここさえ体に入っていれば、この後の細かい話がぜんぶ「あの層の話だな」と整理して受け取れます。

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

理解度チェック

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

この講座が目指しているゴールに一番近いのはどれですか?

AIにコードを作ってもらうとき、基礎(読む力)があると何が良くなりますか。コックさんのたとえを使って説明してください。

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