preタグは使いたいけど、フォントを変えたくないとき
divタグとwhite-spaceプロパティを使いましょう。
そうすると、pre要素のように、ブロック要素となりスペースや改行は維持されます。
pre要素とは
pre要素の特徴を3つあげます。
スペースや改行が維持
ブロック要素
等幅フォント
フォントを変えずにpre要素を作る
上であげた、等幅フォント以外の2つの特徴を実現しましょう。
まず、ブロック要素です。
これはdivタグで作れます。
div
div要素はスタイルがついてない、ブロック要素です。
レイアウトを整えたり、要素をグループ化したりするときに重宝しますね。
次に、スペースや改行の維持です。
white-spaceプロパティを使いましょう。
プロパティの値をpreにすると、スペースや改行は維持されます。
white-space: pre;
参考:
white-space
Whitespace (ホワイトスペース)
よって、例えば以下のdiv要素はフォントが変わらないpre要素となります。
<div class="div-pre">...</div>
.div-pre {
white-space: pre;
}
おわりに
今回は、divタグとwhite-spaceプロパティを使い、フォントが変わらないpre要素を作りました。
ぜひお試しください。
この記事が気に入ったらサポートをしてみませんか?