ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【HTML】改行(br)の正しい使い方 【コーディング】

【HTML】改行(br)の正しい使い方 【コーディング】

「brの正しい使い方がわからない」

「brを使わずに改行する(縦に並べる)にはどうしたらいいの?」

悩み

こんな悩みにお答えします。

brは以下の点を気をつけて使います。

  • 基本的には文章を改行させるために使う
  • 連続で使わない
  • 行間隔をあけるために使わない

この記事では以下のことを解説しています。

  • brの使い方
  • brを使わない改行方法、デザイン調整方法
目次
  1. brの使い方
    1. brの良い使い方
    2. brの使い方で注意する点
      1. brは連続で使わない
      2. brは間隔をあけるために使わない
  2. CSSで間隔をあける方法
    1. 行間をあける
    2. 段落をあける
    3. 効率的に文章で間隔をあける方法
  3. まとめ

brの使い方

brの良い使い方

hタグ、pタグ、spanタグ、aタグ等、見出しや文章の中で使うのが良い使い方です。

「読点(、)」や単語のキリがいいところで改行させる人がいますが、これはあまりおすすめしません。
レスポンシブコーディングだと、パソコン画面でキリがいい改行になっていても、スマホ画面では不自然な改行になっていることが多いです。

改行は「句点(。)」で使うようにすると、レスポンシブコーディングでも違和感がなく表示させられます。

POINT

改行は「句点(。)」でする。
「句点(。)」以外の、「読点(、)」や単語のキリがいいところでは改行しないようにする。

See the Pen br 良い使い方 by hashi84 (@hashi84) on CodePen.

とはいえ、デザインをもらってコーディングだけをするコーダーの場合、これをデザイン会社、デザイナーに伝えるのが難しいこともあります。
パソコンのデザインだけをもらう場合は、スマホでbrを非表示にしていくことで、パソコンは指示どおり、スマホは違和感なく表示させることができます。

brの使い方で注意する点

brは連続で使わない

brは連続で使うことはよくない使い方です。
HTMLの根本ですが、「構造とデザインは分離するべき」なので、HTMLでデザインを調整することは推奨されません。
文章内の間隔を大きくあけたい場合は、CSSで調整します。

See the Pen br 連続で使う by hashi84 (@hashi84) on CodePen.

brは間隔をあけるために使わない

連続で使っていなくても、間隔をあけるためだけに使うことは良くない使い方です。
この場合も、CSSで調整します。

POINT

<br />という書き方をしていることがありますが、これはXHTMLの書き方で最近のサイトでは特別な理由がない限り使うことがない書き方です。
HTML5では<br>を使うようにしましょう。

//HTML5の書き方
<br>

//XHTMLの書き方
<br />

CSSで間隔をあける方法

行間をあける

行間をあけるには、CSSで「line-height」を使います。
行の間隔を大きくあけたい人で毎回、改行を2回入れる人がいますが、こういった人は「line-height」の値を大きくすると毎回2回改行しなくてもよくなりますし、これが正しい構文になります。

POINT

文章内でのline-heightの値は1.5~2が一般的です。

See the Pen br 行間をあける by hashi84 (@hashi84) on CodePen.

ただ、CSSのline-heightは行間に隙間ができるのではなく、テキストの上下に隙間ができるようになっています。
大きな間隔が必要な場合は、文章のはじめとおわりの位置が「Photoshop」や「illustrator」と同じようにできなくなる可能性があるので注意が必要です。

POINT

行間のとり方は、「CSSのline-height」と「Photoshop」「illustrator」で違うので注意が必要です。

段落をあける

段落をあけるには、CSSで「margin-bottom」を使います。

See the Pen br 段落をあける by hashi84 (@hashi84) on CodePen.

効率的に文章で間隔をあける方法

一般的なWebサイトやブログ等では、以下のようにしています。

POINT

行間は1.75程度。
段落の間隔(margin-bottom)を1文字分。
margin-bottomは最後には入れない。

See the Pen br 効率的 by hashi84 (@hashi84) on CodePen.

まとめ

brタグの使い方を解説しました。

  • 基本的には文章を改行させるために使う
  • 連続で使わない
  • 行間隔をあけるために使わない

brタグは多用せず、CSSを使って行間隔を調整します。

レスポンシブコーディングになるとタグの使い方で無理がでてくることが多いので、正しいタグの使い方を知ることは大事です。