Skip to content

5. p / br / hr（段落・改行・区切りの使い分け）

pで段落、brで文中の改行、hrで話題の区切りを作ると、読みやすい文章構造を迷わず書けます。

•beginnerpbrhrtypographystructure
目次
まず結論（1行）
最小の書き方（コピペで動く最小コード）
重要ポイント（初心者が迷う所だけ）
例で理解（よく使うパターン：4つ）
1) 段落を分ける（読みやすさ最優先）2) 住所・署名など「改行が意味を持つ」3) 話題が変わる場所で区切る（hrの本来用途）4) 連絡先の“行”は、実はリストが向いてることも
使い分け（似た要素/やりがちな代替）
実務のコツ（SEO・安全・アクセシビリティ）
NG・禁止例（なぜダメ？どう直す？）
1) 余白目的のbr連打2) 段落なのにdivだけで書く3) pの中にpを入れる（入れ子NG）4) hrを装飾用の線として多用
見た目を整える（HTML+CSSセット：3例）
例1：段落の余白を自然に（br不要）例2：hrを“上品な区切り”にする（色指定なし）例3：住所ブロックを読みやすく（brの正しい使い所）
理解チェック（3問・答え付き）
ミニ演習（すぐ試せる小課題）

まず結論（1行）

pで段落、brで文中の改行、hrで話題の区切りを作ると、読みやすい文章構造を迷わず書けます。

最小の書き方（コピペで動く最小コード）

HTMLCode
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>p / br / hr</title>
  </head>
  <body>
    <h1>文章の基本</h1>

    <p>これは1つ目の段落です。話がまとまっています。</p>

    <p>
      これは2つ目の段落です。<br />
      同じ段落の中で、住所のように改行したいときだけbrを使います。
    </p>

    <hr />

    <p>ここから話題が変わりました（区切り）。</p>
  </body>
</html>
Preview を表示

重要ポイント（初心者が迷う所だけ）

  • pは“段落”：文章のまとまりごとに分ける。段落同士はブラウザが余白を付けてくれる。
  • brは“同じ段落の中の改行”：住所・詩・改行が意味を持つ文だけに使う。
  • hrは“話題の区切り”：見た目の線ではなく「ここで区切る」という意味（セクションの転換）。
  • 余白を作るためにbr連打はNG：余白はCSSで作る。

例で理解（よく使うパターン：4つ）

1) 段落を分ける（読みやすさ最優先）

HTMLCode
<p>結論：これは重要です。</p>
<p>理由：こういう背景があります。</p>
<p>次に：具体例を紹介します。</p>
Preview を表示

2) 住所・署名など「改行が意味を持つ」

HTMLCode
<p>
  株式会社サンプル<br />
  東京都○○区○○ 1-2-3<br />
  受付：平日 10:00-18:00
</p>
Preview を表示

3) 話題が変わる場所で区切る（hrの本来用途）

HTMLCode
<p>前半は概要でした。</p>
<hr />
<p>ここから詳細に入ります。</p>
Preview を表示

4) 連絡先の“行”は、実はリストが向いてることも

HTMLCode
<ul>
  <li>メール：sample@example.com</li>
  <li>電話：000-0000-0000</li>
</ul>
Preview を表示

“行が並ぶ”だけなら、brよりul/liのほうが意味が明確で管理しやすいことが多いです。

使い分け（似た要素/やりがちな代替）

  • 段落を分けたい → p
  • 同じ段落内で改行したい → br
  • 話題を切り替えたい → hr
  • 余白を増やしたいだけ → CSS（margin / padding）
  • 項目が並ぶ → ul/li（リスト）や dl（用語と説明）

実務のコツ（SEO・安全・アクセシビリティ）

  • 段落が適切だと、読み上げも自然になる（br連打は読みにくい）
  • hrは“線を引く”目的で乱用しない（区切りの意味が薄れる）
  • 長文は「見出し + p複数」で分割すると滞在時間/理解が上がりやすい

NG・禁止例（なぜダメ？どう直す？）

1) 余白目的のbr連打

HTMLCode
<p>上の文章</p>
<br /><br /><br />
<p>下の文章</p>
Preview を表示

→ ✅ 段落はpで分け、余白はCSSで調整する

2) 段落なのにdivだけで書く

HTMLCode
<div>文章その1</div>
<div>文章その2</div>
Preview を表示

→ ✅ 文章のまとまりは p を使う（意味が伝わる）

3) pの中にpを入れる（入れ子NG）

HTMLCode
<p>外側<p>内側</p></p>
Preview を表示

→ ✅ pは入れ子にしない。段落を並べる

4) hrを装飾用の線として多用

HTMLCode
<hr /><hr /><hr />

※ このHTML断片は meta / title など表示要素がないため、プレビューは省略しました。

→ ✅ 区切りが必要な1箇所だけに使い、装飾はCSS（border等）で

見た目を整える（HTML+CSSセット：3例）

例1：段落の余白を自然に（br不要）

例1：段落の余白を自然に（br不要）

HTMLCode
<article class="text">
<h1>読みやすい文章</h1>
<p>段落ごとに余白があると読みやすい。</p>
<p>brを余白目的で使わなくて済みます。</p>
</article>
CSSCode
.text {
max-width: 720px;
margin: 0 auto;
padding: 24px;
line-height: 1.9;
}

.text p {
margin: 0 0 14px;
}
Preview を表示

例2：hrを“上品な区切り”にする（色指定なし）

例2：hrを“上品な区切り”にする（色指定なし）

HTMLCode
<section class="section">
<p>ここまでが前半。</p>
<hr class="divider" />
<p>ここから後半。</p>
</section>
CSSCode
.section {
padding: 16px;
}

.divider {
border: 0;
border-top: 1px solid currentColor;
opacity: 0.35;
margin: 18px 0;
}
Preview を表示

例3：住所ブロックを読みやすく（brの正しい使い所）

例3：住所ブロックを読みやすく（brの正しい使い所）

HTMLCode
<address class="addr">
株式会社サンプル<br />
東京都○○区○○ 1-2-3<br />
受付：平日 10:00-18:00
</address>
CSSCode
.addr {
font-style: normal;
line-height: 1.7;
border: 1px solid currentColor;
border-radius: 16px;
padding: 14px;
}

理解チェック（3問・答え付き）

Q. 段落のまとまりを作る要素は？

A. p。

Q. brはどんなときに使う？

A. 同じ段落内で改行が意味を持つとき（住所・詩など）。

Q. hrは「線を引く」ための要素？

A. 主目的は話題の区切り（見た目の線は結果）。

ミニ演習（すぐ試せる小課題）

  1. 自己紹介文を3段落（p×3）で書いてみよう（結論→理由→具体例の順がおすすめ）。
  2. 自分の連絡先（架空でOK）を、brを使って住所っぽく3行にしてみよう。ついでにhrで「自己紹介」と「連絡先」を区切ってみよう。