HTML5における<pre>タグの使い方

<pre>タグは、整形済みのテキストをそのまま表示する際に使用するタグです。改行やスペースなどが、必要な箇所に入れてある状態のテキストを、<pre>タグを使うことによって、そのまま表示させることができます。

今回は、HTML5における<pre>タグの使い方をご紹介します。

HTML5における<pre>タグの使い方

<pre>は、改行やスペースをそのまま反映させることのできるタグです。<pre>で囲まれたテキストは、等幅フォントで表示されます。

<pre>〜</pre>

例えば、下記のように改行やスペースを入れたテキストを、そのままの形で表示させたいとします。

<p>
  テスト  テスト テスト

         テストテスト
</p>

表示サンプルです。

スクリーンショット 2016-06-29 10.14.29

<pre>タグが無いと、このように表示されてしまいます。次は下記のように、整形してあるテキストを<pre>〜</pre>で囲んで記述してみましょう。

<pre>
  テスト  テスト テスト

         テストテスト
</pre>

表示サンプルです。

スクリーンショット 2016-06-29 10.15.48

コード上で書いた形のまま、スペースや改行が反映されています。

大変便利な要素なので、覚えておくのをお勧めします。整形済みのテキストをそのまま表示したいとき以外にも、サンプルコードの記述をそのままの形で反映させたい時や、アスキーアートのようなテキストを使っているコンテンツにも便利です。


イベント