【HTML】brタグ（改行）の使い方：pタグとの違いや効かない時の対策

2026年4月3日

HTMLの タグはテキストを改行する要素ですが、「余白作り」などに誤用されやすく、レイアウト崩壊の原因になることも少なくありません。

本記事では、brタグの意味やタグとの違い、CSSを活用した行間調整やスマホ向けの折り返し制御など正しい「改行・区切り」を解説します。

HTMLにおけるbrタグとは？意味と使い方

HTMLの文章を作成してると、意図した場所でテキストを改行したいという場面が必ずあります。

そんな時に利用するのがHTMLにおける改行要素である タグです。

ここでは、 タグの意味、Web標準（HTML5）においての書き方を解説します。

HTMLにおけるbrタグとは？

brタグの意味と略
改行の書き方

brタグの意味と略

 タグの意味は、テキストの「改行」です。

「br」が何の略かというと、英語の「Break（ブレイク＝改行）」に由来しています。

本文や住所の表記など、「同じ段落（pタグ）の中で意図的に行を分けたい場合」に使用するタグです。

文章のまとまりを変えたい時は段落（）タグを使い、要素と要素の間に余白を作りたい時は、CSSのmarginやpaddingを使うのがよいです。

⭕️ 良い例（段落内の意図的な改行）

〒100-0000
東京都千代田区〇〇 1-2-3
〇〇ビルディング 5F

〒100-0000 
 東京都千代田区〇〇 1-2-3 
 〇〇ビルディング 5F

※住所や詩のように「同じ情報のかたまりの中で、どうしても行を分けたい」時にbrを使うのが正解です。

❌ 悪い例（余白目的のbr連打）

こんにちは、山田です。

本日はよろしくお願いします。

こんにちは、山田です。
 <!– 絶対にNG！ –>
本日はよろしくお願いします。

※隙間を空けたい場合はbrを使うのではなく、CSSでpタグに対して margin-bottom: 50px; などを指定します。

HTMLコード表示

<div class="hbr1-wrapper">
  
  <div class="hbr1-demo-area">
    
    <div class="hbr1-box">
      <div class="hbr1-label" style="color:#198754;">⭕️ 良い例（段落内の意図的な改行）</div>
      
      <div class="hbr1-text">
        <p>
          〒100-0000<br>
          東京都千代田区〇〇 1-2-3<br>
          〇〇ビルディング 5F
        </p>
      </div>

      <div class="hbr1-code hbr1-code-good">
        <p><br>
          〒100-0000<span class="hbr1-hl-green"><br></span><br>
          東京都千代田区〇〇 1-2-3<span class="hbr1-hl-green"><br></span><br>
          〇〇ビルディング 5F<br>
        </p>
      </div>
      <p class="hbr1-note">※住所や詩のように「同じ情報のかたまりの中で、どうしても行を分けたい」時にbrを使うのが正解です。</p>
    </div>

    <div class="hbr1-box">
      <div class="hbr1-label" style="color:#dc3545;">❌ 悪い例（余白目的のbr連打）</div>
      
      <div class="hbr1-text">
        <p>こんにちは、山田です。</p>
        <br><br><br>
        <p>本日はよろしくお願いします。</p>
      </div>

      <div class="hbr1-code hbr1-code-bad">
        <p>こんにちは、山田です。</p><br>
        <span class="hbr1-hl-red"><br><br><br></span> <!-- 絶対にNG！ --><br>
        <p>本日はよろしくお願いします。</p>
      </div>
      <p class="hbr1-note">※隙間を空けたい場合はbrを使うのではなく、CSSでpタグに対して <code>margin-bottom: 50px;</code> などを指定します。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hbr1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }
.hbr1-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: 4px;
  margin-bottom: 15px;
}
.hbr1-text p { margin: 0; } /* pタグのデフォルト余白をリセットして見やすくする */

