[HTML] BRタグは使うな! 私が「改行」を一切使わなくなった1つの理由

PC→○ / スマホ→×な例

まずはパソコンのモニターで見た時にバッチリに見えるように改行しているけど、スマホで見るとアレ?な例です。

パソコンのモニターに合わせた改行

こんな感じで非常に見やすく改行しています。……パソコンで見る分には。

それをスマホで見ると

ところがそれをスマホで見てみるとこんな風になっています。

読みやすいように意図的に入れた改行と見事にズレまくっています。とくに1、2文字で改行が入っているのはウザすぎですよね。

PCと比べ、スマホの文字の表示数が極端に少ないことが原因です。

PC→○ / スマホ→○

ではさっそく直しましょう。全部の改行を取ります。段落はもちろん<p>で囲んでいます。

改行を取り払いました

スマホで見たら変なところに改行が入りまくっていたので、すべての改行を取りました。

パソコンで見ても問題なく見られますよね。ただ、<p>の横幅を調整しないと一列の文字数が多すぎて見づらくなるのでご注意下さい。

スマホで見てみると

さて、すべての改行をとっぱらったやつをスマホで見てみます。どうなっているのでしょうか?

おおー! 見やすい!! そうなんです。スマホで見ると横幅が狭いので、横に20文字ぐらいでちょうど読みやすい量です。

<br>と<br />のどっち?

<br>という表記と<br />という表記の両方があります。この違いというのは、そのページが「HTML」で書かれているか、「XHTML」で書かれているかの違いです。

<br>

HTMLで書かれたページに使います。

<br />

XHTMLで書かれたページに使います。このXHTMLというやつは、「開始タグで始まれば終了タグ（閉じタグ）を必ず入れなければならない」というルールがあります。<p>で始まれば</p>で終わるというものですね。でもこの<br>には終了タグが存在しないため、強引に（?）<br />と表記するわけです。<img />タグも同じですね。

<br />を消し去る裏ワザ

何百何千にもわたるページで、すでに<br />を使いまくってて、もうどうしようもないよ!って方、いると思います。でもCSSをチョイといじるだけで一発ですべての改行を無効化にする技があるようです。

@media screen and (max-width: 480px) {
br { display : none ; }
}

これをやると、スマホで見たときだけ、本当にすべての<br />が消え去ります!。キチさん、情報教えてくれてありがとうございます。