HTML/CSS

【はじめてのHTML】<br>を連続して使ってはいけない理由とは?

HTMLで改行や空白を空けるときに<br>を使って良いの?<br>は連続して使っちゃいけないって聞いたけどどうしたらいいの。

こういった疑問に答えます。

 

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • HTMLで<br>を連続で使って良いのか知りたい方
  • HTMLで<br>を連続で使わずにどう代替すれば良いのか知りたい方

 

 

 

【HTMLの基本】そもそも<br>とは

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

使い方としては、一つの段落(pタグ)などの途中で改行するために使います。

 

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

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

See the Pen not-br by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

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

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

 

このような弊害が発生する可能性があります。

順番に説明していきますね!

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

<br>を見た目の調整で使ってしまうもののよくあるケースとして、長い文章を記述した時です。

確かに、長い文章を書くときはある程度改行してやらないと見づらいものになってしまいます。

ですが1つのグループである文章で使うべきなのは<p>タグです。

 

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

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

ですが、もしその横幅が今後変わってしまったら?

<br>タグをすべてずらして調整する必要が出てきますよね?

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

 

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

こちらはそのままです。

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

 

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

これで困った方意外と多いと思います。

今回はCSSを使った方法を紹介します。

See the Pen use-whitespace by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

やっていることは簡単ですね。

空白を入れたいところに「margin」で任意のサイズ(px)を指定してやるだけです。

 

まとめ

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

 

今回のまとめ

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

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

 

関連記事

【コピペOK!】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】

FUNAこんにちは、リバティエンジニアのFUNA(フナ)です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ ブロ ...

【CSS】たった1行のコピペで簡単!object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。

【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.