総ありがとう数 累計4,290万(2014年11月1日現在)

毎月4,000万人が利用!Q&Aでみんなで助け合い!

-PR-
masakaze

忙しい中、閲覧有り難うございます。

早速質問ですが、タイトル通りHTMLで1行空白をあける方法についてです。

HTMLでブログ記事を書くとき、その見やすさを考えて<p>~</p>と次の<p>~</p>の間に一行分の空白を開けたい場合があります。

今までは以下のように<br />と付けてましたが、文法的に何かまずいような気がしたので他の方法を考えています。しかし、中々よい方法が見つからなかったため、質問させて頂きました。

<p>~</p>
<br />
<p>~</p>

考えたのが以下のようにスペースを空けた<p></p>を使う方法ですが、これで問題ないのか少し心配なところがあります。

<p>~</p>
<p> </p>
<p>~</p>

文法的に特に問題なければこの方法でこれからいこうかと思ってますが、他にもっとよい方法をご存じの方はご教授くださると幸いです。

因みにDOCTYPE宣言は以下のようにしています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • 回答数3
  • 気になる数0

Aみんなの回答(全3件)

質問者が選んだベストアンサー

  • 2011-09-06 21:46:08
  • 回答No.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タグで区切らなければならない事情が、ブログを拝見しておらずわからないので、
見当違いな回答でしたらすみません。。。
補足コメント
>複数のpタグで区切らなければならない事情
とのことですが、以下のようにしたいと考えています。

===================

ここにAというものがある。
ここにBというものがある。

これらはCでもある。


しかし、これらはDではないかという考えもある。

===================

と、読みやすさを考えてpタグによる空白とプラスもう1行の空白が欲しいときがあります。要は全部で2行分欲しいときがあります(このように言えばよかったですね、混乱させて申し訳ありません)。

いくつかサイトを回るとbr要素を使う方法以外に<p> </p>で空白を作っているサイトを見かけたのでそれをやろうと思ったのですが、やはり問題ありそうなのでCSSにて指定することにしました。現在、これで再構築中です。

まだ手直しが効く範囲ですので、もう少し回答を待ってみます。もちろん、こちらでももう少し調べてみます。
投稿日時 - 2011-09-07 00:37:36
お礼コメント
再度のご回答、本当に有り難うございます。

何度も回答を頂いているのに申し訳ないです。色んな提案、感謝します。
投稿日時 - 2011-09-07 00:37:50
  • 同意数0(0-0)
  • ありがとう数0

その他の回答 (全2件)

  • 2011-09-06 18:50:03
  • 回答No.2
文法のチェックは
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;
}

今のところこれで何とかなっているのでこの方法で再構築中です。ですが、まだ他によい方法をご存じの方はご教授くださると幸いです。
投稿日時 - 2011-09-06 20:26:08
お礼コメント
ご回答有り難うございます。

お忙しい中、ご回答有り難うございました。助かります。
投稿日時 - 2011-09-06 20:26:11
通報する
  • 同意数0(0-0)
  • ありがとう数0
  • 2011-09-06 04:14:32
  • 回答No.1
通常、CSSで見栄えの体裁を定義します。
p {
margin: 1em 0;
}
お礼コメント
ご回答有り難うございます。

それも一応考えたのですが、空白を作るためにいちいちpタグにclass属性つけるのも格好悪いかなと思い、踏みとどまっています。

文法に忠実であるというならば仰るとおりCSSで指定するのがいいのですが・・・

もう少し考えてみます。有り難うございました。
投稿日時 - 2011-09-06 11:45:52
通報する
  • 同意数0(0-0)
  • ありがとう数0
  • 回答数3
  • 気になる数0
  • ありがとう数0
  • ありがとう
  • なるほど、役に立ったなど
    感じた思いを「ありがとう」で
    伝えてください

関連するQ&A

その他の関連するQ&Aをキーワードで探す

別のキーワードで再検索する

あなたの悩みをみんなに解決してもらいましょう

  • 質問する
  • 知りたいこと、悩んでいることを
    投稿してみましょう
-PR-
-PR-
-PR-

特集

専門医・味村先生からのアドバイスは必見です!

関連するQ&A

-PR-

ピックアップ

  • easy daisy部屋探し・家選びのヒントがいっぱい!

-PR-
ページ先頭へ