【HTML】brタグの使い方のご紹介！改行されない（効かない）場合の対処法もご紹介！サンプル付き！

HTMLでは、段落内で改行をしたい場合、brタグを使用します。

今回は、このbrタグの使い方を徹底解説します。サンプル付きの解説、改行されない場合の対処法もご紹介します。

brタグとは？

brタグとは、「break」の略で、HTMLで改行を行う時に使用する、終了タグが無いタグです。「ビーアール」と読みます。長い文章を改行して読みやすくする場合に使用します。

<p>今日、中国の偵察気球が日本の領空内に侵入しました。<br>
これを受け、日本政府は中国へ抗議。今後日本と中国の対立が激化する可能性があります。</p>

今日、中国の偵察気球が日本の領空内に侵入しました。
これを受け、日本政府は中国へ抗議。今後日本と中国の対立が激化する可能性があります。

上記のように、brタグを使用する事で、ブラウザ上でもしっかり改行が入る事が確認できました。

brタグを入れないとどうなるか

先ほどのサンプルで、brタグを使わない場合、どのような表示になるのか見てみましょう。

<p>今日、中国の偵察気球が日本の領空内に侵入しました。
これを受け、日本政府は中国へ抗議。今後日本と中国の対立が激化する可能性があります。</p>

今日、中国の偵察気球が日本の領空内に侵入しました。 これを受け、日本政府は中国へ抗議。今後日本と中国の対立が激化する可能性があります。

上記のように、brタグを使用しないとブラウザ上で改行されません。テキストエディタ上で改行を行っても、実際の表示画面では、改行は入らないのでご注意ください。

<br>と<br/>の違い

<br>と<br/>の違いは、その文書がHTMLで書かれているか、XHTMLで書かれているかの違いです。HTMLは<br>、XHTMLは<br/>です。

HTMLを使用している場合は、<br>タグを使用すれば大丈夫なので、あまり気にする事はありません。

使用する際の注意点

brタグは、改行を行う為のタグですが、使用する際いくつか注意点があるのでご紹介します。

間隔を空ける目的で使用しない

言葉では、イメージがしにくいと思いますので、下記サンプルコードをご覧ください。

 <p>今日、中国の偵察気球が日本の領空内に侵入しました。<br>
これを受け、日本政府は中国へ抗議。今後日本と中国の対立が激化する可能性があります。</p>
 <br>
 <br>
 <br>
 <p>場所は変わってアメリカでも、中国の偵察気球が確認され、米軍が出動し撃ち落とす事態となりました。</p>

上記の例では、brタグを使って無理やりスペースを作っています。実際の表示画面では、確かにスペースができるのですが、文書構成的に美しくないので、避けるべきです。

スペースを作りたいのであれば、CSSで編集しましょう。

brタグは、段落内で改行する為のものであると頭に入れておいていただければと思います。

多用を避ける

基本的に、brタグは多用をしすぎない事をお勧めします。

理由としては、「ソースコードが見づらくなる」「SP版（スマホ表示）での見栄えが悪くなる」という点が挙げられます。

コーディング作業をする上で妨げになるという点、PC版では綺麗に改行がされていても、SP版だと変な位置で改行が入ってしまい、見づらくなってしまうというケースもあるので、注意しましょう。

改行されない（効かない）場合の対処法

brタグを使用したにも関わらず、改行されないというケースも稀ですがあります。その場合は、下記を確認してください。

CSSファイルの確認

brタグが効かない理由は、基本的に何かが邪魔をしていると考えてください。

例えば、使用しているテーマによって、画面幅のサイズでbrタグが効くか、効かないかが、CSSで定義されている可能性があります。

brタグのNGな使い方のご紹介で、多用すると「SP版での見栄えが悪くなる」とご紹介しました。これを避けるために、CSSが定義されている可能性もありますので、効かない場合は確認してみてください。

スペルミス

事例としてあるのが、スペルミスです。たった2文字ですが、<dr>とbがdになっていたりする場合もありますので、しっかりと確認してみてください。

まとめ

今回は、brタグについてまとめました。

使用頻度が多いタグなので、正しい利用方法を身につけていただければ幸いです。