【HTML Living Standard】pre要素の使い方
pre要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
preオブジェクトは、整形済みテキスト（preformatted text）を表すオブジェクトです。この要素は、ウェブページ上で空白文字（スペース、タブ、改行）やテキストのレイアウトを、ソースコードに記述されたとおりに保持して表示するために使用されます。通常のHTML要素では、連続するスペースは一つにまとめられたり、テキストが自動的に改行されたりしますが、pre要素の内部では、記述されたとおりの改行や連続する空白がそのままブラウザに表示されます。また、テキストは通常、等幅フォントで表示されます。
主に、プログラミング言語のソースコード、シェルスクリプトの出力、アスキーアート、詩など、テキストの正確なフォーマットが非常に重要な情報を表示する場合に利用されます。例えば、ウェブサイトでコードスニペットを共有する際に、インデントや改行が崩れることなく、開発環境で見たままの形でコードを表示するために非常に役立ちます。
セマンティックな意味をより明確にするために、pre要素の中にcode要素を含めることで、表示される内容がコンピューターコードであることを示すことができます。これにより、検索エンジンや支援技術がコンテンツの性質をより正確に理解できるようになります。また、pre要素内のテキストが長くなりすぎると、画面からはみ出して横スクロールが必要になる場合があります。このような場合、CSSのoverflow-x: auto;プロパティなどを適用することで、ユーザーがコンテンツ全体をスムーズに閲覧できるように配慮することが推奨されます。
構文(syntax)
1<pre> 2これは整形済みテキストです。 3スペースや改行が、 4記述したとおりに 5 そのまま 6 表示されます。 7</pre>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML preタグで整形済みテキストを表示する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>preタグのサンプル</title> 7</head> 8<body> 9 <h1>整形済みテキスト（preタグ）の例</h1> 10 11 <p> 12 通常の段落テキストは、ブラウザが空白や改行を整形して表示します。 13 例えば、複数のスペースは1つにまとめられたり、改行は無視されたりします。 14 </p> 15 16 <!-- preタグ内のテキストは、ソースコードで記述した通りの空白や改行が保持されて表示されます。 --> 17 <!-- 主にプログラムコード、ASCIIアート、詩などを表示する際に便利です。 --> 18 <pre> 19 function greet(name) { 20 console.log(`Hello, ${name}!`); 21 } 22 23 greet("World"); 24 greet("HTML"); 25 26 これは 27 インデントや 28 改行が 29 そのまま表示されるテキストです。 30 </pre> 31 32 <p> 33 上記のように、<code><pre></code>タグを使うことで、テキストが整形されずに表示されることを確認できます。 34 </p> 35</body> 36</html>
HTMLの<pre>タグは、「preformatted text（整形済みテキスト）」を表示するために使用される要素です。このタグの最大の特徴は、ソースコードに記述されたテキストの空白（半角スペースやタブ）や改行を、ブラウザがそのままの形で保持して表示する点にあります。
通常のHTML要素（例えば<p>タグなど）では、連続する複数の空白は一つにまとめられ、改行は基本的に無視されて表示されます。しかし、<pre>タグ内のテキストは、記述した通りのインデントや行の区切りが視覚的に正確に反映されます。これにより、プログラムのソースコード、ASCIIアート、詩など、特定の書式やレイアウトが重要となるコンテンツをウェブページ上で忠実に再現することが可能になります。また、表示されるテキストは多くの場合、等幅フォント（文字の幅が全て同じフォント）が適用されるため、文字の位置がずれにくく、構造の視認性が高まります。
<pre>タグ自体は、コンテンツを整形して表示する役割を持つため、特定の引数を受け取ったり、値を返したりする機能は持ち合わせていません。サンプルコードでは、JavaScriptの関数コードや、インデントと改行でレイアウトされたテキストが、ソースコードに記述した通りに表示される様子が確認でき、このタグの挙動を明確に示しています。このように、<pre>タグはテキストの視覚的な構造を忠実に再現したい場合に非常に役立つ要素です。
preタグは、ソースコードで記述した通りの空白、改行、インデントをそのまま保持して表示する点が最も重要です。通常の段落とは異なり、ブラウザがテキストを自動で整形しないため、プログラムコードやASCIIアート、詩など、テキストの見た目が視覚的に重要なコンテンツに利用すると便利です。
この特性から、意図しない空白や改行がソースコードに含まれていると、そのままブラウザに表示されてしまうため、記述時にはテキストの整形に特に注意が必要です。また、多くの場合、等幅フォントで表示されるため、文字が揃いやすくコードの可読性が高まります。HTMLの特殊文字（例えば < や >）をpreタグ内でそのまま表示したい場合は、< や > といったHTMLエンティティに変換して記述することで、ブラウザがHTMLタグとして誤って解釈するのを防ぎ、正しく表示できます。
pre要素でコードをプレビューする
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title><pre>要素のサンプル</title> 7</head> 8<body> 9 <h1><pre>要素を使ったコードのプレビュー</h1> 10 11 <p> 12 <code><pre></code>要素は、整形済みテキストを表示するために使用されます。 13 テキスト内の空白、タブ、改行がそのままの形でブラウザに表示されるため、 14 プログラミングコードやアスキーアートなどを「プレビュー」するのに適しています。 15 </p> 16 17 <h2>HTMLコードのプレビュー例</h2> 18 <!-- pre要素でHTMLコードを整形済みテキストとして表示します --> 19 <pre> 20<!DOCTYPE html> 21<html lang="en"> 22<head> 23 <meta charset="UTF-8"> 24 <title>シンプルなページ</title> 25</head> 26<body> 27 <h1>こんにちは、世界！</h1> 28 <p>これは<strong>HTML</strong>のサンプルです。</p> 29</body> 30</html> 31 </pre> 32 33 <h2>Pythonコードのプレビュー例</h2> 34 <!-- 別のプログラミング言語のコードもpre要素で表示できます --> 35 <pre> 36def greet(name): 37 """指定された名前に挨拶を返す関数""" 38 return f"Hello, {name}!" 39 40message = greet("Engineer") 41print(message) # 出力: Hello, Engineer! 42 </pre> 43</body> 44</html>
pre要素は、HTML文書内で「整形済みテキスト」を表示するための要素です。この要素は、ソースコードに書かれた通りの空白、タブ、改行といった書式をブラウザがそのまま保持して表示するという特徴があります。一般的なHTML要素では、連続する空白は一つにまとめられたり、改行が無視されたりしますが、pre要素内ではテキストのレイアウトが崩れることなく、記述された見た目そのままに「プレビュー」されます。
HTML要素であるため、関数のような引数や戻り値は持ちませんが、その代わりに表示内容の視覚的な整形を制御します。この特性から、プログラミングコードのスニペット、コマンドラインの出力、アスキーアートなど、特定のフォーマットを厳密に維持したいコンテンツの表示に最適です。サンプルコードでは、HTMLコードやPythonコードをpre要素で囲むことで、インデントや改行を含む元の書式を保ったまま表示しています。特に、HTMLコードそのものをpre要素内で表示する際には、<や>といったHTMLタグと認識される特殊文字を、<や>のようにエスケープする必要があります。これにより、ブラウザがタグとして実行するのではなく、単なるテキストとして表示できるようになります。pre要素は、コードや構造化されたテキストを読者に正確に伝える上で重要な役割を果たします。
pre要素は、空白、タブ、改行を記述どおりに表示する「整形済みテキスト」用の要素です。プログラミングコードやアスキーアートのプレビューに適しています。注意点は、HTMLコードを<pre>内に表示する際、<や>などの特殊文字を必ずHTMLエンティティ（例: &lt;, &gt;）に変換することです。これを怠ると、ブラウザがコードをHTMLとして誤解釈し、表示崩れやセキュリティリスクにつながります。HTML以外の他言語のコード表示にも活用でき、通常は等幅フォントで表示されるため、可読性を保ちます。