HTMLで改行するには？
HTMLで改行する際にbrタグを使って改行をするケースが多いです。brタグは「Break（改行）」の略でまさに文字通り、brタグを入れた箇所で改行をしてくれるタグです。
下記がbrタグを使ったサンプルコードです。brタグが入っている箇所で改行されていますよね。
HTMLを勉強しはじめです。<br>
WEBサイトを一人で作成できるようになりたいです。<br><br>
将来はエンジニアとして仕事についてスキルを磨き、将来的に起業したいと思っています。<br>brタグの使い方については下記の記事を参考にしてみて下さい。
一方でbrタグでの改行で困る場合もあります。例えば改行したい位置でbrタグを２つ設置した場合にPCとスマホで見え方が違ったり、デザイン上brタグでスペースを空けると思い通りにならないケースが多々あります。
そこでbrを使わない、brタグ以外で改行する方法がおすすめで、次の章で紹介していきます。
HTMLでbr以外で改行する方法
HTMLでbrタグ以外で改行するには、pタグなどブロックレベルの要素を使って改行していく方法があります。
例えば先程の文章をpタグを使って改行してみましょう。
<p>HTMLを勉強しはじめです。</p>
<p>WEBサイトを一人で作成できるようになりたいです。</p><p>将来はエンジニアとして仕事についてスキルを磨き、将来的に起業したいと思っています。</p>いかがでしょうか。PCとスマホで見ても同じ箇所が改行されています。このようにbrタグでは改行が見た目上PCやスマホで異なりますが、pタグなどブロックレベルの要素で改行することによって、PCとスマホで同じ見た目の改行をすることが出来ます。
改行幅（余白）の調整
pタグなどブロックレベルの要素で改行の役割を与えることで、改行幅（余白）の調整が枠になります。marginやpaddingなどのCSSで簡単に行なえます。
例えば先程のサンプルコードで改行をもっと開けたい場合は以下のようにします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
margin-bottom: 30px;
}
</style>
</head>
<body>
<p>HTMLを勉強しはじめです。</p>
<p>WEBサイトを一人で作成できるようになりたいです。</p>
<p>将来はエンジニアとして仕事についてスキルを磨き、将来的に起業したいと思っています。</p>
</body>
</html>いかがでしょうか。pタグに対してmargin-bottomを30pxと広くとったため、先程よりも段落同士の余白が広くなりました。
まとめ
いかがでしたでしょうか？HTMLを勉強している時には「改行＝brタグ」と教えるケースが多いですが、デザイン上の問題でPCとスマホで見た目を統一したい場合にはpタグでの改行がCSSでデザインを修正しやすくおすすめです。
ぜひbrタグを使わない、pタグを使った改行を試してみましょう。