Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<pre>

<pre> は HTML の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。

この要素内の空白は、書かれたまま表示されますが、1 つの例外があります。開始タグ <pre> の直後に 1 つ以上の先頭改行文字が含まれている場合、最初の改行文字が削除されます。この変換は HTML パーサーによって行われ、XHTML を使用する場合は適用されません。

<pre> 要素のテキストコンテンツは HTML として構文解析されます。そのため、テキストコンテンツを確実にプレーンテキストのまま実現したい場合は、< などの一部の構文文字について、それぞれの文字参照を使用してエスケープする必要がある場合があります。情報については、曖昧な文字のエスケープをご覧ください。

<pre> 要素にはよく <code>、<samp>、<kbd> といった要素を内包し、それぞれコンピューターのコード、コンピューターの出力、ユーザーの入力を表します。

デフォルトでは、 <pre> はブロックレベル要素であり、 display のデフォルト値は block です。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<pre>
1
12
1
≤4
18
≤3.2
DOM API
HTMLPreElement

HTMLPreElement インターフェイスは、（継承によって利用できる HTMLElement インターフェイスのものに加えて）整形済みテキストのブロック (pre) を操作するための固有のプロパティやメソッドを公開します。
1
12
1
3
18
1
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML 
<pre><code>function hello() {
  console.log("Hello, World!");
}
hello();</code></pre>

ライブデモ

整形済みテキスト

pre 要素で空白や改行をそのまま表示。コードブロックに使用。

プレビュー全画面表示

行番号付きコード

CSS カウンターで行番号を表示するパターン。

プレビュー全画面表示

アスキーアート

pre で空白を保持したアスキーアートを表示。

プレビュー全画面表示

実務での使いどころ

  • <pre> の活用

    <pre> は HTML の要素で、整形済みテキスト (preformatted text) を表します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク