HTMLで1行空白をあける方法

このQ&Aのポイント
  • HTMLでブログ記事を書くとき、<p>~</p>と次の<p>~</p>の間に一行分の空白を開けたい場合があります。
  • 質問者は、<br />を使用して空白を開けていましたが、他の方法を考えたいと思っています。
  • 質問者が検討しているのは、スペースを空けた<p></p>を使用する方法ですが、文法的な問題がないか心配しています。
回答を見る
  • ベストアンサー

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">

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

  • ベストアンサー
  • adb1990
  • ベストアンサー率63% (263/412)
回答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タグで区切らなければならない事情が、ブログを拝見しておらずわからないので、 見当違いな回答でしたらすみません。。。

masakaze
質問者

お礼

再度のご回答、本当に有り難うございます。 何度も回答を頂いているのに申し訳ないです。色んな提案、感謝します。

masakaze
質問者

補足

>複数のpタグで区切らなければならない事情 とのことですが、以下のようにしたいと考えています。 =================== ここにAというものがある。 ここにBというものがある。 これらはCでもある。 しかし、これらはDではないかという考えもある。 =================== と、読みやすさを考えてpタグによる空白とプラスもう1行の空白が欲しいときがあります。要は全部で2行分欲しいときがあります(このように言えばよかったですね、混乱させて申し訳ありません)。 いくつかサイトを回るとbr要素を使う方法以外に<p> </p>で空白を作っているサイトを見かけたのでそれをやろうと思ったのですが、やはり問題ありそうなのでCSSにて指定することにしました。現在、これで再構築中です。 まだ手直しが効く範囲ですので、もう少し回答を待ってみます。もちろん、こちらでももう少し調べてみます。

その他の回答 (2)

  • adb1990
  • ベストアンサー率63% (263/412)
回答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; }

masakaze
質問者

お礼

ご回答有り難うございます。 お忙しい中、ご回答有り難うございました。助かります。

masakaze
質問者

補足

そうですね、少し言い方が曖昧だったかもしれません。申し訳ないです。 記事内の<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; } 今のところこれで何とかなっているのでこの方法で再構築中です。ですが、まだ他によい方法をご存じの方はご教授くださると幸いです。

回答No.1

通常、CSSで見栄えの体裁を定義します。 p { margin: 1em 0; }

masakaze
質問者

お礼

ご回答有り難うございます。 それも一応考えたのですが、空白を作るためにいちいちpタグにclass属性つけるのも格好悪いかなと思い、踏みとどまっています。 文法に忠実であるというならば仰るとおりCSSで指定するのがいいのですが・・・ もう少し考えてみます。有り難うございました。

