ソースコードを、見たまま表示させてくれる便利なタグってないのかな？
こんなお悩みや疑問を解決します。
結論から言って、ホワイトスペース（空白部分）をそのまま表示させる方法は“<pre>を使う”です。
本記事では、<pre>を使って整形済みテキストを作る方法を解説します。
スポンサードサーチ
本記事のもくじ
【HTMLの仕組みを知る】記述ルールの基本
あらかじめ、HTMLの記述ルールを知っておくと、<pre>の使い方が理解しやすいと思うので、そこから解説しますね。
HTMLにはざっくりと下記のようなルールが存在します。
HTMLのルールをざっくりと
- 改行は半角スペースとして扱われる
- 半角スペースを連続できない
- タブは半角スペースになる
このようなルールがあるので、基本的にホワイトスペース（空白部分）は無視されてしまうのが特徴です。
実際に、ホワイトスペースをふんだんに使って書いたHTMLの例をお見せしますね。
<p>HTMLで書いた文章は、 このように、空白を入れても、
このように、
改行しても、
あるいは、文の先頭にタブを入れて段落をつけても、
ブラウザで表示する際には、全部ただの半角スペースにされてしまいます。</p>ブラウザで表示すると、、、
そこで、空白やタブ、改行などのホワイトスペースをそのまま表示するために、<pre>が登場するわけです。
スポンサードサーチ
【Preタグとは】整形済みテキストって何？
上記のように、HTMLではどんなホワイトスペースであっても、ただの半角スペース扱いになってしまいます。
それだと、「どうしても、ここにスペースを入れたいッ！！」というときに困るので、<pre>を使ってテキストを“整形済み”にする必要が出てきます。
整形済みテキストとは
整形済みテキストとは、プログラムのソース・コードのように、空白やタブ、改行も含め、ソース・テキストをそのまま表示するテキストのことです。
ちなみに、<pre>は“preformatted text”の略です。
<pre>で囲まれたテキスト要素はファイル内のレイアウトをそのまま反映して等幅で表示されます。そのため、ホワイトスペースも、記述通りに反映されて表示されるというわけです。
【preタグの使い方】整形済みテキストを使う場面
整形済みテキストを使う場面で最も一般的なのは、プログラムコードなどをそのまま表示したいときです。
たとえば、下記のように空白や改行を入れつつ、見やすいコード表示をしたいときなど。
このテキストを整形済みにしないと、とても読みにくくなってしまうので、こんなときに<pre>が役立つというわけですね。
preタグを使わないと読みにくい
<div class="header"> ヘッダーの中身 </div> <div class="content"> コンテンツの中身 </div> <div class="footer"> フッターの中身メニュー </div>
codeタグと組み合わせて使う
ということで、<pre>は<code>と組み合わせて使うのが一般的になります。
» 参考記事：【ソースコードを載せるためのHTMLタグ】codeタグで綺麗なコードを表示しよう
具体的な書き方は下記の通り。
<pre>
<code>
ここにコードを書く
</code>
</pre>
こんな感じで、<code></code>で表示したいソースコードを囲み、それをさらに<pre></pre>で囲むイメージです。
ソースコードをより見やすくする【補足】
ソースコードをより見やすくするために、シンタックスハイライトと呼ばれるJavaScriptを読み込むようにしておくと良いと思います。
シンタックスハイライトでカラフルに色付けしておくことで、読者にとっては読みやすく、コードを書く側には編集しやすくなります。
シンタックスハイライトなし
シンタックスハイライトあり
こちらの記事で詳しい設定方法を解説しているので、合わせて読んでいただければ幸いです。
» 参考記事：【ソースコードを装飾】シンタックスハイライトとは（設定方法を解説）
スポンサードサーチ
まとめ：preタグでテキストを整形済みに
本記事は以上です。
<pre>は、テキストを整形するためのHTMLタグです。
HTMLの基本ルールでは、ホワイトスペースが無視されてしまいますが、<pre>を使うことで、改行やタブ、スペースの連続などが、そのままの形でブラウザ表示されるようになります。
<code>と組み合わせて使うことで、ソースコードをきれいに表示したいときなどに便利なので、この機会に覚えておきましょう。
組み合わせ方は、<pre><code>〜〜〜</code></pre>の順番です。
おわり。
