HTMLで改行する方法：brとpタグの使い分け方は？

通常のwhite-space: normalでは、HTMLソースをenterキーで改行しても、そのままの改行位置では表示されません。下の日本語と英字の例では、改行が半角スペースのように表示されます。空白の処理は前後の文字と言語によっても異なります。※ 後ほど「改行が反映される場合」について解説します。

こんにちは
Hello

HTMLの要素と改行の基本

HTMLで改行する方法はいくつかあります。

① brタグで改行

<br>は行を改める要素です。住所や詩など、内容そのものに必要な改行に使います。段落の区切りや見た目の余白には、段落要素やCSSを使います。

こんにちは<br>Hello

上のように、<br>タグを書いたところに改行が入ります。

② display: blockの要素の前後には改行が入る

displayというのは、CSSのプロパティのことです。「プロパティって何？」という方は、ぜひ下の記事にサクッと目を通して頂ければと思います。

displayには何種類もの値があるのですが、代表的なのは下図の4つですね。

ブラウザの標準スタイルでは、段落タグ<p>~</p>やdivタグ<div>~</div>、見出しタグ<h1>~</h1>などにdisplay: blockが指定されています。タグごとにCSSプロパティの初期値が違うわけではありません。

通常フローでは、display: blockの要素は前後の内容と別の行に配置されます。これは<br>による改行とは別のレイアウトの仕組みです。

つまり、通常フローの<p>~</p>や<h2>~</h2>、<div>~</div>は、brタグを使わず別の行に配置されます。親がflexやgridの場合などは、そのレイアウト規則に従います。

<p>こんにちは</p>
<div>hello</div>

↓ display: blockではない要素が前後にある場合でも改行は入ります。例えばspanタグ（display: inline）と並べてみましょう。

<span>こんにちは</span>
<div>hello</div>
<span>こんにちは</span>

displayについてはこちらの記事で詳しく解説しています。

できればbrなどの改行は使いすぎない

上の方法で改行はサクッとできるのですが、少し注意点があります。それは「違うサイズのウィンドウで見たときに、中途半端な位置で改行されてしまう可能性がある」ということです。

上のように、パソコンやタブレットで見たときは綺麗だけど、スマホで見ると中途半端な位置で改行されてしまう、というようなことがあるのです。

ある程度は仕方がないけど、違和感がないように

最近ではデバイスのサイズは本当にまちまちなので、中途半端な位置で改行されてしまうのは、ある程度は仕方がありません（改行がほとんど無いのも見づらいはずですし）。普段からネットサーフィンしている人なら、見慣れているはずです。

文章を書く時はなるべくpタグだけで

<p>~</p>は「段落」を表します。文章の意味のまとまりごとに段落を分け、行の折り返しは基本的に表示幅に任せましょう。段落内でも住所や詩など、内容上必要な改行には<br>を使えます。

1行開けるには？改行の幅調整はCSSで

文章を書いていると「文と文の間に1行ぶん間を空けたい」ということもあると思います。

br連打はやめよう

brを連打すれば、その分だけ改行が入ります。

こんにちは<br><br>Hello

しかし、この方法はあまりおすすめできません。なぜなら、後からまとめてデザインを変更するときに大変だからです。また、余白の大きさなどの見た目に関することはHTMLではなく、CSSで調整するのが理想的とされます。

余白調整用のクラスを作っておく

おすすめは「前後の行との余白調整用のクラスを作っておく」ことです。「クラスって何ぞ？」という方は、こちらをサクッと読んでみてください。

【例】手順1：CSSを用意

例えば「大きめの下余白用」の.bs（ビッグスペースの略にしてみました）と「小さめの下余白用」の.ss（スモールスペースの略）というクラスを作りましょう。
この見本ではpの上下の初期余白を0にしてから、下余白を指定します。隣り合う上下のmarginは相殺される場合があり、次のpに大きなmargin-topが残っていると、小さい下余白だけを指定しても間隔が縮まらないためです。実際のサイトでは必要な範囲に限定して指定してください。

p {
  margin: 0;
}

.bs {
  margin-bottom: 2em;
}

.ss {
  margin-bottom: 0.5em;
}

marginは要素まわりの余白を指定するCSSのプロパティですね。margin-bottomなので、要素の下側のスペースを指定しています。

【例】手順2：HTMLの余白調整したいところでクラス名を追加

余白調整したくなったら、さきほどCSSで指定しておいたクラス名を追加します。大きめの空白を空けたいときには、さきほどの.bsを使います。

<p class="bs">こんにちは</p>
<p>Hello</p>

↓小さめの余白にする場合は、さきほど作った.ssを。

<p class="ss">こんにちは</p>
<p>Hello</p>

これはpタグに限らず、divや見出しタグなどにも使いまわすことができます。

余白調整が効かない？

まず開発者ツールで、CSSが読み込まれているか、対象要素に指定が当たっているか、別の指定で上書きされていないかを確認します。隣接する上下のmarginの相殺や、親のレイアウトも確認しましょう。
同じ出所・重要度・カスケードレイヤーなどの条件で競合する場合、次のように詳細度を上げると優先されることがあります。ただし、対象がmain要素の子孫にある場合の例です。

main .bs {
	margin-bottom: 2em;
}

main .ss {
	margin-bottom: 0.5em;
}

詳しくはこちらの記事をどうぞ。

適用の優先順位を上げるためにmargin-bottom: 2em!important;などと書くこともできます。!importantは宣言の重要度を変えますが、あらゆる指定に必ず勝つわけではありません。重要な宣言どうしでも出所・レイヤー・詳細度などで決まります。原因を確認してから、必要な範囲に限定して使いましょう。

参考：改行が反映されるのは何故？

<br>を使わずとも、HTMLでのenterによる改行が、そのまま反映される場合があります。 これは、CSSのwhite-spaceというプロパティの指定によるものです。

white-spaceの値がpreやpre-wrapだとキーボードの改行がそのまま反映される

white-space: preやwhite-space: pre-wrapという値を指定されている要素内では、enterやSpaceによる改行や連続する空白が保持されます。preは表示幅で自動折り返しをせず、pre-wrapは折り返し可能な位置で自動折り返しをします。

<div class="example">
こんにちは
hello
</div>

.example {
  white-space: pre;
}

「それなら全部Enterで改行されるように、white-space: preやpre-wrapをサイト全体に指定しておけば良いじゃないか」と思われるかもしれませんが、そうすると余計なところに余白が出来まくったりして管理がとっても大変になります。
ソースの改行を見せたい文章など、必要な部分に限定して使い分けましょう。

参考：<br>と<br />の違いは？

brタグにスラッシュが入った<br />を見かけることもあるかと思います。これは<br>と全く同じように改行の働きをします。
どちらも機能するのですが、スラッシュ無しの<br>と書けます。HTMLではこのスラッシュに特別な効果はありません。XHTMLやJSXは構文規則が異なるため、使う形式に合わせます。