<pre>: 整形済みテキスト要素
<pre>
は HTML の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。
試してみましょう
コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
---|---|
許可されている内容 | 記述コンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
暗黙の ARIA ロール | 対応するロールなし |
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLPreElement (en-US) |
属性
この要素はグローバル属性のみを持ちます。
cols
Non-standard 非推奨-
1 行あたりの望ましい文字数を示します。これは
width
の標準外の別名です。同様の効果を得るには、CSS のwidth
を使用してください。 width
非推奨-
1 行あたりの望ましい文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の
width
を使用してください。 wrap
Non-standard-
テキストがはみ出た場合の処理に関するヒントを示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の
white-space
を使用してください。
例
HTML
<!-- CSS コードを表示する例 -->
<pre>
body {
color: red;
}
</pre>
結果
アクセシビリティの考慮
整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。
弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。
<figure>
および <figcaption>
要素の組み合わせに、 id
および ARIA role
および aria-labelledby
属性を補ったもので、整形済みテキストを図形として扱い、 figcaption
を図形の別の説明として提供することができます。
例
<figure role="img" aria-labelledby="cow-caption"> <pre> __________________ < 私は牧場の達人です。> ------------------ \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || </pre> <figcaption id="cow-caption"> 「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。 </figcaption> </figure>
仕様書
Specification |
---|
HTML Standard # the-pre-element |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS:
white-space
,word-break
- 関連する要素:
<code>