- ベストアンサー
HTMLで1行空白をあける方法
- HTMLでブログ記事を書くとき、<p>～</p>と次の<p>～</p>の間に一行分の空白を開けたい場合があります。
- 質問者は、<br />を使用して空白を開けていましたが、他の方法を考えたいと思っています。
- 質問者が検討しているのは、スペースを空けた<p></p>を使用する方法ですが、文法的な問題がないか心配しています。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
再びNo.2です。 <p>文章1</p> <p>文章2</p> ～1行分の余白～ <p>文章3</p> <p>文章4</p> このようにしたいとなると、確かに特定のpタグにその都度classを付けることになりますね。。。 文章1と2の間、3と4の間には余白はいらないということであれば、これらのそれぞれを段落として区切らず <p>文章1<br />文章2</p> <p>文章3<br />文章4</p> として先ほどのようにpタグにCSS設定をすれば、見栄え的には それぞれの文章ごとに改行され、かつ文章2と3の間にのみ（厳密には文章4の下にもですが）余白ができることになりますが、これだと問題ありますでしょうか…？ <p>～</p> <p>～</p> と複数のpタグで区切らなければならない事情が、ブログを拝見しておらずわからないので、 見当違いな回答でしたらすみません。。。
その他の回答 (2)
- adb1990
- ベストアンサー率63% (263/412)
文法のチェックは http://openlab.ring.gr.jp/k16/htmllint/htmllint.html こちらですると良いと思います。 <p> </p>のように空白のみ入れるのは、 問題とまではいかなくても、あまり好ましくはないようです。 むしろ <p>～</p> <br /> <p>～</p> の方が文法チェックでは引っかからないようですね。 ただ、やはりNo.1の方がおっしゃる通りCSSで設定するのが、格好という面で考えても一番スマート（というか一般的）だと思います。 質問者様のブログがどのような構成になっているのかわからないので何とも言えませんが、 いちいちpタグにclass属性を付ける必要はないのではと思いますが… ブログ記事を載せる領域のみ段落ごとに空白を空けたいのであれば、 その領域を<div>（←ここにclassかidを付ける）で囲み、その中の<p>にだけ適用されるようにCSSを設定すれば良いと思います。 例） （ブログの領域全体を<div id="blog">～</div>で囲み） div#blog p{ margin-bottom: 1em; }
お礼
ご回答有り難うございます。 お忙しい中、ご回答有り難うございました。助かります。
補足
そうですね、少し言い方が曖昧だったかもしれません。申し訳ないです。 記事内の<p>タグ全部に余白を持たせるのではなく、ある一部の場所にのみ1行分の余白を付けたいと考えています。 今までは以下のようにしていましたが、br要素は改行タグなのでこの使い方ではまずいかな～と思い、ブログ全体を現在再構築している最中です。 <p>～</p> <p>～</p> <br /> <p>～</p> <p>～</p> ですが、皆様の仰るとおりCSSで指定した方が良さそうなので以下のように現在変更中です。 <p>～</p> <p class="space">～</p> <p>～</p> <p>～</p> ～CSS内～ .space { padding-bottom: 20px; } 今のところこれで何とかなっているのでこの方法で再構築中です。ですが、まだ他によい方法をご存じの方はご教授くださると幸いです。
- kosukejlampnet
- ベストアンサー率44% (126/282)
通常、CSSで見栄えの体裁を定義します。 p { margin: 1em 0; }
お礼
ご回答有り難うございます。 それも一応考えたのですが、空白を作るためにいちいちpタグにclass属性つけるのも格好悪いかなと思い、踏みとどまっています。 文法に忠実であるというならば仰るとおりCSSで指定するのがいいのですが・・・ もう少し考えてみます。有り難うございました。
お礼
再度のご回答、本当に有り難うございます。 何度も回答を頂いているのに申し訳ないです。色んな提案、感謝します。
補足
＞複数のpタグで区切らなければならない事情 とのことですが、以下のようにしたいと考えています。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ここにAというものがある。 ここにBというものがある。 これらはCでもある。 しかし、これらはDではないかという考えもある。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ と、読みやすさを考えてpタグによる空白とプラスもう1行の空白が欲しいときがあります。要は全部で2行分欲しいときがあります（このように言えばよかったですね、混乱させて申し訳ありません）。 いくつかサイトを回るとbr要素を使う方法以外に<p> </p>で空白を作っているサイトを見かけたのでそれをやろうと思ったのですが、やはり問題ありそうなのでCSSにて指定することにしました。現在、これで再構築中です。 まだ手直しが効く範囲ですので、もう少し回答を待ってみます。もちろん、こちらでももう少し調べてみます。