HTML Living Standard/pre

pre 要素

<pre>要素は、整形済みテキストを表現するために使用されるブロックレベル要素です。この要素を使用すると、テキストの改行やスペースがそのまま画面に表示され、入力されたフォーマットを忠実に再現できます。

定義

<pre>要素は、通常のHTMLでは無視される連続する空白文字や改行をそのまま表示するための要素です。プログラムコードや詩、ASCIIアートなど、整形が重要な内容を記述する際に適しています。

使用方法

以下は、<pre>要素の基本的な使用例です。

<pre>
これは整形済みテキストの例です。
空白や
改行が
そのまま表示されます。
</pre>

このコードは以下のように表示されます：

これは整形済みテキストの例です。
空白や
改行が
そのまま表示されます。

属性

<pre>要素には特定の属性はありませんが、グローバル属性を利用できます。

使用例

コードブロックの例

<pre>要素は、<code>要素と組み合わせることでプログラムコードを表現する際によく使用されます。

<pre><code>
function greet(name) {
  console.log("Hello, " + name + "!");
}
</code></pre>

ASCIIアートの例

整形済みテキストを利用してASCIIアートを表示することも可能です。

<pre>
  /\_/\
 ( o.o )
  > ^ <
</pre>

タブ文字を含む例

<pre>要素内では、タブ文字もそのまま表示されます。

<pre>
項目1	説明1
項目2	説明2
</pre>

注意事項

<pre>要素内にHTMLコードを書く場合、エスケープ処理（例：<, >）が必要です。
改行を含む大量のテキストを扱う場合、スクロール可能な領域を作成することを推奨します。

アクセシビリティ

スクリーンリーダーは<pre>要素を特別に扱うことがあるため、テキストの内容を補足する説明を提供することが推奨されます。
<pre>要素の内容が長すぎる場合、aria-labelやaria-describedbyを使って内容を補足してください。

スタイリング

CSSを使用して<pre>要素の見た目をカスタマイズすることができます。以下は例です：

pre {
  font-family: "Courier New", monospace;
  background-color: #f5f5f5;
  padding: 10px;
  border: 1px solid #ddd;
  overflow: auto;
  white-space: pre-wrap; /* 長い行を折り返す */
}

このスタイル設定により、<pre>要素が視覚的に区別され、可読性が向上します。

使用上のヒント

<pre>要素内で長い行を自動的に折り返したい場合、white-space: pre-wrap;を使用してください。
スクロール可能なテキスト領域を作成するには、overflowプロパティを利用しましょう。