なぜHTMLの「空白」は無視されるの？ブラウザの気まぐれなルールを解き明かす
Webサイト制作を始めたばかりの皆さん、こんにちは！
HTMLを書き始めて、ふとこんな経験はありませんか？
「コード上では綺麗に改行して、スペースをたくさん空けたのに、ブラウザでプレビューしてみたら全部詰まって表示されてる……！」
実はこれ、初心者が誰もが一度は通る「お約束」のような壁なんです。今日は、なぜブラウザがそんな意地悪（？）をするのか、そしてどうすれば思った通りのレイアウトにできるのか、その仕組みを紐解いていきましょう。
—
1. ブラウザは「空白」をまるで「お片付け」しちゃうんです
HTMLの世界において、ブラウザは少し潔癖症な整理整頓好きだと思ってください。
私たちがエディタ上でどんなにスペース（半角スペース）を入れたり、Enterキーで改行を繰り返したりしても、ブラウザはそれらを「全部まとめて、ただの『半角スペース1つ分』に圧縮」してしまいます。
なぜそんなことをするの？
これは、Webサイトが「どんな端末で見られても崩れないようにするため」という、先人たちの知恵から生まれたルールなんです。例えば、画面が狭いスマホで見たときに、コード上の改行がすべて反映されてしまったら、文章が変なところでブツ切りになって読みづらくなってしまいますよね。
ブラウザは「余計な隙間は無視して、テキストを隙間なく流し込む」という、親切心からそのように動いているんです。
—
2. 実際に見てみましょう
まずは、この「無視される現象」をコードで確認してみます。
こんにちは。
今日はいい天気ですね。
どうでしょう？ エディタの見た目とブラウザの表示が全然違いますよね。でも、大丈夫です。これが正常な挙動なんです。
—
3. 「そのまま表示して！」を叶えるヒーロー：` `要素
もし、詩の朗読やプログラミングのコードなど、「どうしてもこの改行やスペースを維持したい！」という場面に出会ったらどうすればいいのでしょうか。 ここで登場するのが、``要素です。 `
`は「Preformatted text（整形済みテキスト）」の略で、ブラウザに対して「余計なことはしないで、書かれた通りに表示してね！」と伝えるためのタグなんです。``タグを使った例
ああ、春の風が そよぐ午後。 ここは、そのままの形が保たれます。これを使うと、まるでタイプライターで打ったような、独特な等幅フォントでそのままのレイアウトが表示されます。
---
4. もっと賢く「空白」をコントロールする方法
「`
`だとフォントが変わってしまうし、ちょっと使いにくいな……」という場面も多いはずです。現代のWeb制作では、``タグだけに頼らず、CSSという相棒を使って空白を操るのがプロのやり方です。CSSの`white-space`というプロパティを知っておくと、世界が変わりますよ！
- `white-space: pre;` ： `
`タグと同じ挙動にする。
- `white-space: nowrap;` ： 改行を禁止して、無理やり1行に収める。
- `white-space: pre-wrap;` ： 空白と改行は維持しつつ、画面幅に合わせて折り返しはしてくれる（これが一番使いやすいです！）。
---
最後に：つまずくのは、理解しようとしている証拠
HTMLを触り始めたばかりの頃は、「思った通りにならない！」と焦ることもありますよね。でも、それはブラウザの仕組みを肌で感じようとしている、とても素敵なプロセスです。
「空白は基本、無視される。でも、指示を出せば言うことを聞いてくれる」
この基本さえ頭の片隅にあれば、もうレイアウトで迷うことはありません。焦らず、少しずつ楽しみながら、理想のページを作っていきましょう。また分からないことがあったら、いつでも聞きに来てくださいね！
コメント