files/ja/web/html/element/pre/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

---
title: '<pre>: 整形済みテキスト要素'
slug: Web/HTML/Element/pre
tags:
  - HTML
  - HTML コンテンツグループ化
  - 'HTML:フローコンテンツ'
  - 'HTML:知覚可能コンテンツ'
  - ウェブ
  - リファレンス
  - 要素
translation_of: Web/HTML/Element/pre
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;pre&gt;</code> 要素</strong>は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("<a href="/ja/docs/XUL/Style/monospace">monospace</a>") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。</p>

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

<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td>
  </tr>
  <tr>
   <th scope="row">許可されている内容</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td>
  </tr>
  <tr>
   <th scope="row">タグの省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">許可されている親要素</th>
   <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
  </tr>
  <tr>
   <th scope="row">許可されている ARIA ロール</th>
   <td>すべて</td>
  </tr>
  <tr>
   <th scope="row">DOM インターフェイス</th>
   <td>{{domxref("HTMLPreElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみを持ちます。</p>

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

<h2 id="Examples" name="Examples">例</h2>

<pre class="brush: html">&lt;!-- CSS コードを表示する例 --&gt;
&lt;pre&gt;
body {
  color:red;
}
&lt;/pre&gt;
</pre>

<h3 id="Result" name="Result">結果</h3>

<pre>body {
  color:red;
}
</pre>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>

<p>整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。</p>

<p>弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。</p>

<p>{{HTMLElement("figure")}} 及び {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} 及び <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> 及び <code>aria-labelledby</code> 属性を補ったもので、整形済みテキストを図形として扱い、 <code>figcaption</code> を図形の別の説明として提供することができます。</p>

<h3 id="Example" name="Example">例</h3>

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

<ul>
 <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>{{SpecName("HTML5 W3C")}} から重大な変更はない</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>{{SpecName("HTML4.01")}} から重大な変更はない</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td><code>cols</code> 属性を非推奨に変更</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>

<p>{{Compat("html.elements.pre")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li>
</ul>