<br><br>と改行を連続で使用しない方がいい理由とどうすべきかを解説！

HTML初心者でやりがちなのが、縦の余白の調整のために<br><br>と改行を意味するbrタグを連続で入れて空白行を作るやり方です。

たしかに<br><br>を使ってもChromeなどのブラウザで見てみると思い通り、空白業が表示され高さの調整が出来ているかもしれませんが、実際には<br><br>とbrタグを連続で使わない方がコーディング上好ましいです。

まず1つ目の理由ですが、<br><br>の連続での余白などデザイン調整はHTML的に間違いだという点です。

そもそもbrタグは「line break（改行）」の略で、俳句の5・7・5や住所のように、改行が文章上でコンテンツとして意味をなす場合にのみ利用するタグとなります。

以下はbrを使って俳句をWEBで表現したものです。brの改行コードがないと、1行で表示され、俳句として分かりづらいですよね。

つまり文章上意味なく、デザインの調整のために<br><br>を連続使用するのは間違いとなります。これが1つ目の理由となります。

HTMLはWEBページの設計図をHTMLが担当し、デザイン部分をCSSが担当するという形で役割を分けるのがキレイな形となります。

つまりbrタグでデザインを整えるのであれば、CSSを使って余白の調整を行うのが本来の正しい形となります。

もしもbrで余白調整をしていらら、自分だけが開発者であれば問題ないですが、他のエンジニアさんがいる状況では混乱の元となりがちですし、brがある状況でCSSのmarginでも余白を調整したいと思った時に思わぬ邪魔者となりえます。

さて、これまで改行の連続（<br><br>）での余白調整は使わない方がいいと述べてきましたが、では代わりにどのようにしていけばいいのでしょうか。解説していきます。

<br><br>をしている箇所が、もしも文章の段落として分けれれる場合はbrの代わりに段落（paragraph）を表すpタグを使いましょう。

pタグではデフォルトで前後に改行が入りますので、brタグを同じ事が出来ます。更にCSSでpタグやpタグに付与したidやclass属性を指定して、marginやpaddingなど余白の調整で、微調整しましょう。

brで空白行で余白調整している場合はCSSのmarginやpaddingで代わりとなるはずです。

また文章の行間の調整でbrを使っていた場合は、行間を調整するCSSのプロパティのline-heightを使いましょう。

brが悪いというわけではなく、brにも使い所があり、正しく使えば問題ないですが、正しくない使い方をしている場合は、CSSなど本来正しい形でデザイン調整をしましょうという内容の記事となります。

ぜひ実践してみてください！