【入門編】preタグにおけるホワイトスペースの制御 – HTML実践ガイド

「なぜ改行が消えるの？」HTMLの ` ` タグと `white-space` の仲直り術

Web制作を学び始めると、誰もが一度は「あれ？コードエディタで綺麗に改行したのに、ブラウザで見ると全部繋がっちゃってる……！」という洗礼を受けますよね。実はHTMLというやつは、標準では「半角スペースや改行がいくつ並んでいても、ひとつにまとめて無視する」という、ちょっとお節介な性格をしています。そんなとき、救世主として現れるのが `

` タグです。でも、ただ使うだけでは上手くいかないことも……。今日は、この「ホワイトスペース（空白や改行のこと）」との付き合い方を、一緒に紐解いていきましょう！

---

`` タグは「そのまま写す」コピー機

`` は「Preformatted Text（整形済みテキスト）」の略です。その名の通り、「書いた通りに表示する」という使命を持っています。

たとえば、詩を書いたり、プログラミングのコードを貼り付けたりするとき。エディタ上で見たままの形をブラウザに伝えたいなら、`` の出番です。



    ああ、春の朝
    窓を開ければ
    風が吹き抜ける

これだけで、ブラウザは「ああ、この人は改行してほしいんだな」と理解してくれます。便利ですよね。でも、ここからが少しだけ「泥臭い」現場の話になります。
---
現場で遭遇する「はみ出し問題」
`
` タグを使っていて、「横に長すぎて画面からはみ出してしまう！」という経験はありませんか？
実は、`
` は「書いた通りに表示する」という使命に忠実すぎるあまり、たとえ画面の幅を超えてしまっても、無理やり一行で突き進もうとします。まるで、狭い通路で横に広がったまま歩こうとする集団のようなものです。
ここで登場するのが、CSSの `white-space` プロパティという「調整役」です。
魔法のCSS：white-space の使い分け
`white-space` を使うと、`
` の頑固な性格を少しだけコントロールできます。代表的なものを3つ紹介しますね。

`white-space: pre;`
基本形です。「改行もスペースもそのまま！」という、`
` 本来の姿です。
`white-space: pre-wrap;`
これ、一番おすすめです！ 「基本はそのまま表示するけど、画面の端っこに来たらちゃんと折り返してね」という、優等生な設定です。
`white-space: pre-line;`
「改行は守るけど、スペースは適当にまとめていいよ」という、少しだけ大らかな設定です。

---
実践！コードで見る挙動の違い
実際に、CSSで制御してみましょう。お手元のエディタに貼り付けて試してみてください。


  ここには長い文章が入ります。

  改行も、

      こんな風に空けたスペースも、

  すべてブラウザが律儀に守って表示してくれます。

  もちろん、画面幅が狭くなればちゃんと折り返してくれますよ！

---
大丈夫、最初はみんな迷うものです
「なぜCSSでわざわざ指定しないといけないの？」と不思議に思うかもしれません。でも、Webの面白いところは、「デフォルトのルール」と「現場で必要な表示」が必ずしも一致しないところにあるんです。

HTML は、「構造（何が書かれているか）」を担当する。
CSS は、「見た目（どう表示するか）」を担当する。

この役割分担があるからこそ、私たちは画面の幅が変わるスマホやPCの両方に対応した、美しいWebサイトを作れるんです。
もし今、表示が崩れて悩んでいても大丈夫ですよ。それはあなたが「どう見せるのが一番読みやすいかな？」と、ユーザーのことを真剣に考えている証拠です。
まずは `white-space: pre-wrap;` を試してみてください。きっと、あなたのテキストがブラウザの上で、もっと自由で読みやすい姿に変わるはずです。
何か分からないことがあれば、いつでもまた聞きに来てくださいね！応援しています。