スマホ表示でbrタグを無効化！CSSとJavaScriptでbrを消す方法

PC表示ではちょうどいい位置で改行しているのに、スマホで見ると改行が中途半端に入って読みにくい。レスポンシブでサイトを作っていると、この「brの改行がスマホだと邪魔」という場面によく出くわします。

私も自分のサイトで何度もこの調整をしてきました。この記事では、PC用の改行は残したままスマホでだけbrを消す方法を、CSSのクラス出し分けを軸に整理します。あわせて、display: none;で消したときに残る「半角スペース」の正体と対処、JavaScriptでbrごと削除する方法まで解説します。

スマホでだけbrを消したい、という場面

まず前提を整理しておきます。やりたいのは「すべてのbrを消す」ことではなく、「PCでは効かせたい改行を、スマホでだけ無効化する」ことです。

そのため、ページ内のbrを一律に消す指定は避けたいところです。デザイン上の改行が意図せず崩れてしまうからです。狙ったbrだけをピンポイントで制御する、というのがこの記事の方針です。

CSSでbrを非表示にする基本と「半角スペース」問題

スマホでbrを消す方法として最初に挙がるのが、display: none;です。

br { display: none; } の落とし穴

いちばん単純なのは、brそのものにdisplay: none;を指定するやり方です。

br { display: none; }

display: none;を指定した要素は、レイアウト上まるで存在しないかのように描画されます（MDNでも「その要素がないものとして文書が描画される」と説明されています）。なので改行自体は確かに消えます。

ところが、実際に試すと消えた箇所に半角スペースが残ることがあります。例えば次のHTMLです（タグを表示するため全角の＜＞を使っています）。

この文章は＜br＞
スマホだと＜br＞
改行が多いです。

これにbr { display: none; }を当てると、こう表示されます。

この文章は スマホだと 改行が多いです。

スペースの正体はbrではなく「ソースの改行」

ここで誤解しやすいのですが、この半角スペースはbrが残しているわけではありません。原因は、brの後ろでソースを改行していることです。

HTMLは連続する空白や改行を1つの半角スペースにまとめて扱います。brが表示されているときは、その改行がbrの行送りに吸収されて見えませんが、brをdisplay: none;で消すと、吸収されていたソース上の改行がスペースとして表に出てきます。つまりbrの消し方が悪いのではなく、ソースの書き方が原因です。

これを踏まえると、対処は2方向あります。ソース側で改行を入れないか、消したいbrだけを狙って制御するかです。

レスポンシブでbrを出し分ける定石（クラス指定）

私が実際に使っているのがこのやり方です。改行に役割を持たせて、PC用・スマホ用のクラスを付けて出し分けます。

まずHTML側で、消したいbrにクラスを付けます。

ここはPCだけ改行<br class="br-pc">したい文章です。
ここはスマホだけ改行<br class="br-sp">したい文章です。

CSSはこう書きます。ここでは768px未満をスマホとして扱っています。

/* スマホ用の改行はPCで消す */
.br-sp { display: none; }

@media (max-width: 767px) {
  /* PC用の改行をスマホで消す */
  .br-pc { display: none; }
  /* スマホ用の改行を復活させる */
  .br-sp { display: inline; }
}

こうしておけば、brを一律に消さずに済むので、意図しない改行崩れが起きません。ブレークポイント（767pxの部分）は、サイトの設計に合わせて変えてください。

先ほどの半角スペース問題も、この書き方なら気になりにくくなります。それでもスペースが目立つ場合は、消したいbrの前後でソースを改行せず、1行にまとめて書くのが確実です。

この文章は＜br class="br-pc"＞スマホだと＜br class="br-pc"＞改行を消したい。

JavaScriptでbrごと削除する方法

CSSの表示切り替えではなく、スマホ表示のときにbr要素そのものをDOMから消したい場合は、JavaScriptを使います。

以下は、画面幅が768px未満のときに、特定のクラス配下のbrだけを削除する例です。

<script>
window.addEventListener('DOMContentLoaded', () => {
  if (window.matchMedia('(max-width: 767px)').matches) {
    document
      .querySelectorAll('.br-sp-remove br')
      .forEach((br) => br.remove());
  }
});
</script>

ポイントは、document.querySelectorAll(‘br’)でページ全体のbrを取らず、.br-sp-removeなど特定の親要素配下に絞っていることです。サイト全体のbrを無条件に消すと、他の場所のレイアウトまで壊しかねません。

なお、remove()で消したbrは元に戻せません。画面幅を変えたときにPC用の改行を復活させたいなら、削除ではなくstyle.display = ‘none’で切り替える方が扱いやすいです。ただ、それならCSSのクラス出し分けで足りることがほとんどなので、JavaScriptを使うのは「どうしてもbr要素自体を消したい」ケースに絞るのがおすすめです。

そもそもbrに頼りすぎない、という視点

消し方の話をしてきましたが、もう一段引いて考えると、brの使いどころ自体を見直す価値もあります。

MDNは、brを住所や詩のように「改行そのものに意味がある内容」に使うものと位置づけています。段落の間隔を空ける目的でbrを並べるのは非推奨で、その場合はpタグで囲んでCSSのmarginで間隔を調整するのが本筋です。

アクセシビリティの面でも理由があります。スクリーンリーダーはbrの存在を読み上げることはあっても中身は読めないため、brで段落を作ると読み上げ環境で分かりにくくなる、とMDNは注意を促しています。加えて、display: none;で消した要素はアクセシビリティツリーからも外れます。

つまり、レイアウト目的の改行はCSS（marginやgap、flexなど）で作れないかを先に検討し、どうしても文中の改行位置を出し分けたいところだけbrをクラスで制御する。この順序で考えると、後々の管理がぐっと楽になります。私自身、コードエディタ側でbrの前後に自動で改行が入らない設定にしておくと、例の半角スペース問題に悩まされにくくなりました。

まとめ

スマホでbrを消す方法を、扱いやすい順に整理します。

CSSのクラス出し分け：.br-pc / .br-sp を付けてメディアクエリで切り替える。一律に消さないので改行崩れが起きにくく、まずこれが基本。
ソースの改行を入れない：半角スペースが気になるときは、消すbrの前後を1行にまとめて書く。
JavaScriptで削除：br要素自体を消したいときの手段。対象はクラスで必ず絞る。

半角スペースの正体はbrではなくソースの改行だと分かれば、対処はぐっとシンプルになります。まずはクラスでの出し分けから試してみてください。