【入門編】white-spaceプロパティによる空白と改行の制御 – HTML実践ガイド

—

そもそも、なぜブラウザは勝手に改行するの？

まず、大前提として知っておいてほしいことがあります。HTMLのソースコード上でどれだけスペースや改行を入れても、ブラウザは「ふーん、余計な空白だね。一つにまとめちゃえ！」と、いわば「空気の読めない整理整頓」をしてしまうんです。

これは、Webがもともと「文章を読むためのもの」だった名残です。でも、デザインにこだわりたい私たちにとって、この「勝手な整理整頓」は時に困りものですよね。そこで登場するのが `white-space` プロパティです。

—

`white-space` の主要なメンバーを紹介します

`white-space`にはいくつか値がありますが、まずはこの3つを覚えておけば怖いものなしです！

1. `nowrap`：頑固な一行主義

「どんなに文章が長くても、絶対に改行させない！」という強い意志を持った設定です。

• イメージ： どんなに長いレシートでも、決してちぎらずに一枚の長い紙として出力し続けるレジのようなものです。
• 使いどき： ボタンのラベルなど、「この単語は絶対に分断されてほしくない」という場所で使います。

2. `pre`：ソースコードの忠実な再現

「書いた通りに表示して！」という設定です。

• イメージ： 詩を書くとき、行間やスペースにこだわりたいですよね。まさにその「紙の上の配置」をそのままWebに写し取る感覚です。
• 使いどき： プログラムのコードを表示する`

  `タグなどでよく使われます。

3. `pre-wrap`：優等生な改行制御

「基本は書いた通りに表示するけど、画面からはみ出しそうになったら空気を読んで改行するね」という、最もバランスの良い設定です。

• イメージ： 広いノートに書いているときはそのまま、端っこまで来たら自然に次の行へ送ってくれる、賢いライターさんのような存在です。
• 使いどき： ユーザーが入力したコメント欄の表示など、元の改行を活かしつつレイアウトを壊したくない場所に最適です。

---

さっそく試してみましょう！

実際に、コードを見ながら体感するのが一番の近道です。以下のコードをコピーして、HTMLファイルを作ってブラウザで開いてみてください。

---

つまずきやすいポイント：なぜ「半角スペース」が消えるの？

よくある質問に「``を並べたとき、間に少し隙間が空いてしまう」というものがあります。これも実は、HTML上で書いた「改行」や「スペース」をブラウザが「空白1つ分」としてレンダリングしているからなんです。

そんなときは、`white-space: nowrap`を親要素に指定してあげるだけで、その隙間が消えてスッキリします。レイアウトが崩れたときは、「あ、ブラウザが勝手に空白を挿入してるな？」と疑ってみてくださいね。

最後に：完璧を目指さなくて大丈夫！

最初は「どの値を指定すればいいんだっけ？」と迷うこともあるでしょう。でも、そんな時は`pre-wrap`を試してみてください。現代のWeb制作において、最も使い勝手が良く、失敗が少ない「正解」に近い値です。

少しずつ、CSSの挙動と仲良くなっていきましょう。あなたの書くコードが、画面の中で美しく整列する瞬間は、本当に気持ちいいものですよ！

また分からないことがあれば、いつでも聞きに来てくださいね。応援しています！