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

ブラウザはどう表示するか

ブラウザはHTMLを上から読んで画面を組み立てる。設計図から家を建てる大工さんのイメージ。

HTMLファイルは、実はただの文字が並んだテキストです。それをきれいなページに変えているのが、Chromeなどの「ブラウザ」というソフトです。ブラウザはHTMLを上から順番に読んで、画面を1つずつ組み立てていきます。

たとえるなら

HTMLは家の設計図、ブラウザは設計図を見て家を建てる大工さんです。設計図に「玄関、次にリビング、次に階段」と書いてあれば、大工さんはその順番どおりに建てます。だからHTMLの順番を入れ替えると、表示される順番も変わります。

ここで大事なのは「上から順番に読む」という点です。だからHTMLに書いた順番が、そのまま画面の縦の並び順になります。文章より先に画像を書けば画像が上に、後に書けば下に出ます。AIが作ったページで「並び順を変えたい」ときは、CSSより先にHTMLの並びを見るのが近道です。

HTML

<h1>タイトル</h1>
<p>本文が続きます。</p>
<img src="photo.jpg" alt="写真">

この順で書くと、画面もタイトル→本文→写真の順に上から並ぶ

なぜ「読む順番」を知ると得なの?

AIが作ったページで要素の位置がおかしいとき、原因が2種類あると切り分けられるからです。1つはHTMLの並び順そのもの、もう1つはCSSの配置指定です。読む順番を知っていれば「まず並び順を見る、次にCSSを見る」と順序立てて調べられます。

AIにはこう頼む

「写真を本文より上に表示したい」と頼むだけで通じますが、「HTMLで img を p より前に移動して」と言えると、AIの直し方が正確になり、あなたも結果を確認しやすくなります。

つまり、ブラウザの中では「ブラウザがHTMLを読む → CSSで飾る → JSで動かす」という流れが毎回起きています。あなたがコードを直すのは、この設計図(HTMLやCSS)のほうです。設計図を直せば、大工さん(ブラウザ)が建て直してくれる、と考えると気がラクになります。

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

理解度チェック

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

ブラウザがHTMLを読むとき、要素はどんな順で処理されますか?

AIが作ったページで、要素の縦の並び順を変えたいとき、まず見るべきなのはどれですか?

ブラウザがWebページを表示する流れを、設計図と大工さんのたとえで説明してください。

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