SYNCERのロゴ
アイキャッチ画像

ソースコードの改行を表示に反映する方法

ソースコードの改行は、表示される時には空白文字(white space)として扱われます。そのまま反映するには、pre要素を利用しましょう。

デモ

反映する場合

pre要素では、改行やタブ文字が表示に反映されます。

<!-- このコードは編集できます。 -->

<p>改行が表示に反映されます。</p>

<pre>おはよう
こんにちは
こんばんは</pre>

反映されない場合 (デフォルト)

pre要素以外では、空白として扱われます。

<!-- このコードは編集できます。 -->

<p>改行が表示に反映されません。</p>

<div>おはよう
こんにちは
こんばんは</div>
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。