HTML プリフォーマットテキスト

JPKODA 編集部 May 5, 2026

HTML のデフォルトの設計では、空白（ホワイトスペース）は集約（コラプシング）されます。これは、ソースコード内でいくらスペースやタブ、改行を入力しても、ブラウザがレンダリングする際にはそれらをすべて「1つの半角スペース」にまとめてしまうことを意味します。

通常、この仕様はレイアウトの崩れを防ぐために非常に有用ですが、特定のケースでは、コードに入力した通りのスペースや改行を正確に保持して表示したいことがあります。

そのような場面で活躍するのが、 <pre> タグです。

1. `<pre>` タグを理解する

<pre> は "Preformatted"（プリフォーマット：整形済み）の略称です。

役割： ブラウザに対して「私のフォーマットを勝手に変更しないで！」と伝え、HTML ファイルに入力した通りの形でテキストを表示させます。
フォント： <pre> 内のテキストは、通常、等幅フォント（Monospace font：Courier など）で表示されます。これは、文字の幅が一定であるため、アライメント（文字の位置合わせ）を保つのに非常に役立ちます。
特性： すべての空白、タブ、改行をそのまま保持します。

2.1 通常の段落 `<p>`

<p>
    これ    は     一   つ    の    文    です。
    そこ        には         たくさん      の     
    スペ   
    ース    
    と    
    改    行    が    あります。
</p>

ブラウザの表示結果：

これは一つの文です。そこにはたくさんのスペースと改行があります。

（注：余分なスペースや改行はすべて1つのスペースに集約されています。）

2.2 整形済みテキスト `<pre>`

<pre>
    これ    は     一   つ    の    文    です。
    そこ        には         たくさん      の     
    スペ   
    ース    
    と    
    改    行    が    あります。
</pre>

ブラウザの表示結果（プレーンテキスト）：

これ    は     一   つ    の    文    です。
そこ        には         たくさん      の     
スペ   
ース    
と    
改    行    が    あります。

（注：すべてのスペース、インデント、改行が完全に保持されています。）

3. 主要な機能とメリット

空白の保持： コード内のスペース、タブ、リターンが、そのまま画面上のスペース、タブ、リターンとして反映されます。
等幅フォント： デフォルトでタイプライターのようなフォント（すべての文字幅が同じ）が使用されるため、列を揃えるのに最適です。
ブロックレベル要素： <pre> はブロックレベル要素（Block-level element）であり、新しい行から始まり、利用可能な全幅を占有します。

4. 実践的なユースケース

4.1 ケース 1：ソースコードのスニペットを表示する

これが <pre> の最も一般的な用途です。セマンティクス（検索エンジンや機械にこれがコードであることを伝える意味論）とアクセシビリティを考慮して、通常は <code> タグを <pre> タグの中にネストさせます。

<pre> ：フォーマットを管理（インデントの保持）。
<code> ：セマンティクスを管理（ブラウザにこれがプログラムコードであることを伝える）。

<!DOCTYPE html>
<html lang="ja">
<body>
    <h1>Python 関数の例</h1>
    <p>以下は、シンプルな加算関数です：</p>
    
    <pre>
        <code>
def add_numbers(a, b):
    # この関数は2つの数値の和を返します
    sum_result = a + b
    return sum_result

# 関数の呼び出し
result = add_numbers(5, 3)
print(f"結果は: {result}")
        </code>
    </pre>
    
    <p>注意：コードのインデントと改行が完璧に保持されています！</p>
</body>
</html>

4.2 ケース 2：ASCII アートとターミナルの出力

ASCII アート（文字絵）は、文字の正確な配置に完全に依存しています。 <pre> がなければ、これらの図形は瞬時に崩れてしまいます。

<!DOCTYPE html>
<html lang="ja">
<body>
    <h2>シンプルな ASCII の小さな家</h2>
    <pre>
          /_\
         /   \
        |     |
        |  _  |
        | |_| |
        -------
    </pre>

    <h2>ターミナル出力のシミュレーション</h2>
    <pre>
user@dev-machine ~ % ls -l
total 16
drwxr-xr-x   3 user  staff    96 Oct 20 15:21 Documents
-rw-r--r--   1 user  staff  1234 Oct 22 11:45 report.txt
user@dev-machine ~ % _
    </pre>
</body>
</html>

4.3 ケース 3：構造化されたプレーンテキスト（ログや詩）

サーバーログのようにアライメントの要求が高いテキストや、詩のように改行そのものが表現の一部である内容を表示する場合にも有効です。

<h2>サーバーログのスニペット</h2>
<pre>
[2023-10-23 08:00:01] INFO  ユーザー 'alice' がログインに成功しました
[2023-10-23 08:00:05] DEBUG リクエスト /api/data を処理中
[2023-10-23 08:00:10] ERROR データベース接続に失敗しました...
</pre>

（ <pre> がなければ、これらのログは一行に押し込められ、非常に読みにくくなります。）

5. 重要な注意事項：インデントの罠

<pre> を使用する際、HTML コード自体のインデントには細心の注意を払う必要があります。 <pre> は「すべての空白」を保持するため、タグの開始位置とテキスト内容の間の空白もそのまま表示されてしまいます。

5.1 意図しない余白を生む書き方：

<pre>
    こんにちは、世界！
</pre>

結果： "こんにちは、世界！" の前に、HTML ソースコード上で入れた長いインデント（空白）が表示されてしまいます。

5.2 正しい書き方（左端に揃えたい場合）：

<pre>こんにちは、世界！</pre>

または、コードブロックとして扱う場合は以下のように記述します：

<pre>
def my_function():
    print("コード自体のインデントは保持されるべきです")
</pre>

6. まとめ

<pre> タグは、「見たまま（所見即所得）」のテキスト表示を実現するための強力なツールです。

フォーマット、インデント、改行がコンテンツの意味にとって重要な場合（コード、アート、ログなど）は、 <pre> を使用してください。
通常の Web テキストについては、引き続き <p> を使用し、レイアウト処理はブラウザに任せましょう。
ソースコードを表示する際は、 <code> タグと組み合わせて使用するのが、プロフェッショナルな開発者の標準的なマナーです。

1. <pre> タグを理解する

2.1 通常の段落 <p>

2.2 整形済みテキスト <pre>