読者です 読者をやめる 読者になる 読者になる

HHS

変デジはてな支所

はてなブログの見たまま編集で「段落分け<p>タグ」と「改行<br />」を使い分ける方法。

はてなブログ

<p>タグと<br />を使い分けよう

はてなブログの見たまま編集は簡単に記事が書けて本当に便利だと思います。この「見たまま編集」でテキストを入力する場合、Enterキーを押すと段落が分けられます。たとえば1つの文章を改行して表示したい時などにEnterキーを使っていませんか?

f:id:lonestartx:20150116090251j:plain

たとえばこの文章を・・・

「あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。」

改行してこんな感じにしたい時

「あのイーハトーヴォのすきとおった風、
夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。」

何度もEnterキーを押して改行っぽく見せている方も多いのでは?

[Enter]キーを押した場合

f:id:lonestartx:20150116090920j:plain

少し広めに改行されたように見えます。この状態で「HTML編集」に切り替えてみましょう。

f:id:lonestartx:20150116091114j:plain

<p>というタグで囲まれた2行の文章になっています。

[Shift]キーを押しながら[Enter]キーを押した場合

f:id:lonestartx:20150116091203j:plain

[Shift]キーを押しながら[Enter]キーを押してみましょう。先ほどと同じ様な雰囲気になりますが少し行間が狭くなっています。同じく「HTML編集」に切り替えてみましょう。

f:id:lonestartx:20150116091300j:plain

<p>というタグで囲まれた1つの文章の中に<br/>というタグが表示されています。

Enterキーだけで改行すると文章が切れてしまいます

[Enter]キーを押した場合でも、[Shift]キーを押しながら[Enter]キーを押した場合でも、同じ様な見た目で記事が作成されますが、HTMLを確認すると全く別の意味になってしまいます。

  • <p>タグは段落を分ける
  • <br />タグは改行する

[Enter]キーだけを使っていると1つの文章が細切れになってしまいます。先ほどの文章だと「あのイーハトーヴォのすきとおった風、」が1つの段落、残りの文章が1つの段落だという意味になってしまいます。

[Shift]キーを押しながら[Enter]キーを押せば、1つの文章を改行している事になるので、HTMLをチェックすると自然な文章になっています。

[Enter]キーを改行目的で使っている方は一度このやり方を試してみてはいかがでしょう?HTML編集でチェックすると綺麗な見た目になっていると思いますよ。それでは!また!

スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほん