目次
- はじめに：改行したのに、画面では1行のまま？
- 結論：HTMLの改行は3パターンある
- なぜ改行キーだけでは改行されないのか
- brタグで改行する方法
- 基本形
- 特徴
- 使いどころ
- pタグで改行する（段落）
- 特徴
- brとpの違いを整理
- CSSで改行を制御する方法
- white-spaceを使う
- white-spaceの主な値
- よくある失敗：brを連打する
- 改行されないときのチェック方法（DevTools）
- 手順
- displayの影響
- white-space: nowrap の罠
- divで改行するのはアリ？
- 実務でよくあるトラブル
- 実用的なおすすめ設定
- チェックリスト
- まとめ：改行は「構造」と「見た目」を分けて考える
はじめに：改行したのに、画面では1行のまま？
HTMLを書き始めたころ、こんなことありませんか？
<p>
1行目
2行目
</p>エディタでは改行されているのに、
ブラウザで見ると…
1行目 2行目「え、なんで？」となります。
私も最初はバグだと思いました。
でも原因は仕様です。
ここを理解すると、改行まわりのトラブルはほぼ解消します。
結論：HTMLの改行は3パターンある
HTMLで改行する方法は主に3つです。
- brタグ（強制改行）
- pタグ（段落）
- CSS（white-spaceやdisplay）
目的によって使い分けます。
ここを混同すると、レイアウト崩れやスマホ表示トラブルにつながります。
なぜ改行キーだけでは改行されないのか
HTMLは、空白や改行をまとめて1つの空白として扱う仕様があります。
専門用語でいうと「空白の折りたたみ」です。
だから、
1行目
2行目は、ブラウザでは
1行目 2行目になります。
これは正常です。
brタグで改行する方法
基本形
<p>
1行目<br>
2行目
</p>特徴
- 強制的に次の行へ送る
- 終了タグは不要
- 意味は持たない
使いどころ
- 住所
- 詩
- 意図的な改行
文章の途中で「ここで改行したい」というときに使います。
pタグで改行する（段落）
<p>1つ目の段落</p>
<p>2つ目の段落</p>特徴
- 段落として意味を持つ
- 上下に余白が付く
- 構造として正しい
文章を分けるなら、基本はpタグです。
brとpの違いを整理
| 項目 | br | p |
|---|---|---|
| 役割 | 改行 | 段落 |
| 意味 | なし | あり |
| 余白 | ほぼなし | あり |
| 構造 | 補助的 | 本体 |
迷ったら、
- 文章の区切り → p
- 途中で折り返す → br
と考えると分かりやすいです。
CSSで改行を制御する方法
HTMLを書き換えずに改行を反映させたいときは、CSSを使います。
white-spaceを使う
p {
white-space: pre-line;
}white-spaceの主な値
- normal（通常）
- pre-line（改行だけ反映）
- pre-wrap（改行と空白を保持）
- nowrap（改行しない）
フォーム入力内容をそのまま表示したい場合などで使います。
よくある失敗：brを連打する
文章1<br><br><br>文章2見た目は整います。
でも、あとでスマホ崩れの原因になります。
余白はCSSで作るほうが安全です。
改行されないときのチェック方法（DevTools）
「brを書いたのに改行されない」ときは確認します。
手順
- Chromeで右クリック → 検証
- Elementsタブでbrが存在するか確認
- 親要素のCSSを見る
よくある原因は：
- display:flex
- white-space: nowrap
- line-heightが極端
です。
displayの影響
p {
display: flex;
}flexが指定されると、
テキストの扱いが通常と変わります。
特に横並びレイアウトでは注意です。
white-space: nowrap の罠
p {
white-space: nowrap;
}これが指定されていると、brがあっても折り返しません。
改行されない原因としてかなり多いです。
divで改行するのはアリ？
<div>1行目</div>
<div>2行目</div>見た目は改行されます。
ただし、文章構造としてはpタグのほうが自然です。
レイアウト目的ならdiv。
文章ならp。
実務でよくあるトラブル
- CMSで自動エスケープされている
- white-spaceが上書きされている
- スマホだけ崩れる
- 横スクロールが発生する
改行トラブルはCSSとセットで起こることが多いです。
実用的なおすすめ設定
body {
line-height: 1.7;
}
p {
margin-bottom: 16px;
}余白はCSSで管理。
改行は構造で管理。
これが安定します。
チェックリスト
✔ 改行したい目的は明確か
✔ 段落ならpを使っているか
✔ 余白目的でbrを使っていないか
✔ white-spaceがnowrapになっていないか
✔ display:flexの影響を確認したか
まとめ：改行は「構造」と「見た目」を分けて考える
HTMLは構造を作るもの。
CSSは見た目を整えるもの。
- 改行したい → br
- 段落を分けたい → p
- 余白を調整したい → CSS
この整理ができると、
改行トラブルはほぼなくなります。
「html 改行」で迷ったら、
まず目的を確認してからタグを選んでみてください。