これは整形済みテキストです。 このように、改行がそのまま反映されます。 このように、タブも反映されます。 このように たくさんの空白を入れることができます。
<ここまで整形済みテキスト>
整形済みテキスト「pre要素」
整形済みテキストと聞くと、何となく難しく感じるかもしれません。
でも、どうってことはありません。改行やタブによるインデント（余白）などをそのまま表示してくれるものだと考えてもらえればよいです。
<pre>と</pre>で囲んだ範囲のテキストが整形済みテキストとなります。
HTMLでは複数の空白は無視され一つの空白にされたり、行頭の空白が無視されたり、タブは空白として扱われます。
しかし、「pre要素」内だったら、そのようなことはありません。たくさんの空白を入れたり、タブでテキストを見やすく調節したりできるようになります。
ちなみに、「pre要素」の「pre」はPreformatted text の頭文字で、フォーマット済みのテキストという意味になります。
pre要素の中でもHTML要素は使用可能
「pre要素」はテキストをそのまま表示するのか？と思うかもしれませんがそうではありません。
たとえば「b要素」「i要素」や、「em要素」「strong要素」、「i要素」「u要素」など、テキスト自体に意味を持たせる要素は「pre要素」内でも使うことができます。
使える要素を詳しく知りたい方は、http://dev.w3.org/html5/spec-LC/content-models.html#phrasing-content-0の3.2.5.1.5 Phrasing content
をご覧ください。
サンプル
今回説明した、「pre要素」を使用したサンプルを用意します。
このサンプルソースはbody要素内(<body>～</body>)に書いてください。
サンプルソースコード
<pre> 先頭に何も入れていない普通の文です。 先頭にタブを入れています。 「 」空白を８個入れています。 <b> 先頭にタブを入れ、ｂ要素で太字にしています。</b> </pre>
表示結果
先頭に何も入れていない普通の文です。 先頭にタブを入れています。 「 」空白を８個入れています。 先頭にタブを入れ、ｂ要素で太字にしています。
「pre要素」のまとめと次回記事について
今回説明した「pre要素」はいかがでしたでしょうか。
このタグを使えばタブや空白が重要なのに勝手に削除されたりするようなことはありません。
次回は、今回説明した、「pre」要素と合わせて使えそうなソースコードを表す「code要素」と「samp要素」の説明をします。
以上、当サイト管理人のAsterismでした。