HTML preタグ：空白・改行の保持と長い行の折り返し

HTMLリファレンス

作成日 2026-10-30 最終更新日 2026-10-30

HTML <pre> は、空白と改行を保持する整形済みテキスト領域を指定します。<code> と組み合わせてソースコードに使用し、長い行を利用可能な幅で折り返す場合は CSS の white-space: pre-wrap を使用します。

preと通常の段落の違い

通常の段落は、デフォルトのCSSに従って、元のテキストの連続するスペースや改行を1つの空白にまとめます。preタグはデフォルトでこの間隔を維持するため、インデントのあるコード、ログ、間隔が重要なテキストに適しています。デフォルトのフォントは通常等幅フォントですが、CSSでフォントやスペースの扱いを変更することができます。

スペースを使って表形式の見た目を揃えることはできますが、これは表の実際の行や列の関係を提供するものではありません。比較データにはtableを使用し、ASCIIアートのようにスペースで意味を伝える場合は、スクリーンリーダーでも理解できる説明を提供してください。

完全な例：スペースの保持と長い行の処理

次のドキュメントをpre-demo.htmlとして保存し、ブラウザで開いてください。ファイルはUTF-8で保存し、外部ライブラリは必要ありません。横スクロールとワードラップは同じ長い文字列に対して個別に適用されています。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>preの空白と改行の比較</title>
  <style>
    body { max-width: 40rem; margin: 1rem auto; padding: 0 1rem; }
    pre { padding: 1rem; background: #eef2f4; }
    .scroll { overflow-x: auto; }
    .wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>空白と改行</h1>
  <p>one    two
    three</p>
  <pre>one    two
    three</pre>
  <h2>横スクロール</h2>
  <pre class="scroll"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>自動折り返し</h2>
  <pre class="wrap"><code>path/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</code></pre>
  <h2>HTMLソースの表示</h2>
  <pre class="scroll"><code>&lt;p&gt;Hello &amp; welcome&lt;/p&gt;</code></pre>
</body>
</html>

最初の段落はデフォルトのスペース処理に従って1行に結合され、次のpreでは「one」と「two」の間の4つのスペースと、「three」の前の4つのスペースが保持されます。画面を狭めると、スクロール例は横スクロールが現れ、ラップ例は長い単語さえも次の行に改行されます。HTMLソース表示領域では、<p>Hello & welcome</p>はタグ形式のテキストとして表示されます。

pre内のHTMLも解釈されます。

preはHTMLの解釈を防ぐ要素ではありません。実際の<strong>タグをその中に書くと、そのタグの意味が適用されます。HTMLソースをテキストとして表示するには、<を<に、&を&にエスケープしてください。上記のドキュメント全体の最後の例はこの原則を使用しています。

pre開始タグの直後の最初の改行はHTMLパーサによって削除されます。その後の改行やコードのインデントは保持されるため、ドキュメントの整列のためのスペースが画面に表示されないように、テキストの実際の開始位置を確認してください。コードを動的に表示する場合、タグとして解釈されないようにinnerHTMLの代わりにtextContentを使用して文字列を挿入することができます。

自動改行が発生しない場合に確認すること

overflow-wrap のみを指定して white-space: pre をデフォルトのままにすると、希望する改行が表示されないことがあります。画面端で折り返しつつスペースと改行を保持するには pre-wrap を適用し、スペースのない長い文字列を分割するには overflow-wrap も指定します。逆に、コードを単一行構造にしたままにする必要がある場合は、pre を維持し、overflow-x: auto で内部スクロールを提供してください。

pre はテキストのレイアウトを保持し、code は内容がコードであることを示します。両方を組み合わせても自動的に構文の色分けは生成されず、ハイライターや別の CSS が必要です。古い width および wrap 属性に依存する代わりに、CSS で表示を調整してください。詳細な条件については、HTML標準のpre要素の pre 定義および MDNのpre要素リファレンスを参照してください。

HTMLリファレンス