HTMLのpreタグでコードをそのまま表示させよう！折り返し改行させる方法もご紹介

みなさんHTMLのpre要素をご存知でしょうか？

preタグは普通にWEBサイトを作る上であまり使用頻度の高くないタグですが、サンプルコードをWEBページ上で紹介するプログラミング関連のサイトなどでは非常によく利用するタグになります。

pre要素の「pre」は「preformatted text」の略になります。日本語では「整形済みのテキスト」という意味になります。

HTMLでは通常文章中の改行やスペースなどは、特別なタグ特殊文字がないと表示されませんが、preタグで囲った文章については、整形済みのテキストとして認識され、改行やスペースがそのまま表示されます。

つまりプログラムのソースコードなどをWEBページ上で掲載するには必要なタグになります。

pre要素の書式はとても簡単です。そのまま表示させたいソースコードなどのテキストをpreタグで囲うだけです。

preタグで利用可能な属性はwidthのようなサイズを調整する属性と、グローバル属性になります。

またもしもHTMLのタグをpreタグで表示したい場合は、特殊文字を実体参照に置き換える必要があります。つまりエスケープする形になりますが、下記の表を参考にエスケープさせましょう。
 

つまり、「<p>段落</p>」は「&lt;p&gt;段落&lt;/p&gt;」となります。

それではpreタグを使った例をご紹介します。例として半角や全角スペースを入れた文章と、改行を入れた文章を表示してみます。

いかがでしょうか。preタグに入力した文章はスペースや改行を含め、そのまま結果に表示されているのがわかるかと思います。

pre要素は文章をそのまま表示することが特徴としてありますが、時にデザインの問題で、pre要素の右端で改行したい場合があります。

例えばpre内の文章で1行が長く、preの範囲を超えてしまう場合です。

このような場合はCSSでpre要素に対して、「white-space: pre-wrap;」を加えましょう。

するとpreの範囲内で改行が自動で入り、文章がpreの範囲を突き抜けることはありません。