自分のページの、見出しの色を変えたい。文字を少し大きくしたい。それだけのことなのに、ファイルを開くと記号だらけで、どこを触ればいいのか分からない。AIに頼めば直してはくれますが、毎回それでは、自分の家の電気のスイッチを毎回業者に押してもらうようなものです。
ここから第2部です。合言葉を先に言っておきます。"書けなくていい、読めればいい"。この講では、ページの見た目がどこで決まっているのかを、自分の目で追えるようになります。
設計図と内装カタログにたとえます。
家を建てるとき、間取りを決める設計図と、壁紙や家具を決める内装カタログは別の書類です。「ここに部屋がある」ことと、「その部屋の壁が白い」ことは、別の場所に書いてある。
Webページもまったく同じ作りです。
自分の一枚を思い出してください。名前や挨拶の文はHTML側に、色や余白はCSS側に書かれています。
これが分かると、「どこを触ればいいか」の見当が一瞬でつくようになります。文章を直したい・項目を増やしたい→間取りの話だからHTML。色・大きさ・配置を変えたい→内装の話だからCSS。逆に言うと、色を変えたいのにHTMLをいじり始めたら、それは壁紙を替えたくて壁を壊している状態です。
HTMLをのぞくと、＜h1＞や＜p＞のような、山カッコの札がたくさん出てきます。これはタグ（その部分が何であるかを示す札）で、h1なら大見出し、pなら段落。全部覚える必要はありません。「札で意味づけされた箱が並んでいて、CSSはその札や名前を目印に飾りをつけている」・・・構造としてはこれだけです。
自分の一枚をブラウザで開き、第1講で使った検証ツール（開発者ツール）をまた開いてください。今回はNetworkではなく「Elements」（要素）というタブです。
種明かしをすると、この書き換えは保存されません。再読み込みすれば元通り。つまりここは、何をどう壊しても実物が無事な"試着室"です。今後、見た目をいじりたくなったら、まず試着室で当たりをつけてから、ファイル本体を直す。この順番を覚えてください。
そのまま貼って使えます。
見た目を直すつもりで、構造を壊すこと。
よくあるのはこうです。文字の位置を少し下げたくて、HTMLに空の段落を連打する。目立たせたくて、本文の途中を無理やり大見出しのタグで囲む。画面上は思い通りになった気がします。でも、間取り図に「廊下（ただし物置として使用）」と書いているような状態で、あとで読む人・・・未来の自分と、AIと、検索エンジンが、全員誤読します。
ルールは、さっきの見当のつけ方と同じです。見た目の用事はCSSで済ませる。HTMLを触るのは、中身と構造を変えるときだけ。迷ったら、直す前に質問例の3つ目・・・「この直し方で影響が出ないか」をAIに聞いてから手を動かしてください。