ばけらの HTML リファレンス(未完成)

bakera.jp > 鳩丸リファレンス > ばけらの HTML リファレンス(未完成) > 要素一覧 > pre要素

pre要素

要素名バージョン開始タグ終了タグ分類/親中身
pre2.0, 2.x, 3.2, 4.0, X1.0, X1.1必須必須%preformatted;(%inline;)* -(%pre.exclusion;)
属性名バージョン属性値既定値備考
width3.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; を書くには &amp;amp; とします。
</pre>

このようにすると、em の部分は強調されますし、a の部分はアンカーとなります。

ただし、pre の中では行の幅が固定されていますので、それを変更するような要素は使えません。img, object, applet, big, small, sub, sup, font, basefont がそれに該当します。要素の使用自体が禁止されていますので、行の高さと同じに揃えた img を使ったり、size属性のない font要素で色指定することもできません。

この要素は、主に次のような用途に使われます。

pre はそれなりに便利なものではありますが、みだりに使うと画面の横幅を固定し、嫌われ者の横スクロールバーを生み出す原因にもなります。なお、WCAG2.0の「1.4.8 Visual Presentation (www.w3.org)」の項目では、横幅80文字以下(全角40文字以下)にすることが推奨されています。

width属性は一行の文字数を指定するもので、一行がちょうどその文字数に合うような適切なフォントサイズを採用するよう促すものです。他の要素にある width属性と異なり、要素の横幅を指定するものではありませんので注意が必要です。もっとも、この属性はほとんどのブラウザに無視されてしまいますし、HTML4 では非推奨です。

最近の日記

関わった本など

ウェブの仕事力が上がる標準ガイドブック 5 Webプログラミング