なぜか改行されない！CSSの「white-space」で文字の表示を自由自在に操ろう
Webサイトを作っていると、こんな経験はありませんか？
「HTMLで改行を入れたはずなのに、ブラウザで見ると全部繋がっちゃう！」
「長い文章が勝手に折り返されて、デザインが崩れちゃう！」
実はこれ、初心者が必ずと言っていいほどぶつかる壁なんです。でも、安心してください。これはブラウザが「親切心」でやっていること。このクセさえ理解してしまえば、テキストの表示は驚くほど自由自在になります。
今回は、その救世主である`white-space`プロパティについて、難しい専門用語は抜きにして、身近な例えを交えながら解説していきますね。
—
そもそも、ブラウザはどうやって文字を扱っているの？
まずイメージしてみてください。ブラウザという名の「几帳面な事務員さん」が、あなたの書いたHTMLを読み取っているところを。
通常、この事務員さんは「半角スペースや改行がいくつ並んでいても、まとめて『半角1つ分』として扱う」というルールを持っています。また、枠からはみ出しそうになったら、気を利かせて勝手に改行してくれます。
これが、Web上の標準的な動作です。でも、時には「ここは絶対に改行させたくない！」「書いたままのスペースを反映させて！」という時がありますよね。そこで登場するのが `white-space` です。
—
1. 「一行で押し通したい！」なら `nowrap`
例えば、メニューボタンや、絶対に崩したくない見出しがありますよね。そんな時は `white-space: nowrap;` を使います。
「nowrap」は「折り返さない（no wrap）」という意味。どんなに長い文章でも、横にぐーっと伸び続けて、絶対に勝手に改行させません。
.menu-item {
/ どれだけ文字が長くても、1行に収めてね！という指示 /
white-space: nowrap;
}
こんな時に便利：
- 「詳しくはこちら」といったボタンの中のテキスト
- スマホで見ても絶対に1行で表示させたい見出し
—
2. 「書いたままの姿を見せたい！」なら `pre`
プログラミングのコードや、詩のように「ここできっちり改行してほしい」「スペースの数もそのまま反映してほしい」という時は `pre` を使います。
これは「preformatted（あらかじめ整形された）」の略。HTMLで書いた通りに表示してくれるので、まるで「原稿用紙」をそのままブラウザにコピー＆ペーストするような感覚です。
.code-block {
/ HTMLの見た目そのまま！改行もスペースも忠実に再現 /
white-space: pre;
}
—
3. 「ちょうどいい塩梅がいい！」なら `pre-wrap`
これが個人的に一番おすすめの「万能選手」です。
`pre` のように「書いた改行やスペースは守る」けれど、画面幅からはみ出しそうになったら「ちゃんと折り返して整える」という、いいとこ取りの性質を持っています。
.message-box {
/ 改行はそのままに、はみ出す時はちゃんと折り返してね /
white-space: pre-wrap;
}
こんな時に便利：
- ユーザーが入力したコメントやメッセージの表示
- プログラムの解説文など、行を大切にしたい場所
—
実践してみましょう！コードで比較
実際にどう違うのか、同じHTMLでプロパティを変えて見比べてみましょう。
ここには改行があります。
- `nowrap` にすると：全て1行に繋がり、枠からはみ出します。
- `pre` にすると：枠を突き抜けて、元の改行位置を守ります。
- `pre-wrap` にすると：スペースと改行を守りつつ、枠内で綺麗に折り返されます。
—
最後に：つまずいても大丈夫！
最初は「あれ？思った通りにならないな」と悩むことも多いはずです。でも、それはあなたが「どう表示させたいか」をしっかり考えている証拠。
`white-space` を使いこなせるようになると、Webデザインの「細かいこだわり」がぐっと表現できるようになります。まずは `pre-wrap` から試して、その便利さを実感してみてください。
Web制作は、一つひとつの小さな積み重ねです。焦らず、楽しみながら一緒に進んでいきましょうね！
コメント