<pre>: 整形済みテキスト要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
<pre>
は HTML の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。
試してみましょう
<pre>
タグ内で <
、>
、&
、"
などの予約文字を表示する必要がある場合は、それぞれの HTML エンティティを用いてエスケープする必要があります。
属性
この要素はグローバル属性のみがあります。
cols
非標準 非推奨;-
1 行あたりの望ましい文字数を示します。これは
width
の標準外の別名です。同様の効果を得るには、CSS のwidth
を使用してください。 width
非推奨; 非標準-
1 行あたりの望ましい文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の
width
を使用してください。 wrap
非標準 非推奨;-
テキストがはみ出た場合の処理に関するヒントを示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の
white-space
を使用してください。
アクセシビリティの考慮
整形済みテキストを使用して作成した画像や図には、代替説明を提供することが重要です。代替説明は、画像や図のコンテンツを明確かつ簡潔に記述する必要があります。
弱視の人やスクリーンリーダーなどの支援技術を使って閲覧している人は、整形済みテキスト文字が順番に読み上げられたときに何を表しているのか理解できないかもしれません。
<figure>
要素と <figcaption>
要素の組み合わせや、pre
要素の ARIA の role
と aria-label
属性によって補われます。整形済み ASCII アートは代替テキストを持つ画像としてアナウンスされ、figcaption
は画像のキャプションとして機能します。
例
<figure>
<pre role="img" aria-label="ASCII COW">
__________________
< 私は牧場の達人です。>
------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
</pre>
<figcaption id="cow-caption">
「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
</figcaption>
</figure>
例
基本的な例
HTML
<p>CSS を使用してフォントの色を変更するのは簡単です。</p>
<pre>
body {
color: red;
}
</pre>
結果
予約文字のエスケープ
HTML
<pre>
let i = 5;
if (i < 10 && i > 0)
return "1 桁の数値"
</pre>
結果
技術的概要
コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール |
generic
|
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLPreElement |
仕様書
Specification |
---|
HTML Standard # the-pre-element |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS:
white-space
,word-break
- HTML エンティティ
- 関連する要素:
<code>