preタグの機能を違うタグでも使用する方法をご紹介いたします。

preタグはソースそのままの表示を可能にするタグです。通常、HTMLソース上で改行などをしてもブラウザで改行されることはありません。

2行目、「white-space: pre;」プロパティでpreタグの機能をpreタグ以外の要素でも持たせることができます。

1
2
3

.pre {
  white-space: pre;
}

テキストが改行されていることがわかります。ですが、HTMLソースでは<br />タグなどは記述していません。

「white-space: pre;」プロパティを記述することによって、preタグの機能を他の要素にも持たせることができますが、IE6はXML宣言を記述すると後方互換モードになり「white-space: pre;」が機能しないので、注意が必要です。IE6で「white-space: pre;」を使用する場合はXML宣言をはずし標準準拠モードにする必要があります。

1
2
3
4
5
6
7

<p class="pre">
 
    改行など
    ソースそのままの表示を
    preタグ以外でする。
 
</p>

サンプル

CSS

1
2
3
4
5

.pre {
  width: 400px;
  white-space: pre;
  background: #EFEFEF;
}

1
2
3
4
5
6
7

<p class="pre">
 
    改行など
    ソースそのままの表示を
    preタグ以外でする。
 
</p>