pre要素
要素名 | バージョン | 開始タグ | 終了タグ | 分類/親 | 中身 |
---|---|---|---|---|---|
pre | 2.0, 2.x, 3.2, 4.0, X1.0, X1.1 | 必須 | 必須 | %preformatted; | (%inline;)* -(%pre.exclusion;) |
属性名 | バージョン | 属性値 | 既定値 | 備考 |
---|---|---|---|---|
width | 3.2, (4.0), (X1.0) | NUMBER | #IMPLIED |
共通属性 …… %coreattrs;, %i18n;, %events;
preの解説
pre要素は、その中身が空白文字や改行文字によって整形されているということを示します。視覚系のブラウザは、pre の中にある空白文字や改行文字を変換せずに、そのまま扱います。
タブ文字もいちおう有効ですが、非推奨です。タブひとつが空白いくつに相当するかは環境によって異なります。思った通りの表示にならない可能性が高くなりますので、タブ文字は使わないようにしましょう。
よく誤解されているのですが、pre の中でも、マークアップや文字参照は解釈されます。
<pre>
整形済みテキストを<em>強調</em>したり、
<a href="#here" name="here" id="here">アンカーをつけたり</a>することができます。
& を書くには &amp; とします。
</pre>
このようにすると、em の部分は強調されますし、a の部分はアンカーとなります。
ただし、pre の中では行の幅が固定されていますので、それを変更するような要素は使えません。img, object, applet, big, small, sub, sup, font, basefont がそれに該当します。要素の使用自体が禁止されていますので、行の高さと同じに揃えた img を使ったり、size属性のない font要素で色指定することもできません。
この要素は、主に次のような用途に使われます。
- プログラムや HTML のソースコードを表現する。
- 整形された定型詩を表現する。
pre はそれなりに便利なものではありますが、みだりに使うと画面の横幅を固定し、嫌われ者の横スクロールバーを生み出す原因にもなります。なお、WCAG2.0の「1.4.8 Visual Presentation (www.w3.org)」の項目では、横幅80文字以下(全角40文字以下)にすることが推奨されています。
width属性は一行の文字数を指定するもので、一行がちょうどその文字数に合うような適切なフォントサイズを採用するよう促すものです。他の要素にある width属性と異なり、要素の横幅を指定するものではありませんので注意が必要です。もっとも、この属性はほとんどのブラウザに無視されてしまいますし、HTML4 では非推奨です。
- 「pre要素」にコメントを書く