【2026年7月最新】HTMLで改行する方法完全ガイド｜brタグ・pタグ・CSS改行制御の使い分けとClaude Code活用

この記事の内容

1. 01HTMLでEnterキーが効かない理由と改行の基本
2. 02brタグの正しい使い方と書き方の違い
3. 03【NG】brの連続使用アンチパターンと正しい代替
4. 04pタグで段落を作る｜brとpの使い分け基準
5. 05CSSで改行を制御する：white-space・word-break・overflow-wrap
6. 06改行させない方法：nowrap・wbrタグ
7. 07スマホ表示での改行崩れとレスポンシブ対策
8. 08Claude CodeでHTML改行問題を自動修正する
9. FAQよくある質問

📚 用語解説

ホワイトスペース処理：HTMLドキュメントにおいて、連続するスペース・タブ・改行文字（\n）をすべて「1つのスペース」に置き換えるブラウザの動作。これによりHTMLコードの見た目のレイアウト（インデントや複数行）は無視され、要素の構造のみが意味を持つ。CSSのwhite-spaceプロパティを変更するとこの挙動を変えられる。

<!-- HTMLのソースコード（Enterキーで改行している）-->
<p>これは1行目です
2行目はここ
3行目はここ</p>

<!-- ↑ ブラウザ上での表示 ↓ -->
これは1行目です 2行目はここ 3行目はここ
（改行なし・スペース1つに圧縮）

<!-- 複数スペースも1つに圧縮 -->
<p>こんに     ちは</p>
→ ブラウザ表示: こんに ちは（スペースが1つに）

📚 用語解説

<br>タグ：HTML Line Break要素。テキスト内に改行を挿入する空要素（コンテンツを持たない）。開始タグだけで使い、終了タグはない。HTML5では<br>と書くが、XHTMLの書き方（<br />）もHTML5で使えるため、どちらかに統一していれば問題ない。Enterキーの「改行」ではなく、「詩の行・住所・署名」など意味的に改行が必要な場面に使う。

<!-- HTML5の書き方（推奨） -->
<p>お問い合わせ先:<br>
株式会社GENAI<br>
東京都千代田区神田須田町1-1<br>
Tel: 03-1234-5678</p>

<!-- XHTMLの書き方（HTML5でも使用可） -->
<p>お問い合わせ先:<br />
株式会社GENAI<br />
東京都千代田区神田須田町1-1<br />
Tel: 03-1234-5678</p>

<!-- 誤った使い方（終了タグは不要） -->
<p>テキスト<br></br>テキスト</p>  ← 不正確だが多くのブラウザは許容

HTML5では <br> と書くのが推奨です（末尾のスラッシュなし）。XHTMLスタイルの <br /> は HTML5 でも使用でき、どちらでも動作します。チームや既存コードの規約に合わせましょう。Reactなどのフレームワークのテンプレートでは <br /> が一般的です（JSXはXMLベースのため自己終結タグが必要）。

<br>を複数並べてスペースを作ることは、HTML仕様では推奨されていません。スマホと PC でフォントサイズや行高が異なるため、PCで見た目が良くてもスマホで間隔がズレます。また、後からデザインを変えたいときにHTML全体を修正する必要があり保守性が下がります。CSSのmarginまたはpaddingで余白を制御するのが正しいアプローチです。

<!-- NG: <br>を連続して余白を作る（アンチパターン） -->
<p>見出しの後に余白が欲しい</p>
<br>
<br>
<br>
<p>ここに次のコンテンツ</p>

<!-- OK: CSSのmarginで余白を制御する -->
<style>
.section-gap {
    margin-bottom: 48px;  /* 余白はCSSで管理 */
}
</style>

<p class="section-gap">見出しの後に余白が欲しい</p>
<p>ここに次のコンテンツ</p>

<!-- 実務での正しい余白の付け方 -->

<!-- 段落間の余白 -->
<style>
p {
    margin-bottom: 1.5em;  /* 1em = フォントサイズ分の余白 */
}
/* スマホでは少し余白を減らす */
@media (max-width: 768px) {
    p {
        margin-bottom: 1em;
    }
}
</style>

<!-- 特定の要素の後だけ余白を増やす -->
<style>
.section-title {
    margin-top: 48px;
    margin-bottom: 24px;
}
</style>

<h2 class="section-title">セクションタイトル</h2>
<p>本文テキスト</p>

📚 用語解説

ブロックレベル要素 vs インライン要素：ブロックレベル要素（p, div, h1-h6, section等）は前後で強制的に改行され、幅が親要素いっぱいに広がる。インライン要素（span, a, strong, br等）はテキストの流れの中に配置され、前後で改行されない。<br>はインライン要素だが特殊で、直後に改行を挿入する空要素。<p>はブロックレベル要素で、段落全体が一つのブロックになる。

<!-- pタグの基本的な使い方 -->
<p>これは第1段落です。文章の塊として段落を表します。
段落内でEnterキーを押してもスペースになりますが、
長い文章は自動的に折り返されます。</p>

<p>これは第2段落です。前の段落との間にブラウザが
自動的にマージン（余白）を入れます。</p>

<!-- pタグ内でbrを使う（段落内の強制改行） -->
<p>東京都千代田区神田須田町1-1<br>
株式会社GENAI<br>
Tel: 03-1234-5678</p>

