HTMLで改行を思い通りに！基本と状況別の解決策をわかりやすく解説　

せっかくコードを書いたのに、思った通りに表示されないと困ってしまいますよね。

改行タグにはいくつか種類があり、それぞれ用途や効果が異なります。

本記事では、HTML改行の基本から応用まで、わかりやすく解説していきます。

改行できない原因や解決策、SEOに配慮した改行のコツもわかるので最後まで読んでみてください。

HTML改行する3つの基本タグ

HTMLで文章やテキストを記述するとき、ソースコード上で改行しても、ブラウザの表示にはそのまま反映されません。

HTMLが連続したスペースや改行を基本的に1つのスペースとして扱うからです。

ここでは、まず押さえておくべき主要な3つの改行関連タグを紹介します。

• brタグ
• pタグ
• preタグ

意図した場所で改行を表示させるために、基本の改行タグを覚えておきましょう。

brタグ

brタグは、手軽に使える改行タグです。

タグを挿入した箇所で、テキストが強制的に改行されます。

たとえば、住所表記のように段落を変えるほどではないけれど、文の途中で区切りを入れたい場合に便利です。

下記のように記述すると、ブラウザでは各行が改行されて表示されます。

コピー<p>
これは最初の行です。<br>
ここで改行されます。<br>
そしてこれが最後の行。
</p>

ブラウザでは以下のように表示されます。

pタグ

pタグは、paragraphの略で文章を定義するタグです。

<p>と</p>で囲まれたテキストは、ひとまとまりの段落として扱われ、要素の上下に適切な余白が自動的に挿入されます。

視覚的に文章の区切りがわかりやすくなるため、ブログ記事の本文や説明文など、ある程度の長さを持つ文章のまとまりを示す際に使用します。

brタグは見た目だけの区切り、pタグは意味を持った区切りという点が大きな違いです。

たとえば下記のように記述すると、2つの独立した段落が作成され、それぞれの間には余白が生まれます。

コピー<p>これは最初の段落です。いくつかの文で構成されています。</p>
<p>これは次の段落です。前の段落とは内容的に区切りがあります。</p>

ブラウザ表示は以下の通りです。

preタグ

preタグはタグで囲まれた部分は、エディタで見たままの形でブラウザに表示されます。

たとえば、プログラムのソースコードや詩、アスキーアートなど、文字の配置やインデントが重要な意味を持つコンテンツ表示などで使われます。

以下の例を見てください。下記のように記述すると、<pre>タグ内がそのままブラウザに表示されます。

br・p・preタグの使い分け

HTMLで改行やテキストを整えるとき、中心となるのが<p>タグ、<br>タグ、そして<pre>タグです。

3つのタグの特徴を以下の比較表にまとめました。

brタグは単なる見た目の改行で、住所表示などの限られた場面で活用します。

pタグは意味のあるまとまり（段落）を作るもので、基本的な文章構造に使います。

preタグはプログラムコードなど入力通りに表示したい場合に使用しましょう。

3つのタグのそれぞれの役割と特徴を状況に応じて上手に使い分けることで、読みやすくメンテナンスしやすいHTMLページが作れるようになります。

HTMLで改行できない原因と解決策

HTMLで改行が効かない場合の主な原因と、それぞれの具体的な解決策を紹介します。

• CSSの影響
• タグの記述ミスや閉じ忘れ
• brタグが効かない特殊ケース

それぞれ順番に見ていきましょう。

CSSの影響

CSSのスタイル指定が、HTMLの改行タグの動作を上書きしてしまう場合があります。

特に注意すべきプロパティはdisplayとwhite-spaceです。

HTMLの改行問題は主に2つのCSSプロパティが原因です。

displayプロパティがinlineに設定されていると要素が行内要素として扱われ改行されません。

またwhite-spaceプロパティがnowrapに設定されていると、ソースコード上の改行やbrタグが無視されてしまいます。

それぞれ開発者ツールで対象要素のスタイルを確認し、適切な値に修正することで解決が可能です。

このように、CSSはHTMLの改行表示に大きな影響を与えます。

HTMLタグによる改行だけでなく、CSSを使ってより柔軟に改行する方法について詳しく知りたい方は、こちらの記事「CSSで改行する4つの方法！初心者必見の改行テクニックをかんたん解説」もぜひご覧ください。

タグの記述ミスや閉じ忘れ

HTMLタグの記述ミスも改行が機能しない原因です。

「<br」や「<p」のように終了の「>」が抜けていたり、タグや属性が全角になっていたりすると期待した動きになりません。

このような記述ミスをしないために、コードエディタにプラグインを導入しておくと利便性が高まります。

たとえばVisual Studio Codeを利用しているなら、HTMLの記述ミスを教えてくれる「HTML Hint」やコードのスペルミスを知らせてくれる「Code Spell Checke」がおすすめです。

プラグインはミスがなくなるだけでなく作業効率もアップするため、自分の開発スタイルに合ったものをいろいろ探してみてください。

brタグが効かない特殊ケース

<br>タグが期待通りに機能しない特殊なケースが存在します。

ここでは、主な原因とその確認・解決策を表で分かりやすくまとめました。

上記以外にも、overflow: hidden;とheightの組み合わせでテキストが隠れていたり、displayプロパティの設定が影響していることがあります。

brタグが効かない問題は、多くの場合CSSの設定に起因します。

開発者ツールを活用して焦らずに問題となるCSSを一つずつ探っていきましょう。

HTMLで改行するときの3つのコツ

HTMLで改行するときのコツは以下の3つです。

1. 改行位置を見極めて読みやすくする
2. SEOとアクセシビリティを強化する
3. レイアウトを調整して余計な空白を防ぐ

HTMLの改行は、ただタグを入れるだけではなく、「どこで」「どうやって」改行するかを考えましょう。

ポイントを意識するだけで、Webサイト全体の読みやすさと品質がぐっと向上します。

1.改行位置を見極めて読みやすくする

改行は、読者がスムーズに内容を理解できるように使うのがポイントです。

文章の途中で不自然な場所に改行が入ってしまうと、内容が頭に入りにくくなります。

たとえば、長文は段落ごとにわけて適切な場所でpタグを使用したり、複数の項目を挙げるときはulやol、liタグで箇条書きにしたりすると読みやすくなります。

また、パソコンではきれいに見えても、スマートフォンだと不自然な場所で改行されがちです。

画面幅に合わせたレスポンシブデザインにも気をつけ、改行するときは、意味の切れ目や文節など「自然な区切り」を意識しましょう。

2.SEOとアクセシビリティを強化する

改行の方法によっては、検索エンジンやスクリーンリーダーなどがページの構造を正しく理解できなくなる場合があります。

そのためSEOやアクセシビリティの観点から、brタグの乱用を避けてスクリーンリーダーへ配慮しましょう。

たとえば、スペースを空ける目的でbrを連続で使用すると、検索エンジンがコンテンツ構造を誤解してページの評価や検索順位に悪影響が出ることがあります。

本来伝えたい情報が正しく認識されず、重要なキーワードや構造的な情報が薄れてしまいます。

意味がある区切りにはpタグを使用し、全てのユーザーにとって理解しやすいコンテンツを提供しましょう。

3.レイアウトを調整して余計な空白を防ぐ

改行タグや段落タグを使うことで、思わぬ場所に余白ができてしまう場合があります。

余計な空白ができてしまう原因と対策を以下の表にまとめました。

もし意図しない余白が出てしまった場合は、ブラウザの開発者ツールでどの部分にmarginやpadding、余計なスペースが入っているか確認し、落ち着いて対処しましょう。

特殊なHTML要素での改行方法

ここでは、以下の代表的なケースと解決方法を紹介します。

• テーブル内の改行
• buttonタグ内の改行
• textarea内の改行を反映
• 文字列データの改行をHTML表示

気になるところをチェックしてみてください。

テーブル内の改行

HTMLのテーブルのセル内でテキストを改行したい場合は、brタグを使用しましょう。

セルの内容が長くなるときに、適度にbrタグを挿入することで、テーブル全体の可読性を高められます。

たとえば、下記のようにセル内の文字数が長い場合にbrタグを入れると見やすくなります。

コピー<table>
    <tr>
        <th>項目</th>
        <th>説明</th>
    </tr>
    <tr>
        <td>項目A</td>
        <td>これは項目Aの説明です。<br>複数行にわたる場合があります。</td>
    </tr>
</table>

CSSでセルのvertical-alignプロパティを調整すると、改行されたテキストの垂直方向の指定もできます。

buttonタグ内の改行

buttonタグ内のテキストを改行したい場合も、brタグが使用可能です。

たとえば、ボタン内のテキストを行で分けたい場合は以下のように記述します。

コピー<button type="button">
詳細を<br>確認する
</button>

ただし、ブラウザや適用されているCSSによっては、ボタンの高さやテキストの配置が期待通りにならないこともあります。

うまく動作しない場合は、ボタンにCSSでheight: auto;を指定したり、paddingを調整したり、ボタン内のテキストをspanタグで囲み、display: block;を適用するなどの工夫が必要です。

また、CSSのwhite-space: pre-wrap;をボタン要素に適用することでも、ソースコード内の改行を反映させることが可能です。

textarea内の改行を反映

ユーザーがtextareaに入力したテキストには、改行が含まれることがよくあります。

入力された改行をWebページ上にそのまま反映させる方法はいくつかありますが、ここではJavaScriptとCSSのwhite-spaceプロパティで解決する方法を紹介します。

まず、ユーザーが入力するためのtextareaと入力内容を表示するためのHTMLを記述しましょう。

コピー<textarea id="myTextarea" rows="5" placeholder="ここに文章やコードを入力してください...">
【1行目】スペースや改行が

【3行目】どう表示されるか

【6行目】確認しやすいです。</textarea>
<p>入力された内容は下に表示されます：</p>
<div id="displayArea" class="textarea-display"></div>

次にidのdisplayAreaに対して、CSSでwhite-space: pre-wrap;を指定します。

white-space: pre-wrap;は、改行だけでなく、入力したスペースもそのまま表示し、表示エリアの幅を超えてしまうときは自動的に折り返してくれます。

コピー.textarea-display {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    min-height: 70px;
    background-color: #f9f9f9;
    white-space: pre-wrap;
}

最後にJavaScriptでtextareaに入力された内容を取得し、表示エリアのdivにリアルタイムで反映させる処理を記述します。

コピー
document.addEventListener('DOMContentLoaded', function() {
// HTML要素を取得します
const textareaElement = document.getElementById('myTextarea');
const displayAreaElement = document.getElementById('displayArea');

// textareaとdisplayAreaがちゃんと取得できたか確認（どちらかがnullだとエラーになるため）
if (textareaElement && displayAreaElement) {
function updateDisplay() {
const inputText = textareaElement.value;
displayAreaElement.textContent = inputText;
}
// 1. ページ読み込み時に、textareaの初期値を表示エリアに反映
updateDisplay();
// 2. textareaに入力があるたびに、表示エリアの内容を更新する
textareaElement.addEventListener('input', updateDisplay);
} else {
console.error('必要なHTML要素が見つかりませんでした。IDを確認してください。');
}
});

ブラウザでは、入力したままの見た目で表示されます。

このようにtextarea内の改行を反映させたいときは、CSSのwhite-space: pre-wrap;とJavaScriptを組み合わせて実装してみてください。

文字列データの改行をHTML表示

プログラムで取得したテキストやデータの中に\n改行コードの「\n」が入っている場合、そのままHTMLで表示すると改行が反映されません。

このようなときは、JavaScriptで\nを<br>に置き換えると、HTML上でも改行できます。

たとえば、下記のように記述します。

コピー<div id="data-output"></div>

コピーconst data = "1行目\n2行目\n3行目";
document.getElementById('data-output').innerHTML = data.replace(/\n/g, '<br>');

ブラウザでは以下のように改行が反映されて表示されます。

HTMLでdata-outputというIDの表示場所を用意し、JavaScriptで、改行(\n)を含む複数行の文字列dataを記述します。

文字列内の全ての\nをHTMLの改行タグ<br>に置き換え、最終的にdata-outputの場所にその結果を表示して、Webページ上で改行を実装しています。

まとめ：HTML改行をマスターしよう

HTMLにおける改行は、単にテキストの見た目を整えるだけでなく、コンテンツの構造を正しく伝え、ユーザーの可読性やアクセシビリティを高める上で非常に重要な役割を担います。

改行するときはbrタグ、意味のあるまとまりで区切るならpタグ、入力した通りに表示するならpreタグを使いましょう。

意図を持った改行を心がけ、適切に使い分けることで、より質の高いWebコンテンツを作成できます。

Web制作のスキルをさらに本格的に磨き、プロとして活躍したい方は、デイトラのWeb制作コースがおすすめです。

未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！

デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。

HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。

さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。

Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！