HTMLで改行する方法はいくつかあり、その中でも代表的なものはpタグとbrタグです。
今回はpタグとbrタグをどういう風に使い分けすればいいのかを徹底的に解説していきます！
かもめHTMLとCSSについて、基礎知識がある前提で解説していきます。少し不安な方は、下の記事から勉強してみてください！
HTMLでエンターキーを押した場合
HTMLでは、Wordやメモ帳などで文章打つ時のようにエンターキーで改行しても反映されません！
<p>
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
</p>では実際に試してみましょう。
サンプルコードではpタグの中で改行しています。
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
しかし、ブラウザを表示させてみるとこのように改行が反映されておらず、１行の文章となってしまいます。
HTMLではエンターを使って改行をしても、ブラウザ表示には反映されません！
HTMLで改行する方法
では、ここからは改行する方法を解説します。HTMLで改行する方法は３パターンあります。
その１：pタグ
<p>吾輩は猫である。</p>
<p>名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。</p>現段階で一番よく使われている改行方法です。
文章を改行したいときは、改行したい塊ごとでpタグ囲うと改行することができます。
HTMLの要素は、すべてブロック要素かインライン要素どちらかの種類です。更に、ブロック要素は横幅いっぱいに伸びる性質があるため、改行されているように見えるというわけです。
| ブロック要素 | h1〜h6、div、pなど |
| インライン要素 | a、span、imgなど |
つまり、pはブロック要素だから改行される（ように見える）というわけです。
その２：br
<p>
吾輩は猫である。<br>
名前はまだ無い。<br>
どこで生れたかとんと見当がつかぬ。
</p>brタグを使用する方法です。このタグを使うと、挿入した場所で強制的に改行されます。
画像を挿入するimgタグ同様、閉じタグが必要ないタグです
その３：white-space: pre;
<p>
吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
</p>p{
white-space: pre;
}CSSには要素内の改行をどう扱うか指定できるwhite-spaceというプロパティがあります。
値は６種類あり、値をpreにするとHTMLに書かれた半角スペース・タブ・改行をそのまま表示することができます。
どれを使えばいいの？
基本的に、改行したい場合はpタグを使用してください！
理由はいくつかありますが、一番の理由がどのデバイスから見たとしても、文章の段組みを綺麗に保つためです。
<p>
吾輩は猫である。<br>
名前はまだ無い。<br>
どこで生れたかとんと<br>
見当がつかぬ。
</p>例えば、先ほどご紹介したbrタグを使用したサンプルコードを見てみましょう。
文章に合わせてbrタグを書き、強制的に改行させています。
このwebページをパソコンで表示した場合……
このように表示されます。
思った通りに表示されていますよね。
ところが、スマホで表示してみると……
- 画面幅に応じた文字の折り返し
brタグでの改行
が重なり、変なところで改行されてしまいます。
pタグを使用すると全てが解決するわけではありませんが、なるべくpタグを使用して意図した通りの改行となるように注意しましょう。
間違った使い方のご紹介
ここからは、注意喚起も含めて間違った使い方をご紹介したいと思います。
SEO的にも、構文的にも間違ったものですので、絶対にやらないよう注意してください。
連続使用：brタグ
<p>
これはダメな例です
<br>
<br>
<br>
brタグを使用して余白を調整するのはやめましょう
</p>文章の間隔を取るために、brタグを連続で書くのはNGです。
brタグで調整するのではなく、CSSで調整するようにしましょう。
連続使用：pタグ
<p>
これはダメな例です
<p></p>
<p></p>
<p></p>
pタグを使用して余白を調整するのはやめましょう
</p>このやり方をすれば見た目上は文章の余白ができます。ただし、空のpを書き続けるのは良くありません。
- 検索エンジンからの評価が下がる
- CSSで不具合がでる
など、デメリットのほうが大きいのでやめましょう。
改行タグまとめ
- 基本的に改行するときは
pタグを使用する brタグは慎重に使うwhite-space: pre;は基本的に使わない- ブロック要素（
hタグ・divタグなど）でも改行される brタグ、pタグの連続使用はやめましょう