.hbr1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hbr1-code-bad { border-left: 4px solid #dc3545; }
.hbr1-code-good { border-left: 4px solid #198754; }
.hbr1-hl-red { color: #e06c75; font-weight: bold; }
.hbr1-hl-green { color: #98c379; font-weight: bold; }
.hbr1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

改行（brタグ）の書き方

改行タグの書き方に と  の2種類が存在することに気づくはずです。

結論から言うと、現在のWeb標準であるHTML5においては、スラッシュのない が正しい書き方とされています。

タグの中に何も囲むものがない要素（空要素）は、HTML5では終了タグ（/）が不要になりました。

通常のWebサイト制作（HTML5）では を使います。

しかし、Reactなどのモダンな開発環境（JSXやXMLベースの環境）では厳密な構文が求められるため、自己終了タグとして と書かなければなりません。

自分が今「普通のHTMLを書いているのか」「JavaScriptの中（JSX）で書いてるのか」を意識することが重要です。

🌐 通常のWebサイト（HTML5）の場合

こんにちは。 
今日も良い天気ですね。

※現在のHTMLの標準ルールでは、スラッシュ（/）は書かなくてOKです。これが一番基本の形です。

⚛️ React (JSX) などの開発環境の場合

こんにちは。 
今日も良い天気ですね。

※JavaScriptのフレームワーク内では、閉じていないタグ（空要素）はエラーになるため、必ず最後にスラッシュを入れます。（スペースの有無は自由ですが   が一般的です）

HTMLコード表示

<div class="hbr2-wrapper">
  
  <div class="hbr2-demo-area">
    
    <div class="hbr2-box">
      <div class="hbr2-label" style="color:#0d6efd;">🌐 通常のWebサイト（HTML5）の場合</div>
      
      <div class="hbr2-code" style="border-left-color: #0d6efd;">
        <p><br>
          こんにちは。<span class="hbr2-hl-blue"><br></span><br>
          今日も良い天気ですね。<br>
        </p>
      </div>
      <p class="hbr2-note">※現在のHTMLの標準ルールでは、スラッシュ（/）は書かなくてOKです。これが一番基本の形です。</p>
    </div>

    <div class="hbr2-box">
      <div class="hbr2-label" style="color:#61dafb; background-color:#282c34; padding:5px; border-radius:4px; display:inline-block;">⚛️ React (JSX) などの開発環境の場合</div>
      
      <div class="hbr2-code" style="border-left-color: #61dafb; margin-top: 10px;">
        <p><br>
          こんにちは。<span class="hbr2-hl-react"><br /></span><br>
          今日も良い天気ですね。<br>
        </p>
      </div>
      <p class="hbr2-note">※JavaScriptのフレームワーク内では、閉じていないタグ（空要素）はエラーになるため、必ず最後にスラッシュを入れます。（スペースの有無は自由ですが <code><br /></code> が一般的です）</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hbr2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr2-label { font-size: 14px; font-weight: bold; margin-bottom: 10px; }

.hbr2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #ccc;
}
.hbr2-hl-blue { color: #61afef; font-weight: bold; }
.hbr2-hl-react { color: #61dafb; font-weight: bold; }

.hbr2-note {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
  line-height: 1.5;
}

brタグと他タグとの違いと使い分け

タグと タグの違いを理解する必要があります。

どちらも画面上では「行が変わる」ように見えるため、感覚で使い分けてしまっている初心者も少なくありません。

しかし、検索エンジンに文章の意味を正しく伝えるには、タグが持つ役割を理解し、適切に使い分ける必要があります。

ここでは、混同されやすいpタグやhrタグとの違いを解説します。

brタグと他タグとの違いと使い分け

pタグとbrタグの違い
hrタグとの違い

pタグとbrタグの違い

タグは「Paragraph（段落）」の略で、一つのテーマを持った「文章のまとまり」を作ります。

一方、 タグは、段落の中での「単なる改行」に過ぎません。

話題や意味の区切りが変わるなら、隙間の広さに関係なくタグで段落を分けます。

隙間の広さは、タグを変えるではなくmargin（外側の余白）を使ってコントロールするのがよいです。

⭕️ 正しい使い分け

平素は大変お世話になっております。
株式会社〇〇の山田です。

来月の打ち合わせの日程についてですが、
以下の候補日からお選びいただけますでしょうか。

平素は大変お世話になっております。 
 株式会社〇〇の山田です。


 来月の打ち合わせの…

※話題ごとにpタグで囲み、その文中で行を分けたい時だけbrタグを使います。

❌ 悪い例（すべてbrで改行）

平素は大変お世話になっております。
株式会社〇〇の山田です。

来月の打ち合わせの日程についてですが、
以下の候補日からお選びいただけますでしょうか。

平素は大変お世話になっております。 
株式会社〇〇の山田です。 
 <!– 隙間作りのためのbrはNG！ –>
来月の打ち合わせの…

※これだと検索エンジンから見て「どこからどこまでが一つの話題なのか」が全く伝わりません。

HTMLコード表示

<div class="hbr3-wrapper">
  
  <div class="hbr3-demo-area">
    
    <div class="hbr3-box">
      <div class="hbr3-label" style="color:#198754;">⭕️ 正しい使い分け</div>
      
      <div class="hbr3-text">
        <p class="hbr3-para">
          平素は大変お世話になっております。<br> 株式会社〇〇の山田です。
        </p>
        
        <p class="hbr3-para">
          来月の打ち合わせの日程についてですが、<br> 以下の候補日からお選びいただけますでしょうか。
        </p>
      </div>

      <div class="hbr3-code hbr3-code-good">
        <span class="hbr3-hl-green"><p></span><br>
          平素は大変お世話になっております。<span class="hbr3-hl-blue"><br></span><br>
          株式会社〇〇の山田です。<br>
        <span class="hbr3-hl-green"></p></span><br>
        <span class="hbr3-hl-green"><p></span><br>
          来月の打ち合わせの...<br>
        <span class="hbr3-hl-green"></p></span>
      </div>
      <p class="hbr3-note">※話題ごとにpタグで囲み、その文中で行を分けたい時だけbrタグを使います。</p>
    </div>

    <div class="hbr3-box">
      <div class="hbr3-label" style="color:#dc3545;">❌ 悪い例（すべてbrで改行）</div>
      
      <div class="hbr3-text">
        平素は大変お世話になっております。<br>
        株式会社〇〇の山田です。<br>
        <br> 来月の打ち合わせの日程についてですが、<br>
        以下の候補日からお選びいただけますでしょうか。
      </div>

      <div class="hbr3-code hbr3-code-bad">
        平素は大変お世話になっております。<span class="hbr3-hl-blue"><br></span><br>
        株式会社〇〇の山田です。<span class="hbr3-hl-blue"><br></span><br>
        <span class="hbr3-hl-red"><br> <!-- 隙間作りのためのbrはNG！ --></span><br>
        来月の打ち合わせの...
      </div>
      <p class="hbr3-note">※これだと検索エンジンから見て「どこからどこまでが一つの話題なのか」が全く伝わりません。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr3-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hbr3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr3-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hbr3-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}
/* pタグが持つデフォルトの余白を明示する */
.hbr3-para {
  margin-top: 0;
  margin-bottom: 20px; /* 段落の間に20pxの隙間ができる */
}
.hbr3-para:last-child { margin-bottom: 0; }

.hbr3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hbr3-code-bad { border-left: 4px solid #dc3545; }
.hbr3-code-good { border-left: 4px solid #198754; }
.hbr3-hl-red { color: #e06c75; font-weight: bold; }
.hbr3-hl-green { color: #98c379; font-weight: bold; }
.hbr3-hl-blue { color: #61afef; font-weight: bold; }
.hbr3-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

タグの使い方について詳しく知りたい人は「【HTML】pタグの使い方：divやbrとの違い・改行やCSS装飾」を一読ください。

【HTML】pタグの使い方：divやbrとの違い・改行やCSS装飾

hrタグとの違い

改行タグ（br）と文字の形が似ているため、混同されるのが<hr>タグです。

 （Break）：単なる「改行」。
<hr>（Horizontal Rule）：水平線を引くタグでHTML5での意味は「セクション内でのテーマ（話題）の区切り」。

デザインとして線を引きたい場合は、<hr>を使うのではなく、対象の要素（見出しやdiv）に対してborder-bottom（下枠線）を使うのがよいです。

<hr>は、ブログ記事の中で「閑話休題」のように話題を切り替える時のみ使用します。

📝 用途の異なる3つの「切り替え」

1. brタグ（改行）

ここは同じ段落ですが、
ここで改行されています。

2. hrタグ（話題の区切り）

前半の話題がここで終わります。

ここから全く違う新しい話題が始まります。

<hr>

3. CSS border（デザインの線）

見出しの下にある緑色の線は、hrタグではなくCSSのborderで引かれた「単なるデザイン」です。

border-bottom: 2px solid green;

HTMLコード表示

<div class="hbr4-wrapper">
  
  <div class="hbr4-demo-area">
    
    <div class="hbr4-box">
      <div class="hbr4-label">📝 用途の異なる3つの「切り替え」</div>
      
      <div class="hbr4-section">
        <div class="hbr4-heading-bad">1. brタグ（改行）</div>
        <p>ここは同じ段落ですが、<br>ここで改行されています。</p>
        <div class="hbr4-code"><br></div>
      </div>

      <div class="hbr4-section">
        <div class="hbr4-heading-bad">2. hrタグ（話題の区切り）</div>
        <p>前半の話題がここで終わります。</p>
        <hr class="hbr4-hr">
        <p>ここから全く違う新しい話題が始まります。</p>
        <div class="hbr4-code"><hr></div>
      </div>

      <div class="hbr4-section">
        <div class="hbr4-heading-good">3. CSS border（デザインの線）</div>
        <p>見出しの下にある緑色の線は、hrタグではなくCSSのborderで引かれた「単なるデザイン」です。</p>
        <div class="hbr4-code" style="border-left-color:#198754;">border-bottom: 2px solid green;</div>
      </div>

    </div>

  </div>
</div>

CSSコード表示

.hbr4-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr4-demo-area {
  display: flex;
  justify-content: center;
}
.hbr4-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr4-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; text-align: center;}

.hbr4-section {
  background-color: #f1f3f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.hbr4-section p { font-size: 14px; color: #333; margin: 0 0 10px 0; }
.hbr4-section:last-child { margin-bottom: 0; }

/* 悪い例（装飾目的で使ってはいけないタグ）の見出し */
.hbr4-heading-bad {
  font-size: 14px;
  margin: 0 0 10px 0;
  color: #0d6efd;
}

/* 良い例（装飾目的で使うべきCSS）の見出し */
.hbr4-heading-good {
  font-size: 14px;
  margin: 0 0 10px 0;
  color: #198754;
  padding-bottom: 5px;
  /* ★デザインの線はborder-bottomで引く！ */
  border-bottom: 2px solid #198754; 
}

/* hrタグの見た目 */
.hbr4-hr {
  border: 0;
  border-top: 1px solid #adb5bd;
  margin: 15px 0;
}

.hbr4-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  border-radius: 4px;
  border-left: 4px solid #0d6efd;
}

brタグが効かない：改行されない・そのまま表示される

HTMLコーディングをしていて、「ちゃんとタグを書いたのに改行されない」といったトラブルは、初心者から実務者まで遭遇する問題です。

ここでは、brタグが効かない原因や画面にタグがそのまま出てしまう現象、「brタグに頼らない改行コントロール」について解説します。

brタグが効かない

タグがそのまま文字として画面に表示される
brタグ以外の改行コード・改行方法

タグがそのまま文字として画面に表示される

改行しようと と書いたのに、ブラウザで確認すると文章の中に文字としてそのまま出てきてしまうことがあります。

これはタグがHTMLとして認識されていない状態です。

WordPressやReactなどのJavaScriptフレームワークは、セキュリティの観点から、ユーザーが入力した<や>という記号を、自動的に<や>という特殊文字に変換して文字列にしてしまう機能を持ちます。

そのため、ブラウザはそれを「改行の命令」ではなく「文字」だと解釈して画面に表示してしまいます。

WordPressでタグを書く場合は、「テキストエディタ（カスタムHTMLブロック）」モードに切り替えてから記述するのがよいです。

❌ 悪い例（文字として表示される）

こんにちは。
 今日も良い天気ですね。

<!– 裏側ではこのように変換されてしまっている –>
こんにちは。 今日も良い天気ですね。

※ビジュアルエディタなどで直接タグを打ち込むと、システムが勝手に文字コードに変換してしまいます。

⭕️ 良い例（改行として機能する）

こんにちは。
今日も良い天気ですね。

<!– HTMLエディタで正しく記述している –>
こんにちは。 今日も良い天気ですね。

※システムに「これはHTMLタグだ」と認識させる正しい入力モードで書く必要があります。

HTMLコード表示

<div class="hbr-err1-wrapper">
  
  <div class="hbr-err1-demo-area">
    
    <div class="hbr-err1-box">
      <div class="hbr-err1-label" style="color:#dc3545;">❌ 悪い例（文字として表示される）</div>
      
      <div class="hbr-err1-text">
        こんにちは。<br> <span class="hbr-err1-hl-red"><br></span>今日も良い天気ですね。
      </div>

      <div class="hbr-err1-code hbr-err1-code-bad">
        <!-- 裏側ではこのように変換されてしまっている --><br>
        こんにちは。<span class="hbr-err1-hl-red">&lt;br&gt;</span>今日も良い天気ですね。
      </div>
      <p class="hbr-err1-note">※ビジュアルエディタなどで直接タグを打ち込むと、システムが勝手に文字コードに変換してしまいます。</p>
    </div>

    <div class="hbr-err1-box">
      <div class="hbr-err1-label" style="color:#198754;">⭕️ 良い例（改行として機能する）</div>
      
      <div class="hbr-err1-text">
        こんにちは。<br>
        <span class="hbr-err1-hl-green">今日も良い天気ですね。</span>
      </div>

      <div class="hbr-err1-code hbr-err1-code-good">
        <!-- HTMLエディタで正しく記述している --><br>
        こんにちは。<span class="hbr-err1-hl-green"><br></span>今日も良い天気ですね。
      </div>
      <p class="hbr-err1-note" style="color:#198754;">※システムに「これはHTMLタグだ」と認識させる正しい入力モードで書く必要があります。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr-err1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr-err1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hbr-err1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr-err1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }
.hbr-err1-text {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  padding: 15px;
  background-color: #f1f3f5;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

.hbr-err1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hbr-err1-code-bad { border-left: 4px solid #dc3545; }
.hbr-err1-code-good { border-left: 4px solid #198754; }
.hbr-err1-hl-red { color: #e06c75; font-weight: bold; }
.hbr-err1-hl-green { color: #98c379; font-weight: bold; }
.hbr-err1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

brタグ以外の改行コード・改行方法

昔のWebサイトは を使って改行位置を決めるのが主流でしたが、PCとスマホの両方に対応する現在において、固定の改行位置を指定するのは危険です。

PCでは綺麗に見えても、スマホの画面では変な位置で改行されて文章がガタガタになります。

そのため、実務では状況に合わせてbrタグを使わない改行方法を使い分けます。

初心者がHTMLを書き始めた時、エディタ上でテキストを「Enterキー」で改行して、「よし、これで画面でも改行される。」と思い込むことがあります。

しかし、HTMLの仕様上、ソースコード内のEnterキーによる改行や連続するスペースは、ブラウザ上では「半角スペース1個分」として無視されます。

これを解決し、かつbrタグに頼らずに改行をコントロールする手法が、white-space: pre-wrap;です。

これを指定すると、HTMLソースコード上の「Enterキーによる改行」が画面に反映され、かつ画面幅が狭い時は自動で折り返してくれます。

❌ 悪い例（Enter改行の無視）

これはHTMLコード上で Enterキーを押して改行した文章ですが、画面では繋がりっぱなしになります。

<div>
 これはHTMLコード上で
 Enterキーを押して
 改行した文章ですが、
</div>
/* CSSを何も指定していないと無視されます */

⭕️ 良い例（CSSで改行をそのまま反映）

これはHTMLコード上で Enterキーを押して改行した文章が、そのまま画面に反映されています！

<div class=”pre-wrap-text”>
 これはHTMLコード上で
 Enterキーを押して…
</div>

/* 魔法のCSS */
.pre-wrap-text {
 white-space: pre-wrap;
}

※この手法を使えば、brタグを書かなくても直感的に改行をコントロールでき、スマホなどの狭い画面では自動で自然な折り返しもしてくれます。

HTMLコード表示

<div class="hbr-err2-wrapper">
  
  <div class="hbr-err2-demo-area">
    
    <div class="hbr-err2-box">
      <div class="hbr-err2-label" style="color:#dc3545;">❌ 悪い例（Enter改行の無視）</div>
      
      <div class="hbr-err2-text-bad">
        これはHTMLコード上で
        Enterキーを押して
        改行した文章ですが、
        画面では繋がりっぱなしになります。
      </div>

      <div class="hbr-err2-code hbr-err2-code-bad">
        <div><br>
          これはHTMLコード上で<br>
          Enterキーを押して<br>
          改行した文章ですが、<br>
        </div><br>
        <span class="hbr-err2-hl-note">/* CSSを何も指定していないと無視されます */</span>
      </div>
    </div>

    <div class="hbr-err2-box">
      <div class="hbr-err2-label" style="color:#198754;">⭕️ 良い例（CSSで改行をそのまま反映）</div>
      
      <div class="hbr-err2-text-good">
        これはHTMLコード上で
        Enterキーを押して
        改行した文章が、
        そのまま画面に反映されています！
      </div>

      <div class="hbr-err2-code hbr-err2-code-good">
        <div class="pre-wrap-text"><br>
          これはHTMLコード上で<br>
          Enterキーを押して...<br>
        </div><br><br>
        /* 魔法のCSS */<br>
        .pre-wrap-text {<br>
          <span class="hbr-err2-hl-green">white-space: pre-wrap;</span><br>
        }
      </div>
      <p class="hbr-err2-note" style="color:#198754;">※この手法を使えば、brタグを書かなくても直感的に改行をコントロールでき、スマホなどの狭い画面では自動で自然な折り返しもしてくれます。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr-err2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr-err2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hbr-err2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr-err2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

/* ❌ 悪い例：HTMLのEnter改行は無視され1行になる */
.hbr-err2-text-bad {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  padding: 15px;
  background-color: #f8d7da;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #f5c2c7;
}

/* ⭕️ 良い例：CSSで改行を維持 */
.hbr-err2-text-good {
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  padding: 15px;
  background-color: #d1e7dd;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #badbcc;
  
  /* ★ソースコードのEnter改行をそのまま画面に出すCSS */
  white-space: pre-wrap;
}

.hbr-err2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hbr-err2-code-bad { border-left: 4px solid #dc3545; }
.hbr-err2-code-good { border-left: 4px solid #198754; }
.hbr-err2-hl-green { color: #98c379; font-weight: bold; }
.hbr-err2-hl-note { color: #e06c75; font-style: italic; }
.hbr-err2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

white-spaceの使い方と属性の使い分けを知りたい人は「【html&css】white-spaceの使い方とnowrap・pre・pre-wrapの使い分け」を一読ください。

【html&css】white-spaceの使い方とnowrap・pre・pre-wrapの使い分け

brタグの高さや行間・装飾

HTMLコーディングを進めていくと、「改行の隙間（行間）が狭いから、brタグ自体の高さを広げたい」「改行部分にだけ色やスタイルをつけたい」と考えることがあります。

しかし、 タグは特殊なタグであり、一般的なHTML要素のように属性を使ってデザインを変えることはできません。

ここでは、brタグに対するCSS装飾の限界、実践している「正しい行間・余白のコントロール方法」について解説します。

brタグの高さや行間・装飾

brタグに高さや色は指定できるか
【推奨】brを使わずCSSで行間を調整する方法

brタグに高さや色は指定できるか

結論から言うと、 タグ自体に高さや色を直接指定できません。

なぜなら、 タグは文字などの「中身（コンテンツ）」を持たない空要素であり、あくまで「ここでテキストを折り返す」という目印に過ぎないからです。

❌ 悪い例（存在しない属性）

改行に色や高さをつけようとして
無効な指定をしている文章です。

改行に色や高さをつけようとして
 
無効な指定をしている文章です。

※HTML5においてbrタグにheightやcolorという属性は存在しないため、完全に無視されます。

❌ 悪い例（brへの無理なCSS）

クラスをつけてCSSで広げようとした
危険な実装の文章です。

/* 危険なハック（非推奨） */
.spacer {
display: block;
margin-bottom: 30px;
}

※ブラウザによって解釈が異なり、レイアウトが崩れる原因になるため実務では絶対に使いません。

HTMLコード表示

<div class="hbr-style1-wrapper">
  
  <div class="hbr-style1-demo-area">
    
    <div class="hbr-style1-box">
      <div class="hbr-style1-label" style="color:#dc3545;">❌ 悪い例（存在しない属性）</div>
      
      <div class="hbr-style1-text">
        改行に色や高さをつけようとして<br height="50" color="red">
        無効な指定をしている文章です。
      </div>

      <div class="hbr-style1-code hbr-style1-code-bad">
        改行に色や高さをつけようとして<br>
        <span class="hbr-style1-hl-red"><br height="50" color="red"></span><br>
        無効な指定をしている文章です。
      </div>
      <p class="hbr-style1-note">※HTML5においてbrタグにheightやcolorという属性は存在しないため、完全に無視されます。</p>
    </div>

    <div class="hbr-style1-box">
      <div class="hbr-style1-label" style="color:#dc3545;">❌ 悪い例（brへの無理なCSS）</div>
      
      <div class="hbr-style1-text">
        クラスをつけてCSSで広げようとした<br class="hbr-style1-bad-br">
        危険な実装の文章です。
      </div>

      <div class="hbr-style1-code hbr-style1-code-bad">
        <br <span class="hbr-style1-hl-red">class="spacer"</span>><br><br>
        /* 危険なハック（非推奨） */<br>
        .spacer {<br>
          display: block;<br>
          margin-bottom: 30px;<br>
        }
      </div>
      <p class="hbr-style1-note" style="color:#842029;">※ブラウザによって解釈が異なり、レイアウトが崩れる原因になるため実務では絶対に使いません。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr-style1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr-style1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hbr-style1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr-style1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }
.hbr-style1-text {
  font-size: 15px;
  color: #333;
  line-height: 1.4;
  padding: 15px;
  background-color: #f8d7da;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #f5c2c7;
}

/* 危険なハックの再現（見せるためだけに記述） */
.hbr-style1-bad-br {
  display: block;
  content: "";
  margin-bottom: 30px;
}

.hbr-style1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hbr-style1-code-bad { border-left: 4px solid #dc3545; }
.hbr-style1-hl-red { color: #e06c75; font-weight: bold; }
.hbr-style1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

【推奨】brを使わずCSSで行間を調整する方法

「文字と文字の縦の隙間（行間）が詰まっていて読みにくいから広げたい」という場合、実務ではbrタグを使わないでline-heightプロパティを使用することです。

line-height（行の高さ）は、テキストを囲んでいる親要素（や<div>）に対して指定します。

line-heightを指定する際は、単位をつけずに数値だけ（倍率）を指定するのがよいです。

実務では、文字の大きさに対して「1.6倍〜1.8倍」の行間（line-height: 1.6;程度）を指定すると、読みやすい文章になるとされています。

⚠️ 調整前（デフォルトの行間）

Webデザインにおいて、文章の読みやすさは非常に重要です。
行間が詰まりすぎていると、読者は圧迫感を感じてしまい、
長い文章を読む前にサイトから離脱してしまう原因になります。
brタグで無理やり隙間を作るのはやめましょう。

p {
/* 行間指定なし（約1.2倍程度になることが多い） */
}

✨ 調整後（line-height: 1.7 を指定）

Webデザインにおいて、文章の読みやすさは非常に重要です。
line-heightを使って適切な行間（1.6〜1.8倍）を確保すると、
視線がスムーズに移動し、長文でも疲れずに読むことができます。
単位（pxやem）をつけないのがプロの鉄則です。

p {
line-height: 1.7; /* 文字サイズの1.7倍の行の高さ */
}

※親のpタグに1行だけCSSを足すだけで、文章全体の行間が均等に美しく広がります。brタグの高さ調整は一切不要です。

HTMLコード表示

<div class="hbr-style2-wrapper">
  
  <div class="hbr-style2-demo-area">
    
    <div class="hbr-style2-box">
      <div class="hbr-style2-label" style="color:#6c757d;">⚠️ 調整前（デフォルトの行間）</div>
      
      <p class="hbr-style2-text-default">
        Webデザインにおいて、文章の読みやすさは非常に重要です。<br>
        行間が詰まりすぎていると、読者は圧迫感を感じてしまい、<br>
        長い文章を読む前にサイトから離脱してしまう原因になります。<br>
        brタグで無理やり隙間を作るのはやめましょう。
      </p>

      <div class="hbr-style2-code hbr-style2-code-default">
        p {<br>
          /* 行間指定なし（約1.2倍程度になることが多い） */<br>
        }
      </div>
    </div>

    <div class="hbr-style2-box">
      <div class="hbr-style2-label" style="color:#198754;">✨ 調整後（line-height: 1.7 を指定）</div>
      
      <p class="hbr-style2-text-pro">
        Webデザインにおいて、文章の読みやすさは非常に重要です。<br>
        line-heightを使って適切な行間（1.6〜1.8倍）を確保すると、<br>
        視線がスムーズに移動し、長文でも疲れずに読むことができます。<br>
        単位（pxやem）をつけないのがプロの鉄則です。
      </p>

      <div class="hbr-style2-code hbr-style2-code-good">
        p {<br>
          <span class="hbr-style2-hl-green">line-height: 1.7;</span> /* 文字サイズの1.7倍の行の高さ */<br>
        }
      </div>
      <p class="hbr-style2-note">※親のpタグに1行だけCSSを足すだけで、文章全体の行間が均等に美しく広がります。brタグの高さ調整は一切不要です。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr-style2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr-style2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hbr-style2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr-style2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

/* ⚠️ デフォルトの詰まった行間 */
.hbr-style2-text-default {
  font-size: 14px;
  color: #333;
  padding: 15px;
  background-color: #e9ecef;
  border-radius: 4px;
  margin: 0 0 15px 0;
  /* ブラウザのデフォルトに近い狭い行間 */
  line-height: 1.2; 
}

/* ✨ プロの美しい行間 */
.hbr-style2-text-pro {
  font-size: 14px;
  color: #333;
  padding: 15px;
  background-color: #d1e7dd;
  border-radius: 4px;
  margin: 0 0 15px 0;
  /* ★単位なしの倍率指定 */
  line-height: 1.7; 
}

.hbr-style2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hbr-style2-code-default { border-left: 4px solid #6c757d; }
.hbr-style2-code-good { border-left: 4px solid #198754; }
.hbr-style2-hl-green { color: #98c379; font-weight: bold; }
.hbr-style2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

その他のbreak（区切り・折り返し）に関する設定

Web制作における「Break」という概念は、単なる文章の改行（brタグ）にとどまりません。

長い英単語の強制的な折り返しや画像の回り込み解除、印刷時の改ページなど様々な場面で「区切り（Break）」の制御が必要になります。

ここでは、実務でイレギュラーなBreakに関する設定方法ついて解説します。

break（区切り・折り返し）に関する設定

連続改行やテキストの強制折り返し
回り込みの解除
印刷時の改ページ指定

連続改行やテキストの強制折り返し

「段落を変えるほどではないけれど、大きめの隙間を作りたい」と考えた時、初心者が使うのが と連続して記述する手法です。

しかし前述の通り、音声読み上げ機能などで「空白、空白」と読まれてしまうため非推奨です。

余白はCSSのmarginで作りましょう。

また、文章の改行に関して実務で直面するのが「長すぎるURLや英単語がスマホ画面を突き破る」というレイアウト崩壊問題です。

英単語やURLの強制折り返しには、word-break: break-all;またはoverflow-wrap: break-word;を使用します。

これを指定しておけば、画面の端に到達した時点で自動的に文字が折り返され、スマホのレイアウト崩れを防げます。

❌ 悪い例（そのまま表示）

参考リンク：
https://example.com/this-is-a-very-very-long-url-that-will-break-the-layout-on-mobile-devices

.bad-text {
/* 何も指定しないと英語は途中で改行されない */
}

※英単語やURLは「単語の途中で改行してはいけない」という基本ルールがあるため、枠を無視して横に突き抜けてしまいます。

⭕️ 良い例（word-breakを指定）

参考リンク：
https://example.com/this-is-a-very-very-long-url-that-will-break-the-layout-on-mobile-devices

.good-text {
word-break: break-all;
/* または overflow-wrap: break-word; */
}

※この魔法のCSSをかければ、どんなに長い文字でも画面の端で強制的に折り返してくれます。

HTMLコード表示

<div class="hbr-break1-wrapper">
  
  <div class="hbr-break1-demo-area">
    
    <div class="hbr-break1-box">
      <div class="hbr-break1-label" style="color:#dc3545;">❌ 悪い例（そのまま表示）</div>
      
      <div class="hbr-break1-text hbr-break1-text-bad">
        参考リンク：<br>
        https://example.com/this-is-a-very-very-long-url-that-will-break-the-layout-on-mobile-devices
      </div>

      <div class="hbr-break1-code hbr-break1-code-bad">
        .bad-text {<br>
          /* 何も指定しないと英語は途中で改行されない */<br>
        }
      </div>
      <p class="hbr-break1-note">※英単語やURLは「単語の途中で改行してはいけない」という基本ルールがあるため、枠を無視して横に突き抜けてしまいます。</p>
    </div>

    <div class="hbr-break1-box">
      <div class="hbr-break1-label" style="color:#198754;">⭕️ 良い例（word-breakを指定）</div>
      
      <div class="hbr-break1-text hbr-break1-text-good">
        参考リンク：<br>
        https://example.com/this-is-a-very-very-long-url-that-will-break-the-layout-on-mobile-devices
      </div>

      <div class="hbr-break1-code hbr-break1-code-good">
        .good-text {<br>
          <span class="hbr-break1-hl-green">word-break: break-all;</span><br>
          /* または overflow-wrap: break-word; */<br>
        }
      </div>
      <p class="hbr-break1-note" style="color:#198754;">※この魔法のCSSをかければ、どんなに長い文字でも画面の端で強制的に折り返してくれます。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr-break1-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr-break1-demo-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.hbr-break1-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
  /* スマホの狭い画面をシミュレートするために幅を制限 */
  overflow: hidden; 
}
.hbr-break1-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hbr-break1-text {
  font-size: 14px;
  color: #333;
  background-color: #f1f3f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
  border: 1px solid #dee2e6;
}

/* ❌ 悪い例：何もしないと突き抜ける */
.hbr-break1-text-bad {
  /* ここはあえて突き抜けさせるための指定（親のoverflowの影響を避けるため） */
  white-space: nowrap; 
  color: #dc3545;
}

/* ⭕️ 良い例：強制折り返し */
.hbr-break1-text-good {
  word-break: break-all; /* ★これ */
  color: #198754;
  font-weight: bold;
}

.hbr-break1-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hbr-break1-code-bad { border-left: 4px solid #dc3545; }
.hbr-break1-code-good { border-left: 4px solid #198754; }
.hbr-break1-hl-green { color: #98c379; font-weight: bold; }
.hbr-break1-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

外側の余白であるmarginの使い方を詳しく知りたい人は「【html&css】paddingとmarginの違いは？上下左右の余白と順番」を一読ください。

【html&css】paddingとmarginの違いは？上下左右の余白と順番

回り込みの解除

画像を左に寄せて、その右側にテキストを回り込ませるようなレイアウト（float機能）を作った時、「この段落からは回り込みを終わらせて、画像の下からテキストを始めたい」という場面があります。

回り込みを解除したい場合は、HTMLの属性ではなく、clear: both;を使用します。

また、Web制作ではそもそもfloatを使ったレイアウト自体が古く、display: flex;やdisplay: grid;を使うのが主流であり、これらを使えば回り込み解除という作業が不要になります。

❌ 悪い例（HTMLタグの属性を使う）

<img src=”photo.jpg” style=”float: left;”>
画像の右に回り込むテキスト

<!– 廃止された古い書き方！ –>
 

画像の下から始まるテキスト

※HTML5では clear 属性は使えません。文法エラーを引き起こします。

⭕️ 良い例（CSSのclearを使う）

<img src=”photo.jpg” style=”float: left;”>
画像の右に回り込むテキスト

<!– クラスをつけたdivなどを配置 –>
<div class=”clear-box”></div>

画像の下から始まるテキスト

/* CSSで解除する */
.clear-box {
clear: both;
}

※デザインやレイアウトに関する制御は、すべてCSSに任せるのが現代のWeb標準です。

HTMLコード表示

<div class="hbr-break2-wrapper">
  
  <div class="hbr-break2-demo-area">
    
    <div class="hbr-break2-box">
      <div class="hbr-break2-label" style="color:#dc3545;">❌ 悪い例（HTMLタグの属性を使う）</div>
      
      <div class="hbr-break2-code hbr-break2-code-bad">
        <img src="photo.jpg" style="float: left;"><br>
        <p>画像の右に回り込むテキスト</p><br><br>
        <!-- 廃止された古い書き方！ --><br>
        <span class="hbr-break2-hl-red"><br clear="all"></span><br><br>
        <p>画像の下から始まるテキスト</p>
      </div>
      <p class="hbr-break2-note">※HTML5では <code>clear</code> 属性は使えません。文法エラーを引き起こします。</p>
    </div>

    <div class="hbr-break2-box">
      <div class="hbr-break2-label" style="color:#198754;">⭕️ 良い例（CSSのclearを使う）</div>
      
      <div class="hbr-break2-code hbr-break2-code-good">
        <img src="photo.jpg" style="float: left;"><br>
        <p>画像の右に回り込むテキスト</p><br><br>
        <!-- クラスをつけたdivなどを配置 --><br>
        <span class="hbr-break2-hl-green"><div class="clear-box"></div></span><br><br>
        <p>画像の下から始まるテキスト</p><br><br>
        /* CSSで解除する */<br>
        .clear-box {<br>
          <span class="hbr-break2-hl-green">clear: both;</span><br>
        }
      </div>
      <p class="hbr-break2-note" style="color:#198754;">※デザインやレイアウトに関する制御は、すべてCSSに任せるのが現代のWeb標準です。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr-break2-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr-break2-demo-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.hbr-break2-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr-break2-label { font-size: 14px; font-weight: bold; margin-bottom: 15px; }

.hbr-break2-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
}
.hbr-break2-code-bad { border-left: 4px solid #dc3545; }
.hbr-break2-code-good { border-left: 4px solid #198754; }
.hbr-break2-hl-red { color: #e06c75; font-weight: bold; }
.hbr-break2-hl-green { color: #98c379; font-weight: bold; }
.hbr-break2-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }

印刷時の改ページ指定

Webサイトをブラウザの「印刷」機能を使って紙に出力したり、PDFとして保存したりする際、「ここから先は次のページから印刷させたい」という要望が出ることがあります。

印刷時の改ページには、break-before: page;を使用します。

このCSSを指定した要素は、印刷時に「新しいページの先頭」から印刷されるようになります。

🖨️ 印刷時の改ページ制御（CSS）

【1ページ目】
会社の基本情報や料金表などが入ります。
（画面上は下に続いていますが、印刷するとここで紙が終わります）

✂️ 印刷時はここから次のページへ

【2ページ目】
ここにある見出しは、必ず新しい紙の1行目から印刷されます。

<!– HTMLの記述 –>
1ページ目の内容…
<h2 class=”print-new-page”>2ページ目の見出し</h2>

/* 印刷（print）の時だけ発動する魔法のCSS */
@media print {
 .print-new-page {
 /* ここで強制的に改ページ（Break）させる */
 break-before: page;
 /* 古いブラウザ用: page-break-before: always; */
 }
}

※brタグを連打して紙をまたごうとするのはやめましょう。このCSSを使うだけで、どんな環境でも完璧に改ページされます。

HTMLコード表示

<div class="hbr-break3-wrapper">
  
  <div class="hbr-break3-demo-area">
    
    <div class="hbr-break3-box">
      <div class="hbr-break3-label">🖨️ 印刷時の改ページ制御（CSS）</div>
      
      <div class="hbr-break3-visual">
        <div class="hbr-break3-page-sim">
          【1ページ目】<br>
          会社の基本情報や料金表などが入ります。<br>
          （画面上は下に続いていますが、印刷するとここで紙が終わります）
        </div>
        
        <div class="hbr-break3-scissor-line"><span>✂️ 印刷時はここから次のページへ</span></div>

        <div class="hbr-break3-page-sim" style="background-color: #e2e3e5;">
          <strong style="color: #0d6efd;">【2ページ目】</strong><br>
          ここにある見出しは、必ず新しい紙の1行目から印刷されます。
        </div>
      </div>

      <div class="hbr-break3-code">
        <!-- HTMLの記述 --><br>
        <p>1ページ目の内容...</p><br>
        <span class="hbr-break3-hl-blue"><h2 class="print-new-page">2ページ目の見出し</h2></span><br><br>
        /* 印刷（print）の時だけ発動する魔法のCSS */<br>
        @media print {<br>
          .print-new-page {<br>
            /* ここで強制的に改ページ（Break）させる */<br>
            <span class="hbr-break3-hl-green">break-before: page;</span><br>
            <span class="hbr-break3-hl-note">/* 古いブラウザ用: page-break-before: always; */</span><br>
          }<br>
        }
      </div>
      <p class="hbr-break3-note">※brタグを連打して紙をまたごうとするのはやめましょう。このCSSを使うだけで、どんな環境でも完璧に改ページされます。</p>
    </div>

  </div>
</div>

CSSコード表示

.hbr-break3-wrapper {
  background-color: #f8f9fa;
  padding: 20px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-family: sans-serif;
}
.hbr-break3-demo-area {
  display: flex;
  justify-content: center;
}
.hbr-break3-box {
  background-color: #ffffff;
  border: 2px dashed #adb5bd;
  padding: 20px;
  width: 100%;
  max-width: 450px;
  border-radius: 4px;
}
.hbr-break3-label { font-size: 15px; font-weight: bold; margin-bottom: 20px; color: #333; }

/* 仮想の紙面プレビュー */
.hbr-break3-visual {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.hbr-break3-page-sim {
  padding: 15px;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}
.hbr-break3-scissor-line {
  text-align: center;
  border-top: 2px dashed #dc3545;
  margin: 0;
  position: relative;
  background-color: #fff;
}
.hbr-break3-scissor-line span {
  display: inline-block;
  background: #fff;
  padding: 0 10px;
  color: #dc3545;
  font-size: 12px;
  font-weight: bold;
  transform: translateY(-50%);
}

.hbr-break3-code {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  font-family: monospace;
  font-size: 13px;
  border-radius: 4px;
  line-height: 1.6;
  border-left: 4px solid #0d6efd;
}
.hbr-break3-hl-blue { color: #61afef; font-weight: bold; }
.hbr-break3-hl-green { color: #98c379; font-weight: bold; }
.hbr-break3-hl-note { color: #5c6370; font-style: italic; }
.hbr-break3-note { font-size: 12px; color: #666; margin-top: 10px; line-height: 1.5; }