HTMLでコーディングをしているとき、たまにpreタグを目にすることはないでしょうか。頻繁に使用されるタグではないため「使い方がよくわかっていない」という方も多いのです。今回は、知っておくと意外と便利なpreタグの概要や使用例などについて分かりやすく解説をしていきます。また、preタグとよく似たタグとして並べられるcodeタグの使い方や、preタグとの違いについてもお話ししていきます。
preタグとは
まずはpreタグの概要を押さえましょう。preタグとは「Preformatted Text」の略で「整形済テキスト」という意味になります。preタグで囲われた文字は入力されたソースのままHTMLに表示されることになります。つまり、preタグの間にほかのタグを入力しても、そのタグがそのままの形で表示されるということです。
preタグに関する注意点
上記で「preタグで囲われた文字は入力されたソースのままHTMLに表示される」と述べました。ただし特殊文字である「」はpreタグをもってしても表示することができません。しかしHTMLには「」を置き換えることができる記号があります。以下に表示します。
- ・< →「& lt;」（&とlt;の間に半角スペースは必要ありません）
- ・> →「& gt;」（&とgt;の間に半角スペースは必要ありません）
もしpreタグの中にいずれかのタグを含ませるのであれば、「」は、「& lt;」「& gt;」に置き換えるようにしましょう。preタグのなかにそのまま「」を使用してしまうと、タグとして認識されてしまうため、要注意です。
preタグの使用例
さて、こちらで実際にpreタグの使用例を紹介していきます。テキストエディタなどを用いて、実際に入力してみてください。
簡単なpreタグの使用例
preタグを使用すると「<p>」タグが変換されずに表示されます！
上記のテキストでは「preタグを使用すると「<p>」タグが変換されずに表示されます！」と表示されているはずですが、もちろん「」には「& gt;」を当てはめてくださいね。（前述の通り、どちらも半角スペースは不要です。）
簡単なpreタグの使用例2
preタグを改行タグの「<br>」を使っても改行されることはありません！
上記の通り、改行タグの「<br>」を使用したとしても、改行はされません。
preタグで折り返し改行をする使用例
しかし、中にはpreタグ内で折り返し改行をさせたいという場合もあるでしょう。その場合には、以下のようにCSSと組み合わせて、折り返し改行を実現させることが可能です。
HTMLファイル
ポテパンはエンジニアと企業の最適なマッチングを実現します。技術理解のある経験豊富なコンサルタントが在籍するポテパンだからできる、エンジニアの希望を高度に叶えたお仕事紹介。フリーランス案件や正社員求人、他にもインターンシップやリモート案件 ...
CSSファイル
pre {
white-space: pre-wrap ;
width: 200px;
}
上記の通り、CSSファイルにはと「width: 200px;」が指定されています。CSSでwidthを指定することによってpreタグという要素自体の幅を指定し、その幅に従って折り返す（pre-wrap）という意味のCSSです。
codeタグも使ってみよう
oreタグとよく似たタグとしてよく紹介されているのがcodeタグです。このタグは、HTML/CSS、JavaScriptなどのコードをそのまま表示することができるタグです。実際に使い方を見てみましょう。
pre {
white-space: pre-wrap ;
width: 200px;
height: 300px;
color: blue;
background-color: red;
}
このようにcodeタグでコードを囲んであげることで、書いたコードをそのまま記述することができるのです。
preタグとcodeタグの違いは？
preタグとcodeタグの違いはどのようなところにあるのでしょうか。以下に改めてそれぞれのタグの意味を記述するため、その違いを整理してみてください。
preタグは整形済みであることを表すことができる要素です。整形済みであることを表すということは、つまりpreタグで囲まれた範囲内に不必要な空欄であったり、タブであったりが存在しないということを表します。
たとえば、複数の空欄が連続して入力されていたり、改行やインデントが含まれていたとしても、preタグで囲まれていなければ半角の空欄などに変換されてしまいます。しかし、preタグを使用すれば入力した通りに表示してくれるようになるのです。
codeタグは、「Computer Code」の略語を示すタグです。このタグは、ブラウザに対してcodeタグで囲んだ文字列が、ソースコードであるということを示すためのものです。codeタグを使ったものと使わなかったものでは、表示のされ方が変わります。
上記の2タグの違いをまとめると、preタグはタグで囲まれた範囲内に不必要な空欄であったり、タブであったりが存在しないということを表すためのものであり、codeタグはソースコードであるということを示すためのものであるということになります。
codeタグを使わなかったら？
codeタグの説明欄に書いた「codeタグを使ったものと使わなかったものでは、表示のされ方が変わります」という表記にも注目してください。以下は同じCSSのコード記述ですが、codeタグで囲んだものと囲まないものの2通りがあります。
pre {
white-space: pre-wrap ;
width: 200px;
height: 300px;
color: blue;
background-color: red;
}
pre { white-space: pre-wrap ; width: 200px; height: 300px; color: blue; background-color: red; }上記を比べるとその違いは一目瞭然です。codeタグで囲んでおいたCSSのコードはシフトや改行が反映されており、まさに記述した通りに表示されています。しかし、codeタグで囲んでいないCSSのコードは、表示される際に整形され、改行やインデントがすべて失われています。このような違いが生まれるため、コードを記載する際にはこちらのタグを用いることをおすすめします。
まとめ
今回はpreタグの概要や使用例などについて分かりやすく解説をしていきました。コーディングをする際、まれにかもしれませんが「コードをそのまま表示したい」「タグを見える方にしたい」と思うこともあるはずです。そんなケースでは、今回ご紹介してきたpreタグやcodeタグなどを駆使して、思うようにコードを表示できるようにしていきましょう。
【関連記事】
▶︎【HTML】初心者向け。styleの異なる記述方法についての理由と使い方を解説。
▶︎【初心者向け】HTMLのbrタグの意味・使い方・注意点など徹底解説！
▶︎【HTML】プルダウン式メニューの作成方法。SELECTについて初心者にもわかりやすく解説。
