HTML/CSS

~はじめてのHTML~ <br>を連続して使ってはいけない!

そもそも<br>とは

<br>とは~はじめてのHTML~タグの種類一覧クイックリファレンスでも書いていますが、改行するためのタグです。

<br>をあまり使わないほうがいい3つの理由

まずは行と行の間に空白行を設けたい時に間違って"<br>を使った例を紹介します。

<html>
  <head>
  </head>
  <body>
    <p> ここに本文 </p>

    <!-- ここに空白を入れたい -- >
    <br><br><br><br>

    <p> 本文の続き </p>
  </body>
</html>

このようにしてしまうと何がまずいのか、

  1. 装飾として使ってしまいがちになる
  2. メンテナンス性が悪くなる
  3. 表示するブラウザにより改行の扱いが変わる

このような弊害が発生する可能性があります。
順番に説明していきますね!

1.装飾として使ってしまいがちになる

<br>を見た目の調整で使ってしまうもののよくあるケースとして、長い文章を記述した時です。
確かに、長い文章を書くときはある程度改行してやらないと見づらいものになってしまいます。
ですが1つのグループである文章で使うべきなのは<p>タグです。

2.メンテナンス性が悪くなる

表示するときに「横幅に文章が納まらないから改行して納まるように調整する。」このようなパターンは多いと思います。

ですが、もしその横幅が今後変わってしまったら?
<br>タグをすべてずらして調整する必要が出てきますよね?

それこそ時間がもったいないので、文章の構成をする際は気を付けてください。

3.表示するブラウザにより改行の扱いが変わる

こちらはそのままです。ブラウザにより改行(<br>)の扱いが変わるので、表示やその他の機能の統一性が取れなくなってしまいます。

文書の途中に複数の空白行を設けたい場合

これで困った方意外と多いと思います。
今回はCSSを使った方法を紹介します。

<html>
  <head>
  </head>
  <body>
    <p>
   <!-- この"sample text"の後に100px分の空白ができます。 -->
      <div style="margin-bottom:100px">sample text</div>
    </p>
  </body>
</html>

このように<div>タグの要素に、
styleで"margin-bottom:100px"を指定すると、このタグの下(bottom)に100pxの空白を入れますよ。という意味になります。

じゃあ、"bottom"の部分を"top"に変えたらタグの上に空白が入りますか?

鋭いですね♪その通りです。

まとめ

今回はHTMLの記述に関して、改行を示すタグ"<br>"は連続して使わない方がいい理由についてサンプルコードで一緒に見ていきながら説明しました。

~はじめてのHTML~ コメントアウトの書き方

今日の要点は、

  1. <br>と<p>はしっかり理解して使い分ける。
  2. <br>は連続して使用するのはできるだけ避ける。
  3. 文書途中に2行以上の複数行分の空白はCSSでやるのがおすすめ

以上のことに注意してきれいなコードを書いてくださいね♪


Copyright© FUNA BLOG , 2020 All Rights Reserved.