目次
改行<br>の代わりに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; } }
改行<br>を複数連続しない方がいい理由【そんなHTMLで大丈夫か?#1】
いろいろなサイトで見かけるスマートフォン表示時に改行させる方法だが、この記述には4つの問題点がある。
問題1 ブロック要素になってしまう
「サンプルの<br>文章です。」をspanタグで分けると2つのブロック要素になってしまう。
ちなみにbrタグはインライン要素である。
問題2 可読性が悪い
brタグであれば、brタグがある場所が改行位置だということがすぐにわかるがspanタグだと開始タグと終了タグの位置を知らなければならないため改行位置がわかりづらい。
特にspanタグがほかにも使用されて入れ子になっているとわかりづらくなってしまう。
問題3 640px以上でdisplay:blockでは意味がない
スマートフォンで改行させることが目的なので640px以上でdisplay:blockを適用させたのでは意味がない。
brの代わりにspanタグ min-width: 640px
この場合、640px以下でdisplay:blockが正しい。
brの代わりにspanタグ max-width: 640px
CSSのMedia Queriesのmin-widthとmax-widthはよく間違われるためCSSに追加する際は注意が必要だ。
ちなみに640pxが指定されているのは、ほとんどのスマートフォンの横向きでの表示のdp(density-independent pixels[密度非依存ピクセル])が640pxのため。
問題4 半角スペースが入る
インライン要素に(CRLFなどの)改行をして記述すると(CRLFなどの)改行が半角スペースになってブラウザ上に表示されてしまう。
spanタグではなくbrタグを使用する
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タグを使いたい場合
何かしらの事情によりどうしても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; } }