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

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

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

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

POINT

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

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

brは連続で使わない

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

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

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

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

See the Pen br 間隔をあけるために使う by hashi84 (@hashi84) on CodePen.

POINT

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

//HTML5の書き方
<br>

//XHTMLの書き方
<br />

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

POINT

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

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

POINT

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

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

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

POINT

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