HTML初心者 改行【div】と【&nbsp】と【br】の意味と使い方の違い

HTML初心者 

改行<div> と &nbsp と <br>の意味と使い方の違い

 

 

ワードプレスのビジュアルエディタで文章を書いて投稿すると、改行が思った通りに出来ていないと思う事ありませんか?

 

 

2行空けたつもりが1行しか空いていなかったり、Enterキーで改行したつもりが改行されていなかったりと、思うようにいかないことが私はしばしばありました。

 

 

 

そこで、いくつかの改行方法をまとめました。

 

 

 

 

 

改行方法1:<div>タグを使う

私が使用しているワードプレスのテンプレートでは、Enterキーを押すと、<div></div>がテキストエディタに表示されます。(テンプレートによっては<br>の場合もあるようです。<br>の解説は後程)

 

 

 

div はdivision(区分)の意味です。(divタグについては別のページで解説します)

 

 

 

divタグは、Enterキーを押した数だけ、テキストエディタに縦に表示されますが、投稿記事にはそのまま、反映ません。

 

 

 

実際、私のワードプレスには空き行は出来ず、何も反映されません。

 

 

 

テキストエディタで書いた記事

Enterキーを3回押すとテキストエディタに<div></div>が表示されます。
<div></div>
<div></div>
<div></div>
Enterキーを2回押すとテキストエディタに<div></div>が表示されます。
<div></div>
<div></div>
上のdivは反映されるでしょうか。

⇓⇓⇓

 

 

 

投稿画面またはプレビューにした時の表示

 

このように表示されますので、divは反映されなかったということです。

Enterキーを3回押すとテキストエディタにが表示されます。

Enterキーを2回押すとテキストエディタにが表示されます。

上のdivは反映されるでしょうか。

 

反映されませんでしたね。

 

 

 

改行方法2:&nbsp;を使う

&nbspを使って改行をするとどうなるでしょうか。

 

 

&nbspは英語で、Non-breaking space の略、HTML表記であり、半角スペースを表します。

 

 

 

&nbsp;一つで空き1行をつくるので、&nbsp;が2個で空き行が2行できます。

 

 

 

テキストエディタに&nbsp;が表示されていると、その後はビジュアルエディタでEnterキーを押すと&nbsp;が表示されます。

 

 

 

テキストエディタで書いた記事

&nbspの下にEnterキーを3回押すとをテキストエディタに&nbsp;が3つ表示されます。

&nbsp;

&nbsp;

&nbsp;

Enterキーを2回押すとをテキストエディタに&nbsp;が2つ表示されます。

&nbsp;

&nbsp;

上の&nbsp;は反映されるでしょうか。

 

⇓⇓⇓

 

 

投稿記事またはプレビューにした時の表示

&nbspの下にEnterキーを3回押すとをテキストエディタに が3つ表示されます。

 

 

 

Enterキーを2回押すとをテキストエディタに &nbspが2つ表示されます。

 

 

上の &nbspは反映されるでしょうか。

 

上に3行、下に2行分の空き行が出来ました。

 

 

 

 

改行方法 3:<br>を使う

<br>は単体で使用できます。つまり、</br>の締めは不要、または、</br>単体で使用可能です。

 

 

 

br は英語で break (休み)の意味で、これも改行を表します。

 

 

 

テキストエディタで書いた記事

<br>の下にEnterキーを3回押すとをテキストエディタに が3つ表示されます。

<br>

<br>

<br>

<br>の下にEnterキーを2回押すとをテキストエディタに が2つ表示されます。

<br>

<br>

上のbrは反映されるでしょうか。

 

⇓⇓⇓

 

 

 

投稿画面またはプレビューにした時の表示

brの下にEnterキーを3回押すとをテキストエディタに が3つ表示されます。

 

 

 

brの下にEnterキーを2回押すとをテキストエディタに が2つ表示されます。

 

 

上のbrは反映されるでしょうか。

 

 

 

私のワードプレスでは上3行下2行がばっちり空き行ができました。

 

 

ただし、<br>はワードプレスによっては、投稿時に反映されないこともあるようです。

&nbsp;こちらを使用することをお勧めします。

 

 

改行方法 4:<p style=”margin-bottom: ❓em;”> </p> を使う

CSSを使った改行の仕方も一つだけご紹介します。

 

テキストエディタで書いた記事
<p style=”margin-bottom: 2em;”>この文の下に行間を2行空けたいなら2em</p>
<p style=”margin-bottom: 3em;”>この文の下に行間を3行空けたいなら3em</p>

⇓⇓⇓

 

 

 

投稿画面またはプレビューにした時の表示

この文の下に行間を2行空けたいなら2em

この文の下に行間を3行空けたいなら3em

 

 

 

2行の空き行も3行の空き行もできましたね。

 

 

 

ただし、改行するのに<p style=”margin-bottom: 3em;”>ちいち使うのは手間だと思いますがいかがでしょうか

 

 

 

 

まとめ

様々な改行方法がありますが、&nbsp;が一番手間いらずな改行方法のようです。

 

 

 

因みにレスポンシブ(スマホ)へ改行の影響もないことが確認できました。

 

 

 

補足ですが、一行改行する時には

Siftキー+Enterキー 

で改行するよう癖づけましょう!

 

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です