<br>に代わる方法はありますか？

質問

例えば
「あああああ

　あああああ」
上記のようにブラウザで表示したい時に、HTMLを
「<p>あああああ</p>
<BR>
<BR>
<BR>
　<p>あああああ</p>」
このような感じで書いていたのですが
<br>を連続で書くことは、あまり好ましくないと知りました。

<br>を連続で書く以外に、複数行分の空白スペースを作る方法を考えて

（上の例の場合で）
１．cssを使って、<p>のpaddingのtopかbottomに余白を作る。
２．cssを使って、<p>のheightを大きめに指定して余白を作る。
３．cssを使って、marginで位置を調整する。
４．<br>にしていた箇所を<p></p>に変える。

この４ツを思いついたのですが、
この４ツの中なら、どれが好ましいのでしょうか。
またこの４ツ以外で、推奨方法があれば教えて下さい。
よろしくお願いします。

回答No.2

elcude · ベストアンサー

■　回答　■
＞どれが好ましいのでしょうか。
4つの中で一番好ましいのは１ですね。フォントサイズを変更したときなどに対応でるためです。
＞推奨方法があれば教えて下さい。
pタグのみで１番の方法を使用し問題がなければそちらを利用すると良いと思います。pタグのみではスタイルをつけたいときにタグが不足する場合は、divタグでセクションごとに囲うということが考えられます。
■html
<div class="section">
<p>あああああ</p>
</div>
<div class="section">
<p>あああああ</p>
</div>

しかし、上記のように統一した余白を利用する場合は問題はありませんが、各pタグごとに余白を変えるならば、pタグに直接style="padding-bottom:XXpx"などを付け加えたり、もしくはclassをいくつも作って適所にあわせて記述すると良いと思います。いずれの方法にせよ、タグは簡潔かつ、意味合いのある記述が重要であることが大切です。

お礼

ご回答ありがとうございます。
marginやheightよりpaddingの方が良いのですね、なるほど…
やはりフォントサイズの事を考えたら、<p>にheightの設定はまずいんですね。。
簡潔であるか、適切であるか。
よく考えて、タグを書いていこうと思います。

回答No.4

noro6857

<PRE>タグはだめですか？

お礼

ご回答ありがとうございます。
<pre>自体を知らなかったので調べてみたのですが、<p>等を使って書く方法と具体的にどのような違いがあるかは、明確に掴めませんでした。。
<pre>が用意されてありつつも、あまり見かけない事にはきっと理由があるんでしょうけど…
もう少し調べてから、活かしていこうと思います。
よい勉強になりました！

回答No.3

noname#56851

<p style="margin-top:3em;">
あいうえお
</p>
うちではこの様にしています。
これの味噌はmarginの大きさを相対的なemで指定している所です。
ブラウザで文字の大きさを変えてもちゃんとスペースが確保できるのです。

お礼

ご回答ありがとうございます。
相対的な余白があった方がいい場合は、emやexを使う方がやはりいいのですね。
縦方向の余白は、相対的にしたいのでそうしてみようと思います。

回答No.1

borazu

SEO対策とかは、あまり分からないので参考程度でお願いします。

<br>を連続でかくことが、あまり好ましくないかどうかは良く分かりませんが、<br>自体にstyleを適用したらどんなですか？あまり自信はありません。<br>を使いたくないんであれば、３．cssを使って、marginで位置を調整する方が楽だと思います。ただ、ブラウザによっては若干表示が崩れるかもしれません。

<br>にスタイルを適用した例

<p>テストテストテスト</p>
<br style="height: 30px;" />
<p>テストテストテスト</p>

お礼

ご回答ありがとうございます。
うちにはブラウザを２ツしか入れていないので、検証とは程遠いのですが、<br>にスタイル適用を試してみました。
両方のブラウザにおいて、heightを指定しても上手く表示されませんでした。
<br>のmarginを指定したらどうなるのだろうと試してみたのですが、IE6では上手く表示出来ませんでした。
paddingも両方のブラウザで上手く表示できませんでした。
何故なんでしょう…物理要素だからというのが関係してくるのでしょうか。。
この辺りは、頑張って調べてみようと思います！