段落分け<p>タグと改行<br />の違い

ブログの編集画面で改行する際は、エンターキーを押すと自動的に改行タグの<br />がhtml上に挿入される仕組みになっています。

この<br />のタグをhtmlにひとつ記入するとその箇所で改行が反映されます。
そして、さらに連続してもうひとつを記入して<br /><br />とすると、一行分の空白が空くことになります。同じように、3つなら2行分の空白になります。

このように、ブログなどの編集画面で行間を空ける場合は、ただ単純にエンターキーを押して改行を連続することで対応することができます。

けれども、ホームページでhtmlタグを手打ちして作成する際は、自分でこの<br />タグを直接記入していく必要があります。htmlファイル上でいくら改行しても、ブログのように自動的には<br />のhtmlタグが挿入されず、実際のサイトにも改行が反映されませんので、htmlタグを記述するようにしましょう。

また、この行間を一行空ける際には、これ以外にも段落わけのPタグ<p>を使用して一行分の空白を作る方法があります。

BRタグは単体で機能しますが、段落わけのPタグは開始タグ<p>と終了タグ</p>の両方をセットにして段落のはじめと終わりに記入します。

例えば、このようにhtmlに記入すると次のように表示されます。


【段落分けのタグを使った例:】

段落分けはPタグを使いましょう。
改行する場合はBRタグを使いましょう。


これは次のように改行タグのBRを連続して使っても、同じように1行の空白が空きます。


表示のされ方は同じですが、基本的に、brタグは「改行」、pタグは「段落分け」をする際に使います。段落は複数の文が集まって文章のまとまりになりますので、1文ごとに段落わけのPタグばかりを使うのは避け、適度な文章のまとまりごとに段落わけするようにしましょう。

このbrタグの書き方は、DTDの古い形式(HTML 4.01など)や新しい形式(xhtmlなど)によって違いがあります。古いHTML 4.01では<br>と書くのに対し、xhtmlでは<br />と記述するのが一般的ですが、どちらで記入しても、たいていのブラウザではきちんと反映されます。


ちなみに、無料ブログサービスで記事を作成する場合は、デフォルトの状態でエンターを押すたびに自動的に<br />がhtml上に挿入される仕様になっています。
ですので、無料ブログでhtmlタグを使いながら使いながら文章を作成する場合は、自動改行設定を無効にしてから記入しないとうまく表示されません。

例えば、シーサーブログの場合は、自動改行設定を無効にするとhtmlタグの記入が有効になります。

FC2無料ホームページの場合も、ソースのボタンを押すとhtmlタグの記入が有効になります。

また、行と行の間の幅については、スタイルシートでline-height(行の高さ)の値を指定することで調整することができます。

【例:】
.sample {line-height:150%;}

加えて、段落と段落の間の幅は、上下にmarginの値を指定しておくとよいでしょう。

【例:】
p {margin:1em 0 1em 0;}

戻る:テンプレートのカスタマイズ方法

次へ:リンクのhtmlタグ a href