閉じる

HTMLの改行（brタグ）の正しい使い方：不要な使用を避けるCSS制御とアクセシビリティの基本解説

広告

HTMLの文書構造を設計する際、最も頻繁に利用されるタグの一つに<br>タグがあります。

初心者からベテランまで馴染み深いタグですが、実はWeb標準の観点から最も誤用されやすいタグでもあります。

2026年現在のWeb制作においては、デバイスの多様化やアクセシビリティへの配慮がこれまで以上に重視されており、単なる「見た目の調整」のために<br>タグを多用することは推奨されません。

本記事では、<br>タグの本来の役割を再定義し、アクセシビリティを損なわない正しい使い方と、CSSを用いたモダンなレイアウト管理の手法について詳しく解説します。

適切なマークアップを習得することで、保守性の高い、ユーザーに優しいWebサイトの構築を目指しましょう。

目次 [ close ]
  1. HTMLにおける改行タグ（brタグ）の本質的な役割
    1. brタグを使用すべき具体的なケース
  2. なぜレイアウト目的でbrタグを使ってはいけないのか
    1. レスポンシブデザインへの弊害
    2. アクセシビリティとスクリーンリーダーへの影響
  3. 改行と段落の使い分け：pタグとbrタグの違い
  4. CSSによる正しい余白設定とレイアウト制御
    1. marginを用いた要素間の余白調整
  5. 特定のデバイスでのみ改行させるテクニック
    1. クラスによる表示・非表示の切り替え
  6. 最新のWeb制作における「折り返し」の制御
    1. wbrタグ（Word Break Opportunity）
    2. CSSの overflow-wrap と word-break
  7. フォームやボタン内での改行に関する注意点
  8. まとめ

HTMLにおける改行タグ（brタグ）の本質的な役割

HTMLの仕様において、<br>タグは「Line Break」の略であり、文脈の中で強制的に改行が必要な箇所に使用するためのものです。

重要なのは、これが「段落を分けるため」や「余白を作るため」の道具ではないという点です。

WHATWGのHTML Living Standardでは、<br>タグの使用は「住所や詩、歌詞などのように、改行自体がコンテンツの一部である場合に限定すべきである」と定義されています。

つまり、改行がなくなると意味が変わってしまう、あるいは非常に読みにくくなってしまうケースにのみ使用するのが本来の姿です。

brタグを使用すべき具体的なケース

以下のようなケースでは、<br>タグの使用が適しています。

  • 郵便番号と住所の区切り
  • 詩や歌詞の一行ごとの区切り
  • 署名欄の情報の区切り

例えば、住所を表示する場合は次のような記述になります。

HTML
<!-- 正しいbrタグの使用例：住所の表示 -->
<p>
  〒100-0001<br>
  東京都千代田区千代田1-1<br>
  〇〇ビル 5階
</p>
実行結果
〒100-0001
東京都千代田区千代田1-1
〇〇ビル 5階

このように、意味のまとまりを維持したまま行を分ける必要がある場面こそが、<br>タグの主戦場です。

なぜレイアウト目的でbrタグを使ってはいけないのか

Webデザインの現場では、テキストの横幅を調整したり、要素間のスペースを空けたりするために<br>タグが使われることが多々あります。

しかし、この手法には大きなリスクが伴います。

レスポンシブデザインへの弊害

現代のWeb閲覧環境は、スマートフォンの小さな画面から超ワイドなデスクトップモニターまで多岐にわたります。

<br>タグで無理やり改行を入れると、画面幅が狭まった際に意図しない位置で不自然な改行が発生し、文章が非常に読みづらくなってしまいます。

例えば、デスクトップ表示に合わせて「本日は晴天なり、
散歩に出かけましょう」と記述した場合、スマートフォンの幅では「本日は晴天な り、 散歩に出かけましょう」のように、1文字だけが次の行に送られるといった現象が起こり得ます。

アクセシビリティとスクリーンリーダーへの影響

視覚障害者が利用するスクリーンリーダー (音声読み上げソフト) において、連続した<br>タグは「空白」や「改行」としてそのまま認識されることがあります。

レイアウトの調整のために<br>を3回繰り返して余白を作った場合、読み上げソフトによっては「改行、改行、改行」と無意味な情報を読み上げ続け、ユーザーの理解を妨げる原因になります。

アクセシビリティの観点からは、コンテンツの構造（HTML）と見た目の装飾（CSS）を完全に分離することが求められます。

改行と段落の使い分け：pタグとbrタグの違い

初心者の方が混同しやすいのが、<p>タグと<br>タグの使い分けです。

項目<p>タグ<br>タグ
正称Paragraph (段落)Line Break (改行)
意味一つの完結した意味のまとまりを示す同一テキスト内での強制的な行送り
余白CSSのmarginで調整するのが基本余白調整のために使うべきではない
構造ブロックレベル要素インライン要素

「話の内容が変わるならpタグ、同じ話の中で行だけ変えたいならbrタグ」という基準で判断するのがスムーズです。

もし、上下の行に大きな隙間を開けたいのであれば、それは<br>を増やすのではなく、CSSでその要素のmargin-bottomを設定すべきケースです。

CSSによる正しい余白設定とレイアウト制御

要素と要素の間にスペースを作りたい場合は、CSSのmarginまたはpaddingプロパティを使用します。

これにより、HTMLの構造を汚さず、デバイスごとに最適な余白を一括管理できます。

marginを用いた要素間の余白調整

例えば、段落と段落の間に2rem (約32px) の余白を作りたい場合のコードは以下のようになります。

HTML
<!-- HTML構造 -->
<div class="content-wrapper">
  <p class="description">
    Webサイトのアクセシビリティを向上させるためには、適切なHTMLタグの選択が不可欠です。
  </p>
  <p class="description">
    特に、改行タグの扱いは文章の読みやすさに直結します。
  </p>
</div>
CSS
/* CSSでの指定 */
.description {
  /* 段落の下側に余白を持たせる */
  margin-bottom: 2rem;
  line-height: 1.8; /* 行間も適切に設定 */
}

/* 最後の要素だけは余白を消すなどの制御も容易 */
.description:last-child {
  margin-bottom: 0;
}

このようにCSSで管理することで、「やっぱり余白を少し狭めたい」と思った時に、HTMLファイルを何百箇所も修正する必要がなくなり、CSSファイルを1行書き換えるだけで対応可能になります。

特定のデバイスでのみ改行させるテクニック

どうしてもデザイン上の理由から、「PCではこの位置で改行したいが、スマホでは改行させたくない」という場面があります。

その際も、<br>タグを直接配置するのではなく、クラスを活用してCSSで制御するのがプロの技法です。

クラスによる表示・非表示の切り替え

以下の例では、PC環境でのみ有効な改行を設定しています。

HTML
<p>
  私たちは最新のテクノロジーを活用し、<br class="pc-only">
  お客様のビジネスを次なるステージへと導きます。
</p>
CSS
/* デフォルト（モバイル）では改行を無効化 */
.pc-only {
  display: none;
}

/* PCサイズ（例：768px以上）になった時だけ改行を有効化 */
@media (min-width: 768px) {
  .pc-only {
    display: inline;
  }
}

この方法であれば、画面幅に合わせて最適な読み心地を提供でき、レスポンシブデザインの柔軟性を損なうことがありません。

最新のWeb制作における「折り返し」の制御

2026年のWeb制作において、<br>タグ以外にもテキストの折り返しをスマートに制御する手段が増えています。

特に有用なのが、<wbr>タグとCSSの属性です。

wbrタグ（Word Break Opportunity）

<wbr>タグは、「ブラウザが必要に応じて改行しても良い場所」を提案するタグです。

単語の途中で改行されるのを防ぎつつ、適切な位置での折り返しを促すことができます。

HTML
<p>
  非常に長い英単語や、
  Super<wbr>califragilistic<wbr>expialidocious
  のような単語が含まれる場合に便利です。
</p>

CSSの overflow-wrap と word-break

テキストが親要素を突き抜けてしまうのを防ぐためには、CSSプロパティを活用します。

CSS
.text-container {
  /* 単語の途中で無理やり折るのではなく、適切な位置を探す */
  overflow-wrap: break-word;
  /* 日本語などの2バイト文字の挙動を制御 */
  word-break: normal;
}

また、日本語の文章において「文節」で区切りたい場合には、2020年代半ばから普及が進んでいるbudouxのようなライブラリや、最新ブラウザの自然言語処理エンジンを活用した自動折り返し制御も検討に値します。

フォームやボタン内での改行に関する注意点

フォームのラベルやボタンの中で<br>タグを使用することも一般的ですが、ここでも注意が必要です。

ボタン要素の中に改行を入れると、クリックできる領域の計算が複雑になったり、アクセシビリティツリーでの見え方が不安定になったりすることがあります。

HTML
<!-- 推奨されない例：ボタン内に改行 -->
<button type="button">
  送信して<br>次へ進む
</button>

<!-- 推奨される例：CSSのmax-widthやflexboxで制御 -->
<button type="button" class="flexible-btn">
  送信して次へ進む
</button>

ボタン内でテキストを2行にしたい場合は、ボタン内の要素を<span>で囲み、display: block;を適用する方が構造として健全です。

まとめ

HTMLの<br>タグは、シンプルでありながらその扱いに制作者のスキルが如実に現れるタグです。

本記事で解説したポイントを改めて整理します。

  • <br>タグは「改行自体に意味があるコンテンツ（住所、詩など）」にのみ使用する。
  • 文書の段落分けには<p>タグを使い、見た目の余白はCSSのmarginやpaddingで制御する。
  • レイアウト目的での<br>タグの多用は、レスポンシブデザインの崩れやアクセシビリティの低下を招く悪手である。
  • PC/スマホでの改行位置の出し分けは、CSSのメディアクエリとdisplayプロパティを活用する。

正しいHTMLマークアップは、検索エンジン最適化（SEO）への好影響だけでなく、メンテナンスコストの削減や、あらゆるデバイス・ユーザーに対する情報の等価な提供に繋がります。

当たり前に使っているタグだからこそ、一度その「意味」に立ち返り、2026年のスタンダードに即した記述を心がけましょう。

クラウドSSLサイトシールは安心の証です。

URLをコピーしました！