目次
- はじめに：brを書いたのに改行されない？
- まず結論：brは「強制改行」だが、レイアウトは制御しない
- brタグの基本動作
- 原因①：タグの書き方ミス
- 正しい書き方
- 間違い例
- 原因②：HTMLとして解釈されていない（エスケープ問題）
- よくあるケース
- 確認方法
- 原因③：display:flexの影響
- 解決方法①
- 解決方法②
- 原因④：white-spaceが邪魔している
- 対策
- 原因⑤：line-heightが極端
- inline要素の中での挙動
- DevToolsでの確認手順
- brを使うべき場面
- brを使わないほうがいい場面
- 余白を作る正しい方法
- よくある失敗パターン
- チェックリスト
- なぜ「効かない」と感じるのか
- まとめ：brは悪くない。周囲を見る
はじめに：brを書いたのに改行されない？
「ちゃんと<br>入れたのに、なんで改行されないの？」
これ、制作を始めたばかりのころに一度はハマります。
実際、私も最初にflexレイアウトを触り始めたとき、「br効かないじゃん…」と本気で焦りました。
でもあとから分かります。
brが壊れているわけではありません。原因はほぼ周囲のCSSや構造です。
この記事では、
- brが効かない本当の理由
- よくある勘違い
- displayやflexの影響
- DevToolsでの確認方法
- そもそもbrを使うべき場面
まで、現場目線で整理します。
まず結論：brは「強制改行」だが、レイアウトは制御しない
<br> はテキストを次の行に送るタグです。
ただし、
- 要素の並び方（display）
- テキストの扱い（white-space）
- レイアウト方式（flex / grid）
によって、改行が効いていないように見えることがあります。
ここが混乱ポイントです。
brタグの基本動作
<p>こんにちは<br>はじめまして</p>これは確実に改行されます。
うまくいかないときは、別の原因が潜んでいます。
原因①：タグの書き方ミス
正しい書き方
<br>または
<br />間違い例
</br>brに終了タグはありません。
</br> は無効です。
原因②：HTMLとして解釈されていない（エスケープ問題）
CMSやPHP環境でよくあるのがこれ。
<br>これはタグではなく「文字列」です。
よくあるケース
- PHPの
htmlspecialchars()がかかっている - テンプレートエンジンが自動エスケープしている
- WordPressのフィルター処理
確認方法
DevToolsでElementsを開き、
本当に<br>がDOM内に存在するか確認します。
原因③：display:flexの影響
これ、かなり多いです。
p {
display: flex;
}flexコンテナ内では、テキストが通常のフローと違う扱いになります。
特に横並び状態だと、
改行が思った通りに見えません。
解決方法①
p {
display: flex;
flex-direction: column;
}解決方法②
構造を分ける。
<p>文章1</p>
<p>文章2</p>レイアウトはCSSで調整します。
原因④：white-spaceが邪魔している
見落としがちなのがこれ。
p {
white-space: nowrap;
}nowrapが指定されていると、
改行が無効になります。
対策
white-space: normal;原因⑤：line-heightが極端
改行しているのに、詰まりすぎて見えないことがあります。
p {
line-height: 1;
}行間が小さいと、
改行していても気づきにくいです。
inline要素の中での挙動
<span>文章<br>文章</span>通常は改行されます。
ただし親要素がflexや特殊レイアウトの場合、
見え方が変わります。
構造を見直すほうが安全です。
DevToolsでの確認手順
改行されないと感じたら、必ず見る。
- Elementsタブでbrが存在するか確認
- 親要素のdisplayを見る
- white-spaceを確認
- line-heightを確認
レイアウトの答えはCSSにあります。
brを使うべき場面
- 住所
- 詩
- 意図的な改行
- 固定文の表現
意味のある改行に使います。
brを使わないほうがいい場面
- 余白を作りたいとき
- レイアウト調整
- デザイン目的
これらはCSSで調整します。
余白を作る正しい方法
<p>文章1</p>
<p>文章2</p>p {
margin-bottom: 16px;
}見た目の調整はCSSの仕事です。
よくある失敗パターン
- brを3連打する
- 見た目が整ったからOKと思う
- CSSを疑わない
これをやると、スマホで崩れます。
チェックリスト
✔ brの書き方は正しいか
✔ HTMLとして解釈されているか
✔ display:flexになっていないか
✔ white-spaceがnowrapになっていないか
✔ line-heightが極端でないか
ここを見れば大体解決します。
なぜ「効かない」と感じるのか
多くの場合、
- HTMLは正しい
- CSSが邪魔している
という構図です。
brは単純なタグです。
壊れません。
まとめ：brは悪くない。周囲を見る
改行されないときは焦らなくて大丈夫です。
まず確認するのは、
- display
- white-space
- line-height
この3つ。
そして覚えておくこと。
- 改行はHTML
- 余白はCSS
ここを整理できると、
レイアウトトラブルは一気に減ります。
まずはDevToolsでDOMとCSSを見る習慣をつけてみてください。