関連するQ&A

  • XHTML 1.0 Transitional でインラインフレームの表示方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> でインラインフレームを表示する方法はありますか? 普段は <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">のドキュメントタイプでサイトを作っているのですが、他の人に作ってもらったサイトが上記のタイプで作られていました。そのサイトにiframeを組み込みたいのですが、表示がされませんでした。そこで、HTML 4.01 のタイプに変更したところ、文字の大きさや高さなどが崩れてしまいます。何かよい方法がありましたら教えてください。宜しくお願いします。

    • ベストアンサー
    • HTML
  • HTMLソースにXHTMLの混在は可能ですか?

    はじめまして。 早速ですが、 現状、サイトAとサイトBがあり、 サイトAは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> で定義されたHTML文書で書かれており、 サイトBは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> で定義されたXHTML文書で書かれています。 そして、サイトBのフッターにあるグローバルメニューをサイトAの方にも挿入・反映したいと考えています。 このような場合、HTML文書の中にXHTML文書を混在させることは可能なのでしょうか? 皆様のお知恵を拝借させてください。 宜しくお願い致します。

  • DOCTYPE宣言は厳密に気にするべきか??

    現在WEBを独学で学んでおります。 そこでDOCTYPE宣言についていくつか疑問に思いました。 ひとつでもわかる方はご回答頂ければ幸いです。 1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と、ソースの頭に記述しておいて <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の内容で記述(XHTML 1.0 Transitionalで記述)することは可能ですか?? つまり、HTML 4.01 Transitionalを宣言して終了タグなど、XHTML 1.0 Transitionalの方式で書いても正確に表示されるかを知りたく思って おります。 2.DOCTYPE宣言を書いてないサイトが多く見受けられますが、 この場合はどのようにDOCTYPE宣言と捉えられるのでしょうか? また、この場合のデメリットとかはありますでしょうか?? 以上、わかる方いましたらよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ホームページビルダー10のバグ??

    勝手にhtmlを省略してしまい困っています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> と書いて保存しもう一度見ると <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> だけになってしまいます。百歩譲ってこれでもhtml適には 問題ないかと思うのですが勝手に省略させないようにする方法は ないでしょうか?

  • xhtml1.0でのJavascriptの動作

    こちらのフローティングメニューをWEBサイトに導入します。 http://dynamicdrive.com/dynamicindex1/staticmenu.htm 導入するサイトのDOCTYPEは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> である必要があります。(【1】とします) フローティングメニューを導入しましたが動作しませんでした。 対策としてDOCTYPEを以下にした場合、問題なく動作しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (【2】とします) このフローティングメニューが 【1】:動作しない 【2】:動作する という両者の違いは、htmlとxhtmlの違いのほかに、 なにかあるのでしょうか。 また、【1】でも動作させるためにはどうしたらよいのでしょうか? ※【2】を試した理由は、 下記のサイトで似たようなものが導入されており、宣言がそのような記述になっていたからです。 http://www.nhncorp.jp/intro/company_info.html

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 ・・・・・について

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> とサイトのソースを見ると上にこういうのがありますが、これは一体なんなんでしょうか?  よろしくお願いします。  

  • DreamweaverのXHTMLとIEの関係

    現在作成しているサイト(ホームページビルダーで作ったもの)をDreamweaverでHTMLからXHTMLに変換しようと思い変換してみると 私のサイトはインラインフレームに情報を表示しているのですが、 文字がはみ出していないのにもかかわらず横スクロールバーがでてしまいます。 原因を突き止めようと色々していると、変換時に出てくる <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> があると横スクロースバーがでることはわかりました。 しかし、これを消してしまうとDreamweaverがXHTMLとして認識してくれません。 <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> を消さずに横スクロールバーを消す方法は無いでしょうか? ちなみにFireFoxでは横スクロースバーはでません。 IEのみでます。

  • hp作成 Firefox javascript dreamweaver

    dreamweaverでHPを作成する時に <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> が入力されています。 この<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">が入力されているとFirefoxでjavascriptを表示できません。 Firefoxでjavascript表示したい時(DTD)はどのような表示が良いでしょうか?

  • CSSでの中央寄せにかんする疑問

    .main { margin:0 auto; width:1000px; } とCSSファイルに記述することにより中央よせをしようとしています。 IE8以外のブラウザでは中央に寄るのですが、IE8では実現しません。 実はこのCSSの記述は私が以前作成したサイトからコピーしていて、そのサイトではすべてのブラウザで中央に寄っています。 今回作成したサイトではこのようなトラブルに陥りました。 で、苦し紛れでDOCTYPE宣言を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> から <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> に変更したらIE8でも中央に寄りました。 なぜ、このようなことになったのでしょうか? 教えてください。 よろしくお願いします。(Apacheのバージョンとかがかかわっている?)

    • ベストアンサー
    • HTML
  • HTMLの属性について

    【Another HTML-lint gateway】 URL:http://openlab.ring.gr.jp/k16/htmllint/htmllint.html で、自サイト(HTMLの文法)をチェックしたのですが、 ■<HTML> に他のHTML用の属性 `XMLNS` が指定されています。 ■<A> の属性 `TARGET` はあまり薦められない属性です。 など2つの警告を受けました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> ↑の表記が間違っているのでしょうか? また、リンクを貼る時は、<A>タグ内にtarget="_self"を入れているのですが、これは入れない方が良いのでしょうか? よければご指南ください。 よろしくお願いいたします。

    • ベストアンサー
    • HTML