空白や改行をそのまま表示

HTML文書を作成する時、空白文字が何文字連続していても表示される時には1つの空白に変換されてしまいます。また改行も空白文字の一つとして扱われます。

例えば次のようなHTML文書を作成したとします。

<p>
int main(void){
    printf("Hello World!¥n");
    return 0;
}
</p>

実際にブラウザで表示される時は次のようになります。

連続する空白文字(上記の場合は改行と4つの空白が連続する空白文字)が1つの空白に変換されています。空白は空白として、改行は改行として表示させるには、空白は文字実体参照を使い に変換し改行をbr要素に変換する必要があります。(文字実体参照については「特別な文字の記述(文字実体参照と数値文字参照)」を参照して下さい)。

例えば次のような記述します。

<p>
int main(void){<br />
&nbsp;&nbsp;&nbsp;&nbsp;printf("Hello World!¥n");<br />
&nbsp;&nbsp;&nbsp;&nbsp;return 0;<br />
}
</p>

実際にブラウザで表示される時は次のようになります。

このように記述することで思ったとおりの表示が行われますが、空白文字が非常に多い文章をそのままの形式で表示させようとすると非常に面倒なだけではなくHTML文書も読みにくくなります。このような時に便利なのがpre要素です。

pre要素を使った整形済みテキスト

pre要素はコンテンツとして記述された内容に対して空白文字などに関する変換を行わず入力された通りに表示します。

<pre>
コンテンツ
</pre>

ソースコードなど空白文字や改行を指定した位置で行いたい場合に便利です。またpre要素の場合は等幅フォントを使って表示されます。(実際には閲覧しているブラウザの設定で、等幅フォントに設定されたフォントが使用されます)。

先ほどのサンプルをpre要素を使って書き直すと次のように記述できます。

<pre>
int main(void){
    printf("Hello World!¥n");
    return 0;
}
</pre>

ブラウザで表示される時は次のようになります。

pre要素を使うことで文章に記述したとおりに表示させることができました。

注意事項

pre要素の中であっても多くのインライン要素を記述することは可能です。ただしimg要素など記述できない要素もありますので注意して下さい。

またp要素の場合はブラウザの幅に合わせてテキストは自動で改行されますがpre要素の場合は自動で改行は行われません。その為、ブラウザの幅が短く行に含まれるテキストが表示できない場合は横スクロールバーが表示されます。

簡単なサンプルで試してみます。

<pre>
非常に長い文章を記述しても自動で改行は行われませんので注意して下さい。
なおpre要素内であっても<a href="./index.html">リンク</a>や
<em>強調表示</em>を表す要素を記述すること
もできます。
</pre>

ブラウザで表示される時は次のようになります。

なおタブも記述が可能ですが、タブが空白何文字分として表示されるかは環境によって異なるので使用しないようにして下さい。