📚 用語解説

white-space プロパティ：HTMLエレメント内のホワイトスペース（空白・改行・タブ）をどう扱うかを指定するCSSプロパティ。デフォルトのnormalは複数のスペースを1つに圧縮して改行を無視する。preはHTMLソースの改行とスペースをそのまま表示（<pre>タグと同等）。pre-wrapはpreと同様だが自動折り返しあり。nowrapは改行なしの1行表示。

/* white-space の主要な値 */

/* normal（デフォルト）: 空白を圧縮、必要に応じて折り返し */
.normal-text {
    white-space: normal;
}

/* pre: 空白・改行をそのまま表示（Enterも有効に）*/
.preformatted {
    white-space: pre;
    font-family: monospace;
}

/* pre-wrap: preと同様だが、長い行は自動折り返し */
.pre-wrap-text {
    white-space: pre-wrap;
    /* 長いテキストも画面からはみ出さない */
}

/* nowrap: 改行せずに1行で表示（はみ出す場合あり）*/
.no-wrap-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* ... で切り詰め */
}

/* break-spaces: pre-wrapと似るがスペースも折り返し可能 */
.break-spaces {
    white-space: break-spaces;
}

/* 長い単語・URLの折り返し制御 */

/* word-break: normal（デフォルト）: 単語の途中では折り返さない */
.normal-word-break {
    word-break: normal;
}

/* word-break: break-all: どこでも折り返す（英単語も途中で折り返す）*/
.break-all {
    word-break: break-all;
    /* 英語テキストには不自然に見えることがある */
}

/* word-break: keep-all: 日本語でも単語途中での折り返しを防ぐ */
.keep-all {
    word-break: keep-all;
    /* 日本語でスペース以外の場所では折り返さない */
}

/* overflow-wrap: break-word: 単語が長すぎるときだけ途中で折り返す（推奨）*/
.break-word {
    overflow-wrap: break-word;
    /* URLや長い英語単語がはみ出すときに折り返す */
}

/* URLなど長い文字列のはみ出し対策（よく使う組み合わせ）*/
.url-safe {
    word-break: break-all;
    overflow-wrap: break-word;
}

日本語のコンテンツで一般的に使う組み合わせは: overflow-wrap: break-word（長い英単語・URLの折り返し）+ word-break: normal（日本語は通常の場所で折り返し）。本文テキストにはこの組み合わせが安全です。コードブロックはwhite-space: pre-wrapをよく使います。

/* コードブロックの表示（プリフォーマットテキスト）*/
pre, code {
    white-space: pre-wrap;  /* 折り返し可能なコード表示 */
    overflow-wrap: break-word;
    font-family: 'Consolas', 'Courier New', monospace;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;  /* 長い行はスクロール */
}

/* 長いURLや文字列の折り返し */
a, .url-text {
    word-break: break-all;
}

/* テキストを1行に収めて「...」で切り詰める */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;  /* 最大幅を指定 */
}

/* 複数行で「...」切り詰め（3行まで表示）*/
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<!-- white-space: nowrapで改行を防ぐ -->
<style>
.no-break {
    white-space: nowrap;
}
</style>

<!-- 「株式会社」で改行されないようにする -->
<span class="no-break">株式会社GENAI</span>

<!-- もしくはインラインスタイルで -->
<span style="white-space: nowrap;">050-1234-5678</span>
<!-- 電話番号・郵便番号が途中で折り返されるのを防ぐ -->

<!-- &nbsp;（ノーブレークスペース）でも改行を防げる -->
株式会社&nbsp;GENAI
<!-- ただしスペースの見た目が変わるため要注意 -->

📚 用語解説

<wbr>タグ（Word Break Opportunity）：HTML5で正式採用されたタグ。「この位置での改行を許可する」というヒントをブラウザに与える。URLのような長い文字列で、特定の位置でだけ折り返しを許可したい場合に使う。wbrを入れた位置が折り返されるかどうかは画面幅次第（折り返しの優先候補を指定するだけで強制ではない）。

<!-- <wbr>で長いURLに折り返し箇所のヒントを与える -->
<p>詳細はこちら:<br>
			

				https://genai-ai.co.jp<wbr>/ai-kanri<wbr>/blog<wbr>/cc-html-br-newline</p>
			
			
<!-- スラッシュの後をwbrにすると、そこで折り返されやすくなる -->

<!-- 長い日本語フレーズで特定位置だけ折り返しを許可 -->
<p>人工知能自動化<wbr>推進委員会<wbr>第三回<wbr>定期会議</p>
<!-- 画面が狭いときだけ自然な位置で折り返される -->

/* スマホ対応の改行まわりのCSS基本セット */

/* 1. 全体にbox-sizingを設定（余白計算を安定させる）*/
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. 画像・動画が親要素をはみ出ないように */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* 3. 長い文字列の折り返し */
p, td, th, li, a {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 4. コードブロックのスクロール対応 */
pre, code {
    overflow-x: auto;
    white-space: pre-wrap;  /* 折り返し可能に */
}

/* 5. メディアクエリでスマホのフォントサイズを調整 */
@media (max-width: 768px) {
    body {
        font-size: 15px;
        line-height: 1.7;
    }
    h2 {
        font-size: 1.4rem;
    }
}

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？