連続した空白と改行は1つに潰される

エディタでエンターキーを押しても、画面上は改行されません。ブラウザは連続した空白や改行をまとめて1つの空白として扱うからです。

はじめまして。
はじめまして。書いたときは2行
山田 太郎です。

画面に出るもの

行出るか
はじめまして。 山田 太郎です。1行につながって出る
書いたときの改行空白1つに潰される

改行が消えたのではなく、空白1つとして扱われています。

だから「ここからここまでが1つの段落」であることを、タグで伝えてあげる必要があります。

1 / 4

p と br の使い分け

文章のかたまりは p で包みます。同じ段落の中で行だけ変えたいときに br を使います。br は文字をはさまないので終了タグがありません。

<p>
<p>ここから1つの段落
1 行目です。<br>
<br>同じ段落の中で行を変える
2 行目です。
</p>

p は話題ごとの文章を段落として伝えるタグです。ブラウザの既定余白は見た目上の結果で、p を選ぶ理由そのものではありません。

2 / 4

考えてみよう外しても進めます

宛先の住所を3行に折り返して書きたいとき、使うのはどちらですか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

ここでつまずく

p と br はどちらも画面上で行が分かれますが、話題を分けるか、同じ話の中で行だけ変えるかで選びます。

書いたことどうなるか

br を並べて余白を作る

余白の量が中身に縛られ、あとから CSS で直せない

話題が変わるのに br でつなぐ

見た目は分かれるが、1つの段落として扱われる

br に終了タグを書く

br は文字をはさまないため終了タグは要らない

余白を広げたいだけなら CSS の仕事です。br は行を変えたいときだけに使います。

4 / 4