preタグ -整形済みテキストを表示する｜HTML辞典
<pre>タグとは？
<pre>タグは、HTML文書内で整形済みテキスト（プレフォーマットテキスト）を表示するためのタグです。
スペースや改行がそのまま維持されるため、コードブロックや詩などの整形されたテキストを表示するのに適しています。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）
ブロックレベルの要素として扱われ、テキストのフォーマットを維持します。
閉じタグの有無
<pre>は開始タグ（<pre>）と閉じタグ（</pre>）の両方が必要です。
基本的な記述方法
<pre> を使用すると、スペースや改行がそのまま表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>preタグの例</title>
</head>
<body>
<pre>
これは整形済みのテキストです。
スペースや改行が保持されます。
</pre>
</body>
</html>ポイント：
<pre>はブロックレベルの要素であり、テキストの書式をそのまま維持する。- コードブロック、詩、ASCIIアートなど、フォーマットが重要なテキストに適している。
使用できる主な属性
<pre>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
| 属性名 | 説明 | 例 |
|---|---|---|
class | CSSのクラスを適用 | <pre class="code-block">...</pre> |
id | 一意の識別子を設定 | <pre id="example">...</pre> |
style | インラインスタイルを適用 | <pre style="color: green;">...</pre> |
CSSを使ったデザイン変更
<pre> のデフォルトのスタイルを変更したい場合、CSSを活用できます。
✅ カスタムスタイルの適用
pre {
font-family: "Courier New", Courier, monospace;
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}<pre>
function hello() {
console.log("Hello, world!");
}
</pre><pre> の適切な使用例
✅ 長いコードブロックの表示
プログラムのコードを適切に表示するのに適しています。
<pre>
function sum(a, b) {
return a + b;
}
console.log(sum(5, 3));
</pre>✅ ターミナルコマンドの表示
コマンドラインの出力をそのまま表示する場合にも有効です。
<pre>
$ ls -l
total 12
-rw-r--r-- 1 user user 1234 Jan 1 12:34 file.txt
</pre>✅ 詩やフォーマットが重要なテキスト
改行やスペースを保持する必要がある詩や文章の表示にも適しています。
<pre>
ふるいけや
かわずとびこむ
みずのおと
</pre><pre> の適切でない使用例（誤った使い方）
❌ 短いコードスニペットに使うのはNG
短いコードには <code> を使用するのが適切です。
<!-- NG：短いコードスニペットに <pre> を使用 -->
<pre>console.log("Hello, world!");</pre>✅ 正しい書き方（<code> を使用）
<p>コンソールに <code>console.log("Hello, world!");</code> と入力してください。</p>❌ HTMLタグの表示にそのまま使うと危険
HTMLコードをそのまま表示する場合、ブラウザが解釈してしまうため、< や > をエスケープする必要があります。
<!-- NG：ブラウザがタグを解釈してしまう -->
<pre>
<p>これは段落です。</p>
</pre>✅ 正しい書き方（エスケープを使用）
<pre>
<p>これは段落です。</p>
</pre><pre> と他のタグの違い
| タグ | 役割 | 視覚的な変化 | 用途 |
|---|---|---|---|
<pre> | 整形済みテキストを表示 | 改行・スペースが維持される | 長いコードブロック・詩・ターミナル出力 |
<code> | 短いコードスニペットを表示 | 等幅フォント | 変数・関数名・短いコード |
<samp> | プログラムの出力を示す | 等幅フォント | コマンドの出力結果 |
<kbd> | キーボード入力を示す | 等幅フォント | キー操作の説明 |
使用上の注意点
✅ 長いコードや整形済みテキストにのみ使用する
- 短いコードスニペットには
<code>を使用する。
✅ < や > のエスケープ処理を行う
- HTMLコードを表示する場合は、エスケープしてブラウザに解釈されないようにする。
関連タグ
まとめ
<pre>タグは、HTML文書内で整形済みテキストを表示するためのタグ です。
スペースや改行を保持できるため、長いコードブロックや詩、ターミナル出力の表示に適しています。
短いコードには <code> を、HTMLの表示にはエスケープ処理を行うのが推奨されます。
