HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<pre>
整形済みテキスト（Preformatted Text）要素。テキストを記述通り（空白、改行を保持）に表示します。
info
概要
<pre> 要素は、整形済みテキストを表示するために使用されます。この要素内のテキストは、一般的なHTML要素のように連続した空白が1つにまとめられたり、改行が無視されたりせず、ソースコードに記述された通りの**空白、改行、タブがすべてそのままの形でブラウザに表示**されます。
通常、固定幅フォント（モノスペースフォント）でレンダリングされます。
play_circle
デモ (静的表示)
HTML (Source)
<pre>
function hello() {
console.log("Hello, World!");
}
</pre>
<pre>
(･ω･)
/ /
/ /
/ /
</pre>
Preview (Result)
function hello() {
console.log("Hello, World!");
}
(･ω･)
/ /
/ /
/ /
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| （グローバル属性のみ） | <pre> 要素固有の属性はありません。一般的な class, id, style などのグローバル属性が利用可能です。 |
| wrap(非推奨) | 行の折り返しを制御する属性でしたが、非推奨です。CSSの white-space プロパティで制御すべきです。 |
code
実用例
1. コードブロックの表示（<code>と組み合わせて）
<pre><code class="language-html">
<p>整形済みテキストの例です。</p>
<ul>
<li>インデントも保持されます</li>
</ul>
</code></pre>
2. アスキーアート（AA）の表示
<pre>
∧_∧
(´Д`)
/ \
</pre>
3. スペースや改行をそのまま表示
<pre>
これは 多くの スペースが
含まれた
テキスト
です。
</pre>
lightbulb
知っておくべき重要事項
code
<code>要素との使い分け
**コードブロックを表示する場合**は、セマンティクス（意味）を明確にするために、通常
<pre> は「整形済みテキスト」を表示するためのブロック要素です。一方、<code> は「コンピュータコード」であることを示すインライン要素です。**コードブロックを表示する場合**は、セマンティクス（意味）を明確にするために、通常
<pre> の中に <code> をネストして使います。
format_indent_increase
スクロールバーの出現
<pre> 要素は、内容が親要素の幅を超えると横スクロールバーが表示されることが一般的です（CSSのデフォルト設定による）。長すぎる行は、ユーザーの利便性を損なうため、CSSの overflow-x: auto; や white-space: pre-wrap; などで適切に制御することが重要です。