Skip to content

Latest commit

 

History

History
165 lines (130 loc) · 5.99 KB

index.md

File metadata and controls

165 lines (130 loc) · 5.99 KB
title slug l10n
<pre>: 整形済みテキスト要素
Web/HTML/Element/pre
sourceCommit
fdd3ac5598c3ddceb71e59949b003936ae99f647

{{HTMLSidebar}}

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

既定では、 <pre> はブロックレベル要素であり、 {{cssxref("display")}} の既定値は block です。

{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}

<pre> タグ内で <、>、&、" などの予約文字を表示する必要がある場合は、それぞれの HTML エンティティを用いてエスケープする必要があります。

属性

この要素はグローバル属性のみがあります。

  • cols {{non-standard_inline}} {{deprecated_inline}}
    • : 1 行あたりの望ましい文字数を示します。これは width の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
  • width {{deprecated_inline}} {{Non-standard_Inline}}
    • : 1 行あたりの望ましい文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。
  • wrap {{non-standard_inline}} {{Deprecated_Inline}}
    • : テキストがはみ出た場合の処理に関するヒントを示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。

アクセシビリティの考慮

整形済みテキストを使用して作成した画像や図には、代替説明を提供することが重要です。代替説明は、画像や図のコンテンツを明確かつ簡潔に記述する必要があります。

弱視の人やスクリーンリーダーなどの支援技術を使って閲覧している人は、整形済みテキスト文字が順番に読み上げられたときに何を表しているのか理解できないかもしれません。

{{HTMLElement("figure")}} 要素と {{HTMLElement("figcaption")}} 要素の組み合わせや、pre 要素の ARIA の role と aria-label 属性によって補われます。整形済み {{Glossary("ASCII")}} アートは代替テキストを持つ画像としてアナウンスされ、figcaption は画像のキャプションとして機能します。

例

<figure>
  <pre role="img" aria-label="ASCII COW">
      __________________
  &lt; 私は牧場の達人です。&gt;
      ------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
  </figcaption>
</figure>

例

基本的な例

HTML

<p>CSS を使用してフォントの色を変更するのは簡単です。</p>
<pre>
body {
  color: red;
}
</pre>

結果

{{EmbedLiveSample("Basic_example")}}

予約文字のエスケープ

HTML

<pre>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;1 桁の数値&quot;
</pre>

結果

{{EmbedLiveSample("Escaping_reserved_characters")}}

技術的概要

コンテンツカテゴリー フローコンテンツ、知覚可能コンテンツ
許可されている内容 記述コンテンツ
タグの省略 なし。開始タグと終了タグの両方が必須です。
許可されている親要素 フローコンテンツを受け入れるすべての要素
暗黙の ARIA ロール generic
許可されている ARIA ロール すべて
DOM インターフェイス {{domxref("HTMLPreElement")}}

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報

  • CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}
  • HTML エンティティ
  • 関連する要素: {{HTMLElement("code")}}