ハシウェブ

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

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

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

「brの正しい使い方がわからない」
「br以外の改行の仕方がわからない」

こんな悩みがある人に向けて書いた記事です。

  • brの使い方
  • brを使わない改行方法、デザイン調整方法

この記事では以上のことがわかります。

目次
  1. brの使い方
    1. brの良い使い方
    2. brの良くない使い方
      1. 連続で使う
      2. 間隔を空けるために使う
  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は連続で使うことはよくない使い方です。
HTMLの根本ですが、「構造とデザインは分離するべき」なので、HTMLでデザインを調整することは推奨されません。
文章内の間隔を大きく空けたい場合は、CSSで調整します。

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

間隔を空けるために使う

連続で使っていなくても、間隔を空けるためだけに使うことは良くない使い方です。
この場合も、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の使い方を解説しました。
レスポンシブコーディングになるとタグの使い方で無理がでてくることが多いので、正しいタグの使い方を知ることは大事だと思います。