ホームページ制作で複数行の空白行を入れるには

質問

（ホームページ制作の勉強中です。）

文章のと文章の間に複数行の空白行を入れには、<br>タグを
数回入力すれば可能ですが、他にに何か良い方法があるのでしょうか？
（<br>タグは、むやみに使わないほうがよいと聞きますので・・・）

回答No.2

think49 · ベストアンサー

> (<br>タグは、むやみに使わないほうがよいと聞きますので・・・)
確かに論理構造を考えるとbrじゃなくてpを使った方がいいということはあります。

考え方としては、「コンテンツの論理構造を考えてから見た目を整える」という順序に気をつけるということでしょうか。
(意外と逆に考えがちなんですよね…。)

** 段落で区切る

<p>....文章...</p>
<p>....文章...</p>
<p>....文章...</p>

** CSSで見た目を整える

p{
margin: 1em 0px;
}

** 章の節目を空行2つ分にしてみる

.chapter{
margin-top: 2em;
}
p{
margin:
}

<p class='chapter'>....文章...</p>
<p>....文章...</p>
<p>....文章...</p>
<p class='chapter'>....文章...</p>
<p>....文章...</p>

章立てはdivで区切ってもいいですし、その辺はお好みです。

第一章の部分で margin-top: 2em を適用させたくなかったら、:first-child を使ってみてください。
IE6が対応していませんが、「大した問題じゃないと割り切る」か「.first-child のclassで代替する」か「http://trac.openpne.jp/ticket/2553 を使ってみる」か…。
クロスブラウザに関しては手間と効率と目的のバランスを考えて、決めるといいと思います。

お礼

大変勉強になりました。
ありがとうございました。

回答No.4

xs200

<p>は改行ではありません。
<br>の連発もお勧めできません。
やはりスタイルシートでやるべきでしょう。
例:marginは出たのでline-heightで

行間広すぎ<div style="line-height:800%">っていう</div>感じかな。

お礼

このような方法もあるのですね。
勉強になりました。
ありがとうございます。

回答No.3

Safe_Mode

空白行を入れる理由は何なのでしょう？
単純にレイアウト的な都合だったら前後の<p>タグのmargin設定などで
行なうのがいいでしょう。

お礼

はい、レイアウトが目的です。

marginを使って見ました。上手くいきました。
ありがとうございます。

回答No.1

mizutaki

スタイルシートでmarginの値をいじってあげれば空白などを作れますが、
brで十分だと思いますよ。
後はpやdivを使ったりする場合もあるでしょうが、
文書の中に空白を入れたりするのであれば、むしろbrかpで十分。
それ以外の方法で空白を入れたりすると、後々の編集で少し手間が発生する可能性もありです。

お礼

なるほど！　後々の編集で、手間が発生する可能性が出てくるかもしれませんね。
ありがとうございました。