なぜか画面からはみ出す「preタグ」の怪。CSSで美しく折り返すための処方箋
Web制作を始めたばかりの皆さん、こんにちは！
HTMLでプログラミングのコードや、詩のような「空白や改行をそのまま表示したい！」と思ったとき、`pre`タグという頼もしい味方が登場しますよね。
でも、いざ使ってみると……「あれ？ なぜか長い文章が画面を突き破って右側に消えていく……！」なんて経験、ありませんか？
そう、`pre`タグは「入力した通りに表示する」という律儀すぎる性格の持ち主。画面の幅なんてお構いなしに、どこまでも一直線に突き進んでしまうんです。今日はそんな頑固な`pre`タグを、優しくスマートに折り返すための「魔法のCSS」を一緒に学んでいきましょう！
—
そもそも、なぜ`pre`タグははみ出すの？
`pre`タグは「整形済みテキスト（Preformatted Text）」の略。これは、手紙の行間や、詩の絶妙な空白をそのまま守ってくれる「額縁」のようなものです。
この額縁の中身は、どんなに画面が狭くなっても「絶対に勝手に改行してはいけない」というルールが組み込まれています。まるで、絶対に曲がらない固い金属の定規を画面に置いているようなイメージですね。だから、長い文章が入ると画面の外へ「飛び出し」てしまうのです。
—
魔法のCSS：3行で解決する「折り返し術」
この頑固な`pre`タグを、画面の幅に合わせてしなやかに曲げるには、CSSで以下の3つの設定を組み合わせるのがベストプラクティスです。
さっそく、コピペして試してみましょう！
pre {
/ 1. 枠からはみ出た分を、自動的に折り返す設定 /
white-space: pre-wrap;
/ 2. もし単語が長すぎて入り切らない場合、強制的に文字の途中で切る設定 /
word-wrap: break-word;
/ 3. 念のため、はみ出した分にスクロールバーを出す（保険） /
overflow-x: auto;
}
ひとつずつ、優しく解説しますね
1. `white-space: pre-wrap;`
これが今回の主役です！「空白や改行は守るけど、画面幅を超えたらちゃんと折り返してね」というお願いをする設定です。これだけで8割の問題は解決します。
2. `word-wrap: break-word;`
これは「超長い英単語（例えば、めちゃくちゃ長いURLなど）」が来たときのお守りです。単語の途中でパキッと折って、画面に収めてくれます。
3. `overflow-x: auto;`
もしものための安全装置です。万が一、折り返せないような画像や巨大な要素が混じっても、画面を崩さずに「スクロールバー」を出して表示を守ってくれます。
—
現場のリアル：なぜこの設定が最強なの？
プロの現場でも、この組み合わせは「まずはこれを書く」という定番の定石です。
最初は「全部スクロールさせればいいのでは？」と思うかもしれませんが、スマホで閲覧しているユーザーにとって、いちいち横に指をスライドさせて文章を読むのはちょっとしたストレスですよね。
私たちが目指すのは、「見た目の美しさ」と「読みやすさ」の共存です。
基本は`pre-wrap`で折り返し、どうしても収まりきらないときだけ`overflow-x`でスクロールさせる。この「優しさ」が、あなたの作るサイトをグッとプロっぽく見せてくれるんですよ。
—
最後に：つまずいても大丈夫！
最初はうまくいかなくて当然です。「あれ、効かないな？」と思ったら、親要素（`pre`が入っている`div`など）に幅の制限がないか確認してみてくださいね。
CSSは時にわがままですが、一つひとつ仕組みを紐解けば、必ず言うことを聞いてくれるようになります。今日のこの設定が、皆さんのサイト制作の小さな不安を解消する助けになれば嬉しいです。
それでは、また次回の記事でお会いしましょう！楽しいコーディングライフを！
コメント