HTMLで改行する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLで改行する方法について、単純に改行する方法と段落をつけて改行する方法に分け、簡単に解説していきます。

単純に改行する方法

HTMLで改行するには、brタグを使います。

brタグではコンテンツを囲むのではなく改行位置に1つのみを使用します。

あいうえお<br>かきくけこ

上記のコードでは、”あいうおえ”の次で改行し、”かきくけこ”と文章を続けています。

段落をつけて改行する方法

段落をつけて改行するには、pタグを使います。

pタグではコンテンツを囲み、段落をつけることで、結果的に改行されます。

<p>あいうえお</p><p>かきくけこ</p>

上記のコードでは、”あいうえお”と”かきくえこ”でそれぞれ段落を作り、改行させています。

書いた改行をそのまま表示する方法

brタグやpタグでは改行がしづらい場合にはCSSを使います。

CSSで”white-space:pre;”と設定すると、タグ内に書いた改行がそのまま表示されます。

div{whtie-space:pre;}

上記のコードは、divタグ内に書いた文章を改行を含めてそのまま表示させるCSSのサンプルコードです。