こんにちは！Webの世界へようこそ。
ブラウザという「魔法の箱」が、どうやってあなたの書いたコードを読み取って、画面に綺麗なWebサイトとして映し出しているのか。その裏側にある、ちょっと人間臭い「気まぐれなルール」についてお話ししましょう。
今日は、初心者の方が最初に遭遇する「なぜかレイアウトが崩れる！？」という現象の正体、「ブラウザのパースモード（Quirks vs Standards）」について紐解いていきますね。
—
1. ブラウザは「空気を読む」天才？
まず想像してみてください。あなたは、ものすごく歴史の長い大食堂の料理長です。
この食堂には、世界中からいろんな人がやってきます。現代の洗練された料理を注文する人もいれば、30年前の「昔ながらの、ちょっと雑なレシピ」をそのまま持ち込んでくる人もいます。
ブラウザという存在は、まさにこの料理長です。
もし、昔の雑なレシピを見て「そんなの古い！作らない！」と突っぱねたら、Webサイトは真っ白になってしまいますよね。だからブラウザは、「最新のルールを守るモード（Standards Mode）」と、「昔の書き方にも無理やり合わせてあげるモード（Quirks Mode＝互換モード）」という二つの顔を使い分けているんです。
2. DOCTYPEは「身分証明書」
このモードを切り替えるスイッチが、HTMLファイルの冒頭に書く `` です。
「なんだ、ただの呪文か」と思っていたかもしれませんが、これ、実は「私は最新のルールで書いているから、現代の厳しいルールで解釈してください！」というブラウザへのパスポートなんです。
- `` を書くと： 「Standards Mode（標準モード）」で動きます。現代のCSSのルールを正確に守ってくれる、頼もしいモードです。
- これを書き忘れると： ブラウザは「おっと、この人は昔の古いサイトを作ろうとしているのかな？ じゃあ、適当に空気を読んで調整してあげよう」と、「Quirks Mode（互換モード）」に突入します。
これが、実は悲劇の始まりなんです。
3. なぜ「Quirks Mode」は怖いのか
Quirks（クォークス）とは「風変わりな」「気まぐれな」という意味です。
昔のブラウザ（特に90年代後半のInternet Explorerなど）は、今のCSSのルールとは全く異なる、独特な計算方法をしていました。
例えば、「ボックスの幅（width）」の計算です。
- 今のルール： 「幅100px」と言ったら、中身のコンテンツが100px。枠線や余白は「外側」に追加される。
- 昔の（Quirks）ルール： 「幅100px」の中に、枠線も余白も全部含めちゃう！
もしあなたが現代のCSSで「幅を揃えよう」と思って頑張っているのに、ブラウザが勝手に「昔のルールで計算してやるよ！」と気を利かせたらどうなるでしょう。計算が合わず、レイアウトがガタガタに崩れますよね。
—
実践：ブラウザに「ちゃんと動いてもらう」ためのコード
実際に、違いを確認してみましょう。以下のコードをエディタに貼り付けてみてください。
—
最後に：つまずいたときのアドバイス
もし、あなたがサイトを作っていて「CSSで指定したはずの幅や高さが、なんかズレるな…」と思ったら、真っ先にチェックしてください。
1. ファイルの1行目に `` はあるか？
2. その前に、余計な空行やコメントが入っていないか？
実は、DOCTYPEの前に1行でも空行があると、古いブラウザが「あ、これは古いサイトだな」と勘違いしてQuirks Modeになってしまう……なんていう、嘘のような本当のトラブルも現場ではよくあります。
ブラウザは、あなたのコードを読み取ろうと一生懸命に「空気を読もう」としてくれています。その優しさに甘えず、私たちエンジニアがしっかりと「これは最新のルールで書いていますよ」と宣言してあげる。これが、Web開発の最初の一歩であり、プロの作法です。
大丈夫、最初は誰でも「あれ？」とつまずくものです。
まずは `` の魔法を信じて、コードを書いてみてくださいね！応援しています！
コメント