こんにちは！Web制作の世界へようこそ。フロントエンドの現場で日々コードを書いていると、時々「あれ、なんでここで改行されちゃうの？」「空白が詰まって見えてしまう……」という、ちょっとした違和感に出くわすことがありますよね。
CSSの`white-space`プロパティは、まさにそんな「テキストの表示における小さなモヤモヤ」を解決してくれる魔法の道具です。今日は、このプロパティを「整理整頓のルール」に例えて、優しく紐解いていきましょう。
—
なぜ、HTMLの「空白」は無視されるのか？
まず、知っておいてほしいことがあります。HTMLを書くとき、エディタ上でスペースキーを連打したり、改行をたくさん入れたりしても、ブラウザはそれを「全部まとめて1つの半角スペース」として扱います。
これは、昔のタイプライターが紙を節約するために行間を詰めていた名残のようなもの。でも、現代のWebデザインでは「ここできっちり改行したい！」「空白をそのまま残したい！」というシーンが必ず出てきます。
そんなとき、CSSの`white-space`の出番です。
—
4つの基本ルール：空白との付き合い方
`white-space`には主に4つの設定があります。お買い物のレシートや、手書きのメモを想像してみてください。
1. nowrap：一行に魂を込める
「絶対に改行させない」という強い意志です。スマホで見ているのに横に突き抜けてしまうくらい、一行で表示したいときに使います。
2. pre：見たままの君でいて
「エディタで書いた通りに表示する」という設定です。プログラミングのコード紹介などでよく使われますね。空白も改行も、打ち込んだ通りに再現されます。
3. pre-wrap：優等生スタイル
「見たまま表示しつつ、枠からはみ出たら自動で改行してくれる」という、一番使い勝手のいい設定です。詩を書くときや、ユーザーが入力したコメントを表示するときに重宝します。
4. pre-line：改行だけは守ります
「連続する空白はまとめるけれど、改行だけはちゃんと反映する」という設定。スッキリさせたいけれど、段落の区切りは大切にしたいときにおすすめです。
—
実際に触ってみよう！
百聞は一見にしかず。以下のコードをコピーして、ブラウザで確認してみてください。それぞれの違いが「ああ、なるほど！」と腑に落ちるはずです。
コードを書く時に便利。
空白も、そのままです。
空白や改行も大切に守ります。
空白はギュッと一つにまとめられます。
—
つまずきやすいポイントへのフォロー
初心者の方がよく陥るのが、「`pre` を使ったら枠からはみ出しちゃった！」というケースです。
`white-space: pre;` は、文字通り「書いた通りに」表示するので、枠が小さければ平気で突き抜けてしまいます。そんなときは、迷わず `pre-wrap` を選んであげてください。これだけで、「見た目はきれいに保ちつつ、枠にも収まる」という理想的な表示が手に入ります。
最後に：完璧を目指さなくて大丈夫
Web制作を始めたばかりの頃は、細かい表示のズレが気になってしまうものですよね。「なぜ思った通りにならないんだろう」と悩むのは、あなたがそれだけ細部にこだわっている証拠です。
`white-space`は、いわばテキストの「整列係」です。まずは「`pre-wrap` が一番万能なんだな」と覚えておくだけでも、現場での作業はぐっと楽になりますよ。
焦らず、一つずつ楽しみながら進めていきましょうね。応援しています！
コメント