Blog スタッフブログ

改行のために使用する <br> タグですが、CSSで表示制御を行った際に思わぬレイアウト崩れを引き起こすことがあります。

Bootstrapなどのフレームワークでは、レスポンシブ対応のために <br> タグの表示・非表示を切り替えるケースがあります。

例：スマートフォンの時だけ改行を無効化

しかし、その際の<br>のところに空白が発生することがあります。

今回は、<br> タグが原因で発生する隙間の問題と、その対策について紹介します。

どんな時に発生するのか？

例として以下のようなHTMLがあったとします。

//HTML
<p>
  見落としがちな<br class="pc-only">
  brタグの隙間対策
</p>

//CSS
@media (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

画面が767px以下になったと時に<br>が消えて改行されなくなります。

一見すると問題ないように見えますが実際にはこのように表示される場合があります。

理想

見落としがちなbrタグの隙間対策

実際

見落としがちな brタグの隙間対策

「な」と「br」の間に余計なスペースが生まれています。

何故こうなる？

通常の<br>だけなら改行されるため問題になりませんが、display:none;で非表示したりすると、エディタ上の改行が空白文字として扱われてしまいます。

一番確実な対策は<br>タグの後ろ改行しないことです。

<p>
  見落としがちな<br class="pc-only">brタグの隙間対策
</p>

このようにしてしまえば、改行が空白として扱われることはありません。

その他の対策

使っているCMSによっては、改行せずにエディタを保存してもCMSの処理で改行される場合があります。

こういった場合では<span>など他タグで代用すると解決します。

<p>
    <span class="pc-break">見落としがちな</span>
    <span>brタグの隙間対策</span>
</p>

.pc-break {
  display: block;
}

@media (max-width: 767px) {
  .pc-break {
    display: inline;
  }
}

まとめ

単純であるが故に流し見で見落としてやすい箇所です。

エディタで修正した後で、実際の画面で見ることが重要です。

その際、ブラウザの文字検索で空白（スペース）を検索すると発見に役立ちます。