改行 の代わりにspanタグを使用しないほうが良い理由と対処法

改行 の代わりにspanタグを使用しない

はてブを見ていたらこのような記事があった。

コンテンツ領域の幅によって改行位置を変えたい場合など、レイアウトの調整は CSS で行います。こうすると、HTML の意味付けはデバイスや環境が変わっても同一のまま、自由にデザインを行うことができます。

<p>
  <span class="pc-br">サンプルの</span>
  <span class="pc-br">文章です。</span>
</p>

@media screen and (min-width:640px) {
  /* 幅が 640px 以上の場合に適用するスタイル */
  .pc-br {
    display: block;
  }
}

いろいろなサイトで見かけるスマートフォン表示時に改行させる方法だが、この記述には4つの問題点がある。

「サンプルの 文章です。」をspanタグで分けると2つのブロック要素になってしまう。

ちなみにbrタグはインライン要素である。

brタグであれば、brタグがある場所が改行位置だということがすぐにわかるがspanタグだと開始タグと終了タグの位置を知らなければならないため改行位置がわかりづらい。

特にspanタグがほかにも使用されて入れ子になっているとわかりづらくなってしまう。

スマートフォンで改行させることが目的なので640px以上でdisplay:blockを適用させたのでは意味がない。

この場合、640px以下でdisplay:blockが正しい。

brの代わりにspanタグ max-width: 640px

CSSのMedia Queriesのmin-widthとmax-widthはよく間違われるためCSSに追加する際は注意が必要だ。

ちなみに640pxが指定されているのは、ほとんどのスマートフォンの横向きでの表示のdp(density-independent pixels[密度非依存ピクセル])が640pxのため。

インライン要素に(CRLFなどの)改行をして記述すると(CRLFなどの)改行が半角スペースになってブラウザ上に表示されてしまう。

brタグを使用すれば問題1と問題2を解決できる。

下記のようにbrタグにclassを付け、641px以上のときはdisplay: noneで非表示にする。

ただし、brタグを使用しても(CRLFなどの)改行を使用すれば半角スペースが表示されるため1行で記述する必要がある。

<p>
  サンプルの<br class="sp-br">文章です。
</p>

@media screen and (min-width: 641px) {
  /* 幅が641px以上の場合に適用するスタイル */
  .sp-br {
    display: none;
  }
}

1行で記述する以外にも改行のコメントアウトや「>」の前で改行する方法もあるがインデント位置や可読性の問題があるため個人的には非推奨。

<p>
  サンプルの<br class="sp-br"><!--
-->文章です。
</p>

<p>
  サンプルの<br class="sp-br"
  >文章です。
</p>

何かしらの事情によりどうしてもbrタグではなくspanタグを使いたい場合はdisplay: blockではなく下記のように改行(\A)をcontentで追加するのが望ましい。

<p>
  <span class="pc-br">サンプルの</span><span class="pc-br">文章です。</span>
</p>

@media screen and (max-width: 640px) {
  /* 幅が640px以下の場合に適用するスタイル */
  .pc-br + .pc-br::before {
    content: "\A";
    white-space: pre;
  }
}