「あれ、なぜ崩れるの？」を解決！`
`要素で空白や改行を思い通りに操る方法 Web制作を始めたばかりの頃、誰もが一度はぶつかる「謎の現象」があります。 「HTMLにきれいに改行を入れて書いたのに、ブラウザで見ると全部繋がって表示される！」 「コードをきれいにインデントしたはずなのに、詰め詰めになって読みにくい！」 実はこれ、ブラウザという「几帳面すぎる整理屋さん」が、「余計な空白や改行は、全部ひとつにまとめてお掃除しちゃおう」という親切心（おせっかい？）を働かせているからなんです。 でも、ソースコードを表示したいときや、詩のように行間を大切にしたいときは、このおせっかいが困りものですよね。そんなときに登場するのが、今回紹介する``要素です。 ---``要素は「そのまま」を愛する魔法の箱
``は「Preformatted text（整形済みテキスト）」の略です。 これを使うと、あなたがテキストエディタで打った「改行」や「半角スペース」を、ブラウザがそのまま律儀に再現してくれます。 例えるなら、「この箱の中身は、絶対に整理整頓しないで！」とブラウザに伝えるための、特別な防護ケースのようなものですね。実践！どう見えるか試してみよう
まずは、普通の``タグと、`
`タグの違いを比べてみましょう。こんにちは！ 今日は いい天気ですね。
こんにちは！ 今日は いい天気ですね。結果のイメージ：
- `
`の方：`こんにちは！ 今日は いい天気ですね。` （空白は1つにまとめられ、改行も無視される）
- `
`の方：` こんにちは！` （インデントも改行もそのまま！）
ね、全然違いますよね。`
`の中では、あなたの書いた通りに表示されるんです。---
なぜデフォルトで「そのまま」になるの？
`
`が空白や改行を保持できる秘密は、CSSの`white-space`というプロパティにあります。実は、`
`要素には最初から以下のスタイルがブラウザによって裏で設定されています。pre {
white-space: pre;
}この`white-space: pre;`という命令は、「コードを書いた時の見た目（空白や改行）を、そのまま表示しなさい！」という強力な指示なんです。
---
現場でよくある「インデントの罠」
さて、ここからが少しだけ技術的な「コツ」のお話です。
プログラミングのコードなどを紹介する際、`
`の中にさらにインデントを入れると、そのインデントまでもが「文字」として表示されてしまい、画面から大きくはみ出してしまうことがありますよね。そんな時は、CSSで少しだけ工夫をしてあげましょう。
pre {
/ これで、長すぎる行も枠内で折り返してくれるようになります /
white-space: pre-wrap;/ 行の先頭にある余計な空白をいい感じに削ってくれることもあります /
tab-size: 4;
}覚えておくと安心なポイント
- `white-space: pre;`: 改行も空白も、そのまま表示（はみ出しても無視！）。
- `white-space: pre-wrap;`: 改行や空白は守るけど、画面幅を超えたら自動で折り返す（現場ではこちらがよく使われます！）。
---
最後に：失敗しても大丈夫！
初めてコードを書いているとき、画面が思い通りにならないと「何か壊してしまったかも？」と不安になるかもしれません。でも大丈夫です。
`
`タグで囲めば、自分が書いた通りの「意図」がそのまま画面に出る。それだけで、コードの可読性はぐっと上がりますし、Webサイトの表現の幅も広がります。もし、「あれ？思ったより余白が広いな？」と思ったら、それはあなたがエディタで書いた「そのまま」が、正直に反映されている証拠です。その素直な挙動を愛してあげてくださいね。
まずは今日、適当な文章を`
`で囲んで、ブラウザでどう見えるか実験してみることから始めてみましょう！あなたのWeb制作ライフが、少しでも快適で楽しいものになりますように。
コメント