【入門編】preタグ内の長文テキストのオーバーフロー制御 – HTML実践ガイド

こんにちは！フロントエンド開発の現場にどっぷり浸かっていると、時々「えっ、なんでこうなっちゃうの！？」と頭を抱えたくなるような、ちょっとしたトラブルに出くわすことがありますよね。

今日は、プログラミングコードや整形済みのテキストを扱う時に欠かせない `

` タグについて、多くの方が一度はつまずく「あのアレ」を解決する方法をお話ししたいと思います。

`` タグを使ったら、画面から文字がはみ出して大惨事に……！

皆さんは、Webサイトにプログラムのコードを表示させたいとき、どんなタグを使っていますか？ そう、`` タグですよね。

`` は「Preformatted Text（整形済みテキスト）」の略で、書いた通りのスペースや改行をそのまま表示してくれるとっても便利なタグです。でも、いざ長いコードやURLを貼り付けてみると……あらら、親要素の枠を突き抜けて、画面の横から文字がはみ出してしまうことはありませんか？

まるで、「パンパンに詰め込んだスーツケースのチャックが閉まらなくて、中身が飛び出している状態」ですね。あれ、地味に焦りますよね。

大丈夫です。CSSを少し書き足すだけで、この「はみ出し問題」はスッキリ解決できます！

「はみ出し」を封印する魔法のレシピ

この現象を解決するには、CSSで「はみ出そうになったらどうしてほしいか」をブラウザに伝えてあげる必要があります。以下の3つのプロパティをセットにするのが、現場でよく使われる「鉄板の構成」です。


pre {
  / 1. はみ出した分にスクロールバーをつける /
  overflow-x: auto;
  
  / 2. 長い英単語の途中で改行を許可する /
  word-wrap: break-word;
  
  / 3. もっと細かく改行ルールを指定する /
  word-break: break-all;
  
  / 見た目を整えるための余白（お好みで！） /
  padding: 1rem;
  background-color: #f4f4f4;
}


ひとつずつ、優しく紐解いていきましょう

なぜこの設定が必要なのか、少しだけ分解してみますね。


`overflow-x: auto;`

    これは「横幅からはみ出しそうになったら、無理に縮めないでスクロールバーを出してね」という指示です。コードは途中で勝手に改行されると意味が変わってしまうこともあるので、まずは「スクロールで見れるようにする」のが優しさです。

`word-wrap: break-word;`

    これは「単語の区切りがなくても、長すぎたら親要素の端で折り返してね」という設定です。これがないと、URLのように「切れない長い文字列」がコンテナを突き破ってしまいます。

`word-break: break-all;`

    これはさらに一歩進んで、「とにかくどんな場所でも文字をぶった切ってでも、枠内に収めてくれ！」という強力な指示です。コードブロックではここまで指定しておくと、スマホのような狭い画面でも崩れにくくなります。

実際に書いて試してみよう！

では、HTMLにどう組み込むか、シンプルな例を見てみましょう。



function helloWorld() {
  console.log("ここにすごくすごくすごくすごく長いテキストが入ったとしても、もう安心です！");
}



最後に：完璧を目指さなくて大丈夫
Web制作を始めたばかりの頃は、こうした「予想外の表示崩れ」に遭遇すると「自分の書き方が悪いのかも…」と不安になるかもしれません。でも、安心してください。それは皆が通る道ですし、ブラウザの仕様上、どうしても調整が必要なケースはいくらでもあります。
「突き抜けたらCSSで抑え込む」。この引き出しを一つ持っておくだけで、サイト制作のストレスがグッと減るはずです。
もしまた何か分からないことがあっても、焦らず一つずつ解決していきましょうね。応援しています！