HTMLのpreタグの使い方まとめ！スペースや改行を保持して表示

html

HTMLのpreタグについて書いています。

pre(preformatted text)タグは、要素内に記述されたテキストの空白文字（スペース、タブ、改行）をそのまま保持して表示するために使用されます。
これは、詩、ソースコード、ASCIIアートなど、テキストのフォーマットが重要であるコンテンツを表示する際に非常に役立ちます。

preタグの基本的な使い方

preタグで囲まれたテキストは、HTMLソースコードに記述された通りの空白と改行を維持してブラウザに表示されます。
通常、等幅フォント（monospace font）でレンダリングされます。

<pre>
  これは
  改行を含む
  テキストです。
  　インデントも
  そのまま表示されます。
</pre>

上記のHTMLは、ブラウザで以下のように表示されます。
HTMLのpreタグの表示を確認

preタグの意味合い

preタグは、囲まれたテキストが整形済みであることを示します。
これは、テキストのレイアウトが重要であり、ブラウザが通常のテキストのように空白を圧縮したり、改行を無視したりしないことを意味します。

preタグにスタイルを適用する

preタグのデフォルトのスタイル（等幅フォント、空白と改行の保持）は、CSSで上書きしたり、さらに他のスタイルを追加したりすることができます。

pre {
  font-family: "Courier New", Courier, monospace; /* より明示的に等幅フォントを指定 */
  background-color: #f4f4f4; /* 薄い背景色 */
  padding: 10px; /* 内側の余白 */
  border: 1px solid #ccc; /* 枠線 */
  height: 200px; /* コンテンツの縦幅を指定 */
  overflow: auto; /* 長いコンテンツの場合にスクロールバーを表示 */
  white-space: pre-wrap; /* 長い行を折り返す */
}

上記のCSSでは、preタグに対して背景色、枠線、パディングなどを設定しています。
そして、縦幅を指定しoverflow: auto;によってコンテンツがはみ出す場合にスクロールバーを表示するようにしています。

また、white-space: pre-wrap; を使用すると、preタグの空白と改行を保持しつつ、要素の幅に合わせて長い行を折り返すことができます。（デフォルトの white-space: pre では折り返されません）

下記のようにテキストを用意して、ブラウザで確認しました。

<pre>
  テスト
  テストテスト
  テストテストテスト
  テストテストテストテスト
  テストテストテストテストテスト
  テストテストテストテストテストテスト
  テストテストテストテストテストテストテスト
  テストテストテストテストテストテストテストテスト
  テストテストテストテストテストテストテストテストテスト
  テストテストテストテストテストテストテストテストテストテスト
  テストテストテストテストテストテストテストテストテストテストテスト
  テストテストテストテストテストテストテストテストテストテストテストテスト
</pre>

ブラウザに表示すると、スタイルが適用されていることが確認できました。
preタグにスタイルを適用

preタグの使用例

preタグは、以下のようなコンテンツを表示する際に役立ちます。

  • ソースコード: プログラミング言語のコードをそのままのインデントと改行で表示する。
  • ASCIIアート: 文字で描かれた図形やイラストを表示する。
  • ログファイル: サーバーやアプリケーションのログをそのままの形式で表示する。
  • 詩: 行ごとの改行や空白が重要な詩のテキストを表示する。
  • 設定ファイル: 構造が重要な設定ファイルの内容を表示する。

ソースコードの例

<pre>
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');
</pre>

ブラウザで表示すると、下記のようになります。
preタグでソースコード表示

ASCIIアートの例

<pre>
   /\_/\
  ( o.o )
  > ^ <
</pre>

ブラウザで表示すると、下記のようになります。
preタグでアスキーアート表示

preタグとcodeタグの組み合わせ

ソースコードを表示する際には、preタグとcodeタグを組み合わせて使用することが推奨されます。

  • <pre> タグ: テキストの整形済み形式（空白と改行の保持）を示します。
  • <code> タグ: 囲まれたテキストがコンピューターコードであることを示します。

preタグの中にcodeタグを配置することで、コードブロックであることを意味的に示し、preタグによってコードのレイアウトが保持されます。

<pre><code>
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');
</code></pre>

<pre><code>
body {
  font-family: sans-serif;
  margin: 0;
}
</code></pre>

preタグを使用する際の注意点

  • HTMLエンティティ: < や > などのHTMLで特別な意味を持つ文字をコード内で使用する場合は、HTMLエンティティ（&lt;, &gt; など）に置換する必要があります。preタグ内でも同様です。
  • 長い行の扱い: デフォルトでは、<pre>タグ内の長い行は折り返されずに要素の幅を超えて表示されることがあります。CSSのoverflow: auto;やwhite-space: pre-wrap;を使用して、水平スクロールバーを表示したり、長い行を折り返したりする対策を検討してください。
  • スタイルの継承: preタグ内のテキストは、周囲の要素のスタイルを一部継承する場合があります。必要に応じて、preタグに明示的にスタイルを設定してください。

まとめ

preタグは、HTMLでテキストの整形済み形式を保持して表示するための重要な要素です。
ソースコード、ASCIIアート、ログファイルなど、レイアウトが重要なコンテンツを正確に表示するのに役立ちます。

codeタグと組み合わせて使用することで、コードブロックを意味的にマークアップし、シンタックスハイライトなどの処理を適用することも可能です。
preタグの特性を理解し、適切な場面で活用することで、Webページの表現力を高めることができます。

HTML
yasuaki

コメント