目次
はじめに：brタグを使ったのに改行されない？
HTMLを書いていて、
- brタグを書いたのに改行されない
- 思った場所で改行が入らない
- ブラウザで見ると1行のまま
といった経験はありませんか？
<br> は HTMLで改行するための基本タグですが、
使い方や状況によっては「効かない」「反映されない」ように見えることがあります。
この記事では、
HTML初心者がつまずきやすい br改行が効かない原因を
具体例とともに分かりやすく解説します。
brタグとは？
<br> は 強制的に改行を入れるためのHTMLタグです。
文章の途中で行を変えたいときに使用します。
<p>こんにちは<br>はじめまして</p>上記の例では、
「こんにちは」と「はじめまして」が改行されて表示されます。
よくある原因①：brタグの書き方が間違っている
もっとも基本的な原因は、タグの書き方ミスです。
正しい書き方
<br>または XHTML形式で
<br />間違った例
</br>br は 閉じタグを持たないタグなので
</br> のような書き方は正しくありません。
よくある原因②：HTMLとして認識されていない
<br> が 文字として表示されているだけのケースもよくあります。
例：HTMLエスケープされている
<br>この場合、ブラウザは
「タグ」ではなく「文字」として認識するため改行されません。
CMSやPHPで自動的にエスケープされている場合にも起こります。
よくある原因③：displayプロパティの影響
CSSの指定によって、改行が効かないように見えることがあります。
例：display:flex が指定されている
p {
display: flex;
}display: flex; が指定されている要素内では、
brによる改行が 意図通りに反映されない 場合があります。
この場合は、以下の方法を検討しましょう。
- brではなく要素を分ける
- flex-directionをcolumnにする
p {
display: flex;
flex-direction: column;
}よくある原因④：inline要素の中で使っている
span や a などの インライン要素の中では、
レイアウトが想定と異なることがあります。
<span>文章<br>文章</span>この場合、CSSの影響次第で改行が見えにくくなることがあります。
対策
- brを使うのではなく、
pやdivで要素を分ける - レイアウトはCSSで調整する
brタグを使うべき場面・使わない方がよい場面
brを使うべき場面
- 住所や詩のような固定文の改行
- 意味の区切りとしての改行
- 文章内で意図的に行を分けたい場合
brを使わない方がよい場面
- 余白を作りたいとき
- レイアウト調整目的
- 見た目だけの改行
これらは CSS（marginやpadding）で調整するのが正解です。
CSSで改行・余白を調整する正しい方法
改行ではなく「段落」として分けたい場合は、
HTML構造とCSSを使いましょう。
<p class="text">文章その1</p>
<p class="text">文章その2</p>.text {
margin-bottom: 16px;
}この方法なら、
レスポンシブ対応やデザイン調整もしやすくなります。
brが効かないときのチェックリスト
改行されないと感じたら、次を確認してください。
- brの書き方は正しいか
- HTMLとして解釈されているか
- CSSでdisplayやflex指定がないか
- インライン要素内で使っていないか
ほとんどの場合、ここで原因が見つかります。
まとめ：brは「使いどころ」が大切
<br> は便利ですが、
使いすぎるとレイアウトが崩れやすくなるタグでもあります。
- 意味のある改行 → br
- 見た目・余白調整 → CSS
- 構造の区切り → HTML要素
この考え方を意識するだけで、
HTMLとCSSの理解が一段深まります。
初心者のうちは
「brが効かない＝バグ」と思いがちですが、
多くの場合は 構造やCSSの影響が原因です。
ぜひ今回の内容を参考に、正しく使い分けてみてください。