【初心者向け】HTMLでbrタグを使わない改行方法をご紹介！

HTMLで改行する際にbrタグを使って改行をするケースが多いです。brタグは「Break（改行）」の略でまさに文字通り、brタグを入れた箇所で改行をしてくれるタグです。

下記がbrタグを使ったサンプルコードです。brタグが入っている箇所で改行されていますよね。

brタグの使い方については下記の記事を参考にしてみて下さい。

一方でbrタグでの改行で困る場合もあります。例えば改行したい位置でbrタグを２つ設置した場合にPCとスマホで見え方が違ったり、デザイン上brタグでスペースを空けると思い通りにならないケースが多々あります。

HTMLでbrタグ以外で改行するには、pタグなどブロックレベルの要素を使って改行していく方法があります。

例えば先程の文章をpタグを使って改行してみましょう。

いかがでしょうか。PCとスマホで見ても同じ箇所が改行されています。このようにbrタグでは改行が見た目上PCやスマホで異なりますが、pタグなどブロックレベルの要素で改行することによって、PCとスマホで同じ見た目の改行をすることが出来ます。

pタグなどブロックレベルの要素で改行の役割を与えることで、改行幅（余白）の調整が枠になります。marginやpaddingなどのCSSで簡単に行なえます。

例えば先程のサンプルコードで改行をもっと開けたい場合は以下のようにします。

いかがでしょうか。pタグに対してmargin-bottomを30pxと広くとったため、先程よりも段落同士の余白が広くなりました。

いかがでしたでしょうか？HTMLを勉強している時には「改行＝brタグ」と教えるケースが多いですが、デザイン上の問題でPCとスマホで見た目を統一したい場合にはpタグでの改行がCSSでデザインを修正しやすくおすすめです。

ぜひbrタグを使わない、pタグを使った改行を試してみましょう。