<br />について

<br />の数個分の行を空けたい際に、
<br /><br /><br />
みたいに何個も続けて記載した場合、「Another HTML」で文法チェックを行なった際に、エラーとなってしまいます。
<br />を数個続けて使用して行を空けたい場合、
CSSなどで簡単に出来るのでしょうか。
2箇分空けたり、3個分空けたりと色々なパターンがあります。

基本的な質問で申し訳ありませんがご教授お願いします。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2009/07/01 19:19

HTML(XHTML)は、文書を構成する要素をマークアップする方法です。

<br /><br>は、強制改行のマークアップですから、意味的に連続することはありません。
<p></p>は国語的に段落を示すタグであって、行間を空けるためではありません。
HTMLはXHTMLで書かれているようですが、XMLの仕様に合わせてHTMLを書き直したものですから、下記資料は一通り目を通しておき、いつでも参照できるようにbookmarkにでも登録しておきましょう。
HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

>2箇分空けたり、3個分空けたりと色々なパターンがあります。
の文章から推測されるマークアップは、その段落全体を<pre></pre>(整形済み文書)だろうと推測されます。
　整形済み文章は
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
PRE要素は、視覚系ユーザエージェントに対し、囲われているテキストが"整形済"であることを示す。 整形済テキストを取り扱う際、視覚系ユーザエージェントは次の制約を受ける。
・空白類をそのままにしてよい。
・テキストを固定ピッチフォントでレンダリングしてよい。
・自動的な語の折り返しを不可能にしてよい。
・双方向性の処理を不可能にしてはならない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　多くのブラウザは固定ピッチのフォントで描画されます。この要素内の文章は整形済みであるという意味から、
<!ENTITY % pre.exclusion "IMG|OBJECT|BIG|SMALL|SUB|SUP">
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
上に示したDTD片は、PRE宣言中に出現できない要素が何であるかを示している。 この内容はHTML 3.2と等しく、また一定の行の高さと固定ピッチのフォントでレンダリングされたテキストの配置を保つことが意図されている。 著者が、この挙動をスタイルシートによって変更することは、好ましくない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　すなわち、IMG|OBJECT|BIG|SMALL|SUB|SUPは含むことができません。

　あなたの<br />を複数連続させたい目的が定かでありませんが、もし<pre>要素ではまずい場合は、style="margin-top:3em;" などで指定しなければならないかもしれません。

　長々と書きましたが、重要なことは
HTMLは、文章をどのように表示するかを指定するものではない!!ということだけは、しっかり理解しておいてください。【基本です。】

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

No.5 回答者： exists 回答日時： 2009/07/11 08:49

こんにちは、

確かに、<br>を見た目の調整に使うなという注意を受けますよね
<br>をスタイル指定することで回避できます

例えば、<br style="line-height:2em;">等と書くことが出来ます。

<style type="text/css">
.distance2{line-height:2em;}
.distance3{line-height:3em;}
</style>

<br class="distance2">
等としておけば、クラス名を指定することで、あらかじめ設定しておいた見た目を確保できます。

No.4 回答者： think49 回答日時： 2009/07/01 21:42

> <br /><br /><br />

> みたいに何個も続けて記載した場合、「Another HTML」で文法チェックを行なった際に、エラーとなってしまいます。
以前、同じような質問に回答しました。
下記URLのNo.2に私が回答がありますので、参考にしてみてください。

PLANEX@OKWave ホームページ制作で複数行の空白行を入れるには
http://internet.okwave.jp/qa5021697.html?ans_cou …

上にも書きましたが、重要なのは「コンテンツの論理構造を考えてから見た目を整える」という順序に気をつけることだと思います。
「HTMLでレイアウトを考えず、あとでCSSで整えよう」という意識があると、より良いHTMLを書けます。

その辺りは神崎正英さんのサイトが詳しいので、こちらも参考にしてみて下さい。

文書の骨格となる基本要素 -- ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/html/htminfo11.html#S4

No.3 回答者： kuzumiHK 回答日時： 2009/07/01 21:10

<br>の連続は文法的にアウトなので、

テキストがひと段落したら、pタグをいったん閉じて、
スタイルシートで余白を設定しましょうということですね。
それができないとなるとリントチェックを使うのは、
まだ早いということかもしれません。。

<p>ああああああ<br><br>いいいいいい</p>
↓
<p>ああああああ</p>
<p>いいいいいい</p>

p{
margin-bottom:1em;
}

ちなみに隣り合うタグの種類によって、
余白の広さを分ける方法（隣接兄弟セレクタ）はあるのですが、
ブラウザごとに実装状況が異なるので実用的ではありません。
今のところはクラスで調整するのが無難なようです。

<p>ああああああ</p>
<p class="last">いいいいいい</p>

p.last{
margin-bottom:2em;
}

No.1 回答者： askaaska 回答日時： 2009/07/01 17:45

http://okwave.jp/qa502704.html?rel=innerHtml&p=b …
の#4さんの回答が適切だわ。

改行を複数入れると言うことは
段落を分けると言うことだと思うわ。
だから<p>を使うのが一般的ね。