【br要素】改行タグを使う際の注意点（ホワイトスペースの原因に！）

ホーム

この記事にはプロモーションが含まれています。

投稿：2022・03・06

更新：2023・01・13

HTML/CSSコーダーやWebデザイナーでなくともブログを書いたことがある方であれば、<br>が何を示すタグなのか分かるという方も多いのではないでしょうか？

言わずもがなかもしれませんが、brタグは文章に改行を入れるためのタグです。

使い方も簡単で、改行させたい位置にbrタグを挿入すれば良いだけですが、使い方が簡単であるがゆえに知らないうちに間違った使い方をしてしまっているケースがよくあります。

また、スマホ表示では改行が邪魔になることも多いですが、CSSでbrタグを非表示にすれば良いかというとそうとも言い切れません。
詳しくは本章で解説しますが、brタグがホワイトスペース（空白）の原因になることもあります。

そこで今回は、brタグを使う場合に気をつけたいポイントをお伝えします。

▼こんな時はどうすれば？
段落を変えずにテキストの上下の間隔を空けたい
改行にこだわりすぎない

▼動画解説は下のサムネイルから（YouTubeに飛びます）

×余白のために改行を入れる

まずは誰もが一度はやってしまいそうな、brタグの間違った使い方を確認していきましょう。

brタグ（改行）を挿入すると、当然ですがテキスト1行分の間隔が空くことになります。
そのため、改行のためではなく、見た目を整える（余白を広げる）ためにbrタグを使ってしまうという誤った使い方をしてしまうことがよく起こります。

極端な例ですが、以下のような感じです。

HTML

<img src="sample.png" alt="サンプル画像">
<br>
<br>
<br>
<br>
<img src="sample.png" alt="サンプル画像">

このようにすると、下の参考画像のように画像と画像の間に改行が入って（見た目上は）余白をつけることができてしまいます。

ですが当然、これは適切なbrタグの使い方とは言えません。

brタグの連続使用で余白を空けることがどれほど検索結果に影響を与えるか分かりませんが、検索ロボットからは「なんじゃこのページは！？無駄な改行だらけじゃないか！」…と認識されることになりかねません。

苦労して作ったWebページがそんな認識をされてしまうとむなしいですよね。
そうならないためにも、余白はCSSのmarginやpaddingで調整しましょう。

POINT!

・brタグを挿入することでテキスト１行分の間隔を空けることができるが…！
・見た目の調整（余白調整）としてbrタグを挿入するのは適切ではない！
・見た目の余白調整は、CSSのmarginやpaddingを使って調整しよう！

brタグをCSSで非表示にする際の注意点

PC表示では画面が横長になるのでキリの良いところで文章を改行させた方が読みやすくなりますが、スマホ表示では画面が縦長になるため改行させない方が読みやすい場合が多いです。

そのため、以下のようなCSSでスマホ表示の改行（brタグ）を非表示にする場合があります。

CSS

@media screen and (max-width: 767px) {
	br { display: none; }
}

brタグをCSSで非表示にすること自体に問題があるわけではないのですが、HTMLの書き方によってはホワイトスペース（空白）ができてしまう原因になるので注意が必要です。

下のHTMLをご覧ください。brタグで改行していますが、それだけでなくHTMLでも改行している場合です。

HTML

<p>1行目
<br>2行目
<br>3行目
</p>

brタグをCSS調整で非表示にしない場合、表示結果は当然ですが下のようになります。（わかりやすくするため太字にしています）
1行目
2行目
3行目

問題はbrタグをCSSで非表示にする場合です。上のHTMLのbrタグをCSSで非表示にすると次のような表示結果になります。

1行目
2行目
3行目

よく見るとそれぞれの間に、半角スペースが空いてしまっているのがわかりますね。

文章の途中で不必要なスペースが空いてしまうのは読みづらさや違和感の元となるので、避けたいところですよね。
このように、入れてもいない半角スペースができてしまう原因はHTMLで改行しているからです。

HTMLを次のように修正すると、brタグをCSSで非表示にしても半角スペースが入り込んでしまうことはありません。

HTML

<p>1行目<br>2行目<br>3行目</p>

brタグを挿入する際、HTMLでも改行した方がどこで改行が入るのかが分かりやすくなりますし、見た目的にも整うのですが、基本的にHTML上では文章を改行しない方がベターです。

あるいは、編集画面で改行を入れても実際のHTMLコードには改行が入らないようにするエディターのサポート機能やツールを取り入れるとか、何かしら対策を取っておくと良いと思います。

また、プログラムでホワイトスペースを取り除くというて手もあります。
参考までに、文章中のホワイトスペースを除去するプログラム例を載せておきます。

HTML

<div>
	<p class="white_space">HTML上で改行していても
		<br>プログラムによって
		<br>ホワイトスペースを取り除いています。
	</p>
</div>

CSS

br { display: none; }

JavaScript

let str = document.querySelector('.white_space').innerHTML;
let str2 = str.replace(/\s+/g, "");

document.querySelector('.white_space').innerHTML = str2;

表示結果

HTML上で改行していても
プログラムによって
ホワイトスペースを取り除いています。

ただし、上記のプログラムだと意図的に入れたいスペースまで除去されてしまうので、その点には注意が必要です。

POINT!

・brタグをCSSで非表示にすると、ホワイトスペースの原因になることがある！
・brタグの挿入時にHTML上でも改行を入れている場合で、CSSでbrタグを非表示にした際に意図しない半角スペースが入ってしまう！
・HTMLでは改行しないか、テキストエディタのサポート機能や各種ツール、空白を除去するプログラムなどを使って対策しよう！

段落を変えずに文章の上下の間隔を空けたい時

文章と文章の間隔を空けたい場合、基本的には段落（pタグ）を分けて、marginプロパティで余白を調整するのがセオリーと言えます。

ですが文章の繋がりを考えた時に、段落を変えずに文章間の間隔を広げたいと言う場合も当然あり得ます。
例えば、以下のような表現（書き方）をしたい場合などが該当するでしょう。

今週のテーマは…
ビジネスメールでよく使われる定型文です！

上の文章の繋がりを考えた場合、「今週のテーマは、ビジネスメールでよく使われる定型文です。」…というように、全体で一つの段落（まとまった文章）であると言えます。

なので同じ段落として扱いたいけれど、読み手にドキドキ感やインパクトを与えるためにテキスト間の余白を空けたい…という場合はどうすれば良いのでしょうか？

通常、文章途中のテキストを調整するにはspan要素で該当部分をマークアップし、span要素を対象にしてCSSで調整します。
しかし、span要素はインラインレベルに相当する要素であるため、上下のmarginが効かないという特徴を持ちます。

HTMLのブロックレベル・インラインレベルについてはこちらをご覧ください。

そのため、下のようなHTML/CSSコードで調整しようと思ってもうまくいきません。

無効になる（効かない）コード

HTML

<p>今週のテーマは…
	<br><span>ビジネスメールでよく使われる定型文</span>です！
</p>

CSS

span {
	margin-top: 5rem;
	}

解決策はいくつかありますが、最も簡単なのはspan要素をinline-blockにするという方法でしょう。
下のコードはmarginの調整が有効となります。

調整が有効なコード

CSS

span {
	display: inline-block;
	margin-top: 5rem;
	}

他にも、line-heightプロパティを使う方法もあります。
ただしline-heightを使った調整は上下どちらにも間隔が空くことになるので、上下どちらか片方のみの間隔を空けたい場合は向きません。

POINT!

・段落を変えずに文章間の間隔を空けたい場合、まずは該当部分をspan要素などでマークアップしよう！
・spanタグはインラインレベルの要素なので、そのままでは上下方向のmarginが効かない！
・span要素をinline-blockにしたり、line-heightで調整することで解決できる！

改行にこだわりすぎない

これまで改行（brタグ）の注意点について述べてきましたが、最も重要なポイントは改行位置にこだわりすぎないということです。

チラシデザインなど紙面デザインにおいては、文章の改行位置は制作側で完全に制御可能なのでこだわるべきポイントですが、Webの場合はそうはいきません。

スマホorパソコンといったデバイスの違いはもちろんですが、同じスマホという区分でも縦持ち・横持ちの違いがあったり、そもそも画面サイズが機種によって違ったりします。
パソコン表示においても、ブラウザを何px幅で表示させるかはユーザーの任意ですしフォントサイズ調整もユーザーの設定次第です。

以下のような文章を見ると、多くの人が改行位置を調整して文章を整えたいと思うでしょう。

今日の天
気は晴れです。

もちろん、可能である限り文章を読みやすく調整することは大切ですが、改行されたくない位置で改行されてしまうことを完璧に防ぐことは難しいと言えます。

ユーザーの環境や設定次第で異なる文章表示になることが避けられない以上、そこに必要以上にこだわりを持つのはオススメしません。

全体的に見て、『致命的に読みにくい』…と言えるほどの問題がなければ文章がどこで改行されても気にしすぎないのはWebデザインにおいて重要だと個人的には思います。

Webの場合、改行位置にこだわり過ぎるよりも、『メニューボタンは分かりやすい位置にあるか？』、『クリック（タップ）しやすい大きさか？』…など、UI方面に力を注いだ方が良いことも考えられます。

Webにおける改行（br要素）は文章の見た目を整える役目というよりも、一つの段落の文章が長くなり過ぎないように区切る役目だと考えると良いかもしれません。

POINT!

・Webでは開発者側で文章の改行位置を完璧にコントロールすることが困難！
・なので改行位置にはこだわり過ぎない方がベター！
・br要素は文章の見た目を整える役割ではなく、段落の中で文章に区切りをつける役割だと考えよう！

– 人気の注目記事 –

今回の動画で紹介したコード！

今回の解説動画で使用したコードです。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      img {
        width: 200px;
        display: block;
        margin: 0 auto;
      }
      p {
        width: fit-content;
        margin:  0 auto;
      }
      span {
        display: inline-block;
        margin: 2rem 0;
      }
      .white_space1 br {
        display: none;
      }
    </style>
  </head>
  <body>

    <div style="height: 400px"></div>

    <img src="img/sample.png" alt="サンプル画像">
      <br>
      <br>
      <br>
      <br>
    <img src="img/sample.png" alt="サンプル画像">

    <div style="height: 400px"></div>

    <p>今週のテーマは…
      <br>
      <span>ビジネスメールでよく使われる定型文</span>です！
    </p>

    <div style="height: 400px"></div>

    <div style="margin-bottom: 400px;">
      <p class="white_space1">HTML上で改行しているので
      <br>CSSでbr要素を非表示にすると
      <br>ホワイトスペースができてしまいます。
      </p>
    </div>

  </body>
</html>