preタグとは?|ソースコードなどを入力した通りに表示させよう

preタグとは?|ソースコードなどを入力した通りに表示させよう
リンゴ
博士、HTMLコードを入力した通りにブラウザで表示させるにはどうしたらいいんですか?
ブログでコードの書き方などを解説したいんですが…
博士
そんなときは<pre>タグを使えば、入力したコードをそのまま表示できるぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<pre>タグとは

 

<pre>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / パルパブル・コンテンツ
利用場所フロー・コンテンツが期待される場所
内容フレージング・コンテンツ


 
 
<pre>タグは、半角スペースや改行などを入力した通りにブラウザで表示させたいときに使用します。
<pre>とは「preformatted text」の略で、日本語では「整形済みのテキスト」という意味です。
 
 
博士
つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことじゃな。
 
 
<pre>~</pre>で囲まれた範囲のソースはそのまま表示されるため、HTMLコードやプログラムコード、アスキーアートをそのまま表示させたい場合に利用できます。

ただし、<pre>~</pre>の中でもタグは解釈されるため、HTMLコードをそのまま表示したい場合は、「<」と「>」を「&lt;」と「&gt;」に置き換える必要があります。
 
 

リンゴ
置き換えないと、きちんと表示されないんですね。
 
 
また、<pre>開始タグ直後の改行は取り除かれます。

一般的に、ソースコードを記述する場合は、<pre>タグと<code>タグを組み合わせて使用します。
 
 

使用例

 
 

表示例

見出しh2には以下のようなスタイルを指定します。

 
 

まとめ

半角スペースや改行などを入力した通りにブラウザで表示させたいときは、<pre>タグを使用します。
 
 

博士
プログラムコード、アスキーアート、電子メールの内容をそのまま表示させたいときに利用できるぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








preタグとは?|ソースコードなどを入力した通りに表示させよう