catnose
catnose
HTMLの<pre>タグは、整形済みのテキストを表します。
😺preは「preformatted（整形された）」の略です。
preでは改行やスペースがそのまま表示される
<pre>タグ内のテキストは、改行や半角スペース、タブなどホワイトスペースがそのまま表示されます。実際に例を見るのが分かりやすいでしょう。
<p>ただの
段落を
改行する</p>
<pre>preを
使って
改行する</pre>
👆<pre>を使わない場合、HTML上で「ただの（改行）段落を（改行）改行する」と書いても、実際にブラウザに表示されるときには改行は消え、ただの半角スペースになっています。
一方で<pre>を使うと、HTMLでの改行がそのままブラウザの表示に反映されます。改行タグ（<br>）を使わなくても［Enter］で改行できるイメージです。
参考：CSSだけでpreと同じ動きに
<pre>タグ内でホワイトスペースがそのまま表示されるのは、デフォルトでwhite-space: preというCSSが指定されているからです。
つまり、white-space: preを使えば、<pre>タグでなくても、ホワイトスペースがそのまま表示されるようになります。
<div class="my-text">ただの
文章を
改行する</div>
👆たとえば.my-text { white-space: pre }というCSSを書いておくと、my-textというクラスを持つ要素であれば、改行や半角がそのまま反映されるようになります。
preとcodeでソースコードを表示する
複数行のコードを載せるならpreとcodeを使う
<code>は名前の通り「コード」を表すために使うタグです。文章の中で断片的なコードを載せるときには<code>だけを使えば良いのですが、複数行のコードを載せるときには<pre>と<code>を合わせて使うことになります。
具体的な書き方
HTML preの中にcodeを入れる
<pre>
<code>
ここにコードを書く
</code>
</pre>
👆コードを載せるときには<pre>タグの中に<code>タグを入れ、その中にコードを書きます。
<p>サンプルコードを紹介します。</p>
<pre><code>var foo = function (bar) {
return bar++;
};
console.log(foo(5));</code></pre>
👆<pre>タグで<code>を囲むことで、コードの改行や半角スペース、タグがそのまま表示されるというわけです。
CSSでpreのスタイルを変更する
<pre>と<code>によるコード表示のスタイルをCSSで変更するサンプルを紹介します。
pre {
margin: 1em 0; /* ブロック前後の余白 */
padding: 1em; /* ブロック内の余白 */
border-radius: 5px; /* 角丸 */
background: #25292f; /* 背景色 */
color: #fff; /* 文字色 */
white-space: pre-wrap; /* はみ出たときに折り返す */
}
👆背景を黒く塗りつぶし、コード部分を強調したサンプルです。white-space: pre-wrapを指定すると、テキストが1行に収まりきらないときに横にはみ出さずに折り返すようになります。
preで横スクロール可能にする
pre {
margin: 1em 0;
padding: 1em;
border-radius: 5px;
background: #25292f;
color: #fff;
overflow-x: auto; /* ⭐ */
-webkit-overflow-scrolling: touch; /* ⭐ */
}
👆テキストがはみ出たときに横スクロールできるようにするにはpreに対してoverflow-x: autoを指定します。-webkit-overflow-scrolling: touchも指定すると、モバイルブラウザでのスクロールが滑らかになります。
<pre>タグを使う機会として最も多いのは、Webページ上にソースコードを表示するときでしょう。これは<code>タグと合わせて使います。