概要
HTMLの改行に関する文字やタグの記載方法と、その適用例をサクッと一覧化しました。文章の整形やレイアウト調整に役立ちます。
HTMLの改行とは
HTMLでは、通常のテキストエディタのように「Enterキー」で改行しても、ブラウザ上では反映されません。
そのため、適切なタグや特殊文字を使って改行を表現する必要があります。
HTML改行の記載方法と参考
HTMLで改行を行う際に使われるタグや特殊文字の記載方法と、適用後の参考をまとめました。
| 方法 | 記載方法 | 記載後の参考 |
<br> |
文章1<br>文章2 |
文章1 文章2 |
<p> |
<p>文章1</p><p>文章2</p> |
文章1 文章2 |
<pre> |
<pre>文章1\n文章2</pre> |
文章1 文章2 |
| スペース | 文章1 文章2 |
文章1 文章2 |
<div> |
<div>文章1</div><div>文章2</div> |
文章1
文章2
|
<hr> |
文章1<hr>文章2 |
文章1
文章2 |
| CSSによる改行 | style="white-space: pre-line;" |
文章1
文章2 |
| リストの改行 | <ul><li>項目1</li><li>項目2</li></ul> |
|
| JavaScriptで改行 | text.replace("\\n", "<br>") |
スクリプトで自動適用 |
参考リンク
ありがとうございます
コメント