preタグは使いたいけど、フォントを変えたくないとき

divタグwhite-spaceプロパティを使いましょう。
そうすると、pre要素のように、ブロック要素となりスペースや改行は維持されます。

pre要素とは

pre要素の特徴を3つあげます。

  • スペースや改行が維持
  • ブロック要素
  • 等幅フォント

code要素との比較の観点ですが、こちらの記事でもpre要素について述べています。
興味がればご覧くださいませ。

フォントを変えずに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要素を作りました。
ぜひお試しください。
では。


YouTube: ミサキさん

問い合わせ先
Mail: caprico.aries@gmail.com
Twitter: https://twitter.com/caprico_aries(無言フォローもお気軽に)

コメント

タイトルとURLをコピーしました