-PR-

解決済みの質問

質問No.6992474
困ってます
困ってます
お気に入り投稿に追加する (0人が追加しました)
回答数3
閲覧数7254
HTMLで1行空白をあける方法
忙しい中、閲覧有り難うございます。

早速質問ですが、タイトル通り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">
投稿日時 - 2011-09-06 01:37:28

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

回答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タグで区切らなければならない事情が、ブログを拝見しておらずわからないので、
見当違いな回答でしたらすみません。。。
投稿日時 - 2011-09-06 21:46:08
この回答を支持する
(現在0人が支持しています)
補足
>複数のpタグで区切らなければならない事情
とのことですが、以下のようにしたいと考えています。

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

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

これらはCでもある。


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

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

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

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

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

何度も回答を頂いているのに申し訳ないです。色んな提案、感謝します。
投稿日時 - 2011-09-07 00:37:50

ベストアンサー以外の回答 (2)

回答No.1
通常、CSSで見栄えの体裁を定義します。
p {
margin: 1em 0;
}
投稿日時 - 2011-09-06 04:14:32
この回答を支持する
(現在1人が支持しています)
お礼
ご回答有り難うございます。

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

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

もう少し考えてみます。有り難うございました。
投稿日時 - 2011-09-06 11:45:52
回答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;
}
投稿日時 - 2011-09-06 18:50:03
この回答を支持する
(現在0人が支持しています)
補足
そうですね、少し言い方が曖昧だったかもしれません。申し訳ないです。

記事内の<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人が「このQ&Aが役に立った」と投票しています
もっと聞いてみる

関連するQ&A

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

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

回答募集中

同じカテゴリの人気Q&Aランキング

カテゴリ
ブログ
-PR-
-PR-

特集

背筋がゾクゾクする心霊体験を要チェック!

お城、ボート、ツリーハウス、ユニークな物件満載!

【期間限定】1ヶ月無料キャンペーン中!

このQ&Aの関連キーワード

同じカテゴリの人気Q&Aランキング

カテゴリ
ブログ
-PR-

回答のついた最新のQ&A

ピックアップ

-PR-