HTML要素 ・ 見出し・文章
<br>
改行
文章の途中で行を改める要素です。住所や詩など、改行そのものに意味がある場面で使います。
01
サンプルコード
HTML
1<p>〒100-0001<br>
2東京都千代田区千代田1-1<br>
3カフェ・ミモザ</p>
02
実行結果
ブラウザでの表示
03
解説
HTMLでは、ソースコード上で改行しても画面では改行されません。行を改めたい位置に br を書くと、そこで改行されます。
br は終了タグのない空要素です。<br> と書くだけで使えます。
段落を分けたいときは br を2つ並べるのではなく、新しい p を使います。
04
応用例・注意点
改行の方法の使い分け
| 方法 | 説明 |
|---|---|
<br> | 1つの段落の中で行を改める |
<p> | 段落を分ける |
margin | 要素の間に余白をつくる |
white-space: pre-line | ソースの改行をそのまま表示する |
ソースの改行をそのまま表示する
CSSの white-space を使うと、br を書かずにソースの改行を反映できます。
HTML
1<p class="poem">春はあけぼの
2やうやう白くなりゆく山ぎは</p>
CSS
1.poem {
2 white-space: pre-line;
3}
注意点
- 01余白をつくるために br を連続で使わないでください。余白は margin で調整します。
- 02画面幅によって改行位置を変えたい場合は、br ではなくCSSで調整するほうが安全です。