レスポンシブデザインが当たり前になった現代、スマホ表示の際にbrタグを非表示にしたいと考えたことはありませんか？
例えば、PC表示では改行を入れたいけれど、スマホではその改行が不自然に感じることがよくあります。こうした状況に対処するため、display: none;を使ってbrタグを非表示にすることができますが、これには注意すべき点があります。
この記事では、スマホ表示でbrタグを非表示にした際に発生する「半角スペース」問題とその回避策を解説します。また、疑似要素を使った解決方法や代替案も併せて紹介するので、ぜひ参考にしてみてください。
CSSでbrタグを無効化（非表示）にする方法
スマホ表示時にbrタグを消す方法としてよく紹介されているのは、display: none;を使用する方法です。
[display: none;]を使った場合の問題点
一般的な方法は以下のように、brタグに対してdisplay: none;を指定します。
br { display: none; } 一見すると、これでbrタグが消えたように見えますが、実際には消去された箇所に半角スペースが残ることがあります。例えば、以下のHTMLコードを見てください（コードを表示するため全角を使っています）。
この文章は＜br＞
改行が＜br＞
多いです。上記のHTMLにdisplay: none;を適用すると、以下のようになります。
この文章は 改行が 多いです。スペースが入ってしまう原因は、brタグの後に改行が含まれていることです。HTMLは、改行や空白も一つの文字として扱うため、display: none;を適用しても、brタグの後にある「改行」が空白として残ってしまうのです。
回避策 1: 改行を削除する
ひとつの解決方法としては、HTMLソース内のbrタグの前後を改行なしで記述することです。以下のようにbrタグを行内にまとめて書けば、問題は発生しません。
この文章は＜br＞改行が＜br＞多いです。 ただし、この方法ではHTMLコードが読みにくくなるため、管理上のデメリットがあります。特に、Dreamweaverなどのコードエディタで自動整形機能を使っていると、再度改行が入ってしまうこともあります。
回避策 2: 疑似要素を使ってスペースを詰める方法
次に紹介するのは、疑似要素を使って余白を調整する方法です。
br {
content: '';
}
br::after {
margin-right: -0.333rem;
content: '';
}
この方法では、brタグにcontent: ”を適用することで、ブラウザが余白を追加しないようにし、さらに疑似要素::afterを使ってマイナスのマージンを設定します。これにより、不要な半角スペースをなくすことが可能です。
しかし、この方法も完全ではなく、ブラウザによっては意図通りに動作しない場合もあるため、テストが必要です。
別の解決方法：HTML内のbrタグを削除する方法
現行のブラウザでは、CSSだけで完璧にbrタグを消すのは難しい場合があります。そのため、場合によってはJavaScriptを使って動的にbrタグを削除するのも一つの手です。
JavaScriptでbrタグを削除する方法
以下のJavaScriptを使えば、特定の条件（例: スマホ表示時）でbrタグを削除することが可能です。
<script>
document.addEventListener('DOMContentLoaded', function() {
if (window.innerWidth < 768) { // 画面幅が768px未満の場合（スマホ表示） let brTags = document.querySelectorAll('br'); brTags.forEach(tag => tag.remove()); } });
</script>上記のコードは、ブラウザの画面幅が768px未満の場合に、すべてのbrタグを削除するというものです。これにより、スマホ表示時に不要な改行や半角スペースが発生するのを防ぐことができます。
まとめ：最適な方法を選択しよう
PCとスマホで異なるレイアウトを実現する際に、brタグを消すかどうかは悩みどころです。以下に、それぞれの解決策を整理しました。
- 改行を削除する： ソースコードをシンプルに保つ方法ですが、管理が難しい。
- 疑似要素を使う： CSSだけで対処できるものの、完全な解決にはならない場合も。
- JavaScriptを使う： 動的にbrタグを制御できるので、確実性が高い。
目的や環境に合わせて最適な方法を選んでください。特に、サイトのユーザビリティを考慮した上で、どの方法が一番管理しやすいかを見極めることが大切です。
追記：2023/10/18
現行のブラウザ（ChromeやFirefox等）は、上記のCSS設定ではうまく対応できないケースが増えています。そのため、私の場合はDreamweaverの設定を変更し、brタグで改行が入らないようにしています。
Dreamweaverでの改行設定方法
メニューバーの[編集] → [環境設定] → [コードフォーマット] → [高度なフォーマット]内の「タグライブラリ」ボタンから、brの改行を「なし」と設定すれば、Dreamweaver上での自動改行が入らなくなります。
