目次
HTMLの改行方法
HTMLには改行を表現する方法が主に2つあります。
| 方法 | タグ | 使うシーン |
|---|---|---|
| 強制改行 | <br> |
文章の途中で1行改行したい |
| 段落区切り | <p> |
意味のある段落のまとまりを分ける |
多くの初心者は <br> を多用しがちですが、正しく使い分けることでSEO・アクセシビリティが向上します。
brタグ｜強制改行
<br> タグは文章の途中に強制的に改行を入れるタグです。終了タグは不要です。
<p>郵便番号：〒100-0001<br>
住所：東京都千代田区千代田1-1</p>
brタグを使うべき場面
- 住所・電話番号など、意味を持つ区切りの改行
- 詩・歌詞など、行の区切りに意味がある文章
- 短いキャッチコピーの途中での改行
brタグを使ってはいけない場面
<!-- × 段落を分けるためにbrを連続使用するのはNG -->
<p>第1段落のテキストです。<br><br>
第2段落のテキストです。</p>
<!-- ○ 段落はpタグで分ける -->
<p>第1段落のテキストです。</p>
<p>第2段落のテキストです。</p>
段落の間隔を広げたいだけなら <br> ではなくCSSで margin を調整します。
pタグ｜段落の区切り
<p> タグは段落（パラグラフ）を表すタグです。ブラウザはpタグの前後に自動でスペース（margin）を入れます。
<p>HTMLはWebページの構造を定義する言語です。</p>
<p>CSSはWebページの見た目を定義する言語です。</p>
pタグの特徴
- 前後に自動でmarginが入る（ブラウザのデフォルトスタイル）
- スクリーンリーダーが「段落の区切り」として認識する
- SEO的に意味のあるコンテンツの区切りとして評価される
brとpの使い分けまとめ
意味のある段落の区切り → <p>タグ
文章の途中の改行 → <br>タグ
レイアウトのための余白 → CSSのmargin/padding
HTMLで改行が反映されない理由
テキストエディタでEnterキーを押して改行しても、HTMLでは無視されます。
<!-- ↓ HTMLファイル上は改行があるが... -->
<p>1行目
2行目</p>
<!-- ↓ ブラウザではスペース1つになる -->
1行目 2行目
HTMLでは複数のスペースや改行もスペース1つとして扱われます（ホワイトスペース折りたたみ）。改行を表示するには <br> または <p> を使う必要があります。
CSSで改行を制御する
white-space プロパティ
テキストのホワイトスペース（空白・改行）の扱いを制御します。
| 値 | 改行 | スペース折りたたみ | 自動折り返し |
|---|---|---|---|
normal（デフォルト） |
無視 | する | する |
nowrap |
無視 | する | しない |
pre |
保持 | しない | しない |
pre-wrap |
保持 | しない | する |
pre-line |
保持 | する | する |
/* コードブロックなど、改行・スペースをそのまま表示 */
pre {
white-space: pre-wrap;
}
/* 1行に収める（はみ出た部分を…で省略） */
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
word-break プロパティ
長い単語やURLが画面からはみ出す問題を防ぎます。
/* 日本語サイトでは設定を推奨 */
p {
word-break: break-all; /* どこでも折り返す */
}
/* または */
p {
overflow-wrap: break-word; /* 長い単語のみ折り返す */
}
スマホでの改行を制御する（改行タイミングを指定）
<!-- 特定の場所で改行させる（スマホのみ） -->
<h2>Webデザイナーが知るべき<br class="sp-only">HTML基礎</h2>
@media (min-width: 768px) {
.sp-only { display: none; }
}
改行関連タグ・プロパティ早見表
| 方法 | 記述 | 効果 |
|---|---|---|
| brタグ | <br> |
強制改行（1行） |
| pタグ | <p>テキスト</p> |
段落区切り（前後にmargin） |
| white-space: pre | CSS | 改行・スペースをそのまま表示 |
| word-break: break-all | CSS | 長い文字列をどこでも折り返す |
| overflow-wrap: break-word | CSS | 長い単語のみ折り返す |
よくある間違いと正しい書き方
<!-- × brタグを段落区切りに使う -->
テキスト1<br><br>テキスト2
<!-- ○ pタグを使う -->
<p>テキスト1</p>
<p>テキスト2</p>
<!-- × 余白を作るためにbrを連続使用 -->
<h2>見出し</h2>
<br><br><br>
<p>本文</p>
<!-- ○ CSSのmarginで余白を設定 -->
<h2>見出し</h2>
<p>本文</p>
/* ○ CSSで余白を調整 */
h2 {
margin-bottom: 32px;
}
まとめ
<br>：文章の途中の強制改行。住所・詩など意味のある改行に使う<p>：段落の区切り。複数の段落を分けるときに使う- CSSの
marginで余白を調整するのが正しいアプローチ white-spaceプロパティでテキストの改行・スペースの扱いを制御できる
HTMLの改行は <br> を多用せず、<p> タグとCSSを正しく使い分けましょう。
