• ベストアンサー

<div>と<p>

の違いがいまいちよく分かりません。分からないので、<div>*****<p>***</p>*****</div>のような記述をしているのですが、これは正しい記述法ですか?

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

正しいですよ。 どちらもブロック要素で似ていますが <div>は、四角い箱(枠スペース)をつくります。 <p>は、段落です。 <div>は他のブロック要素を囲めます。 <p>は囲めません。 例:最初のdivヘッダーに背景画像を入れたりなんかします。 <div> <h1>タイトル</h1> </div> <div> <h2>サブタイトル</h2> <p>あいうえお</p> <p>かきくけこ</p> <ul><li>A<li>B<li>C</ul> </div>

exordia
質問者

お礼

ありがとうございました。 正しいとわかってほっと安心しました。やはりきちんと勉強しないとだめですね。

その他の回答 (1)

  • suzukikun
  • ベストアンサー率28% (372/1325)
回答No.1

元々HTMLは文章の属性をタグで表しておくというSGMLを元に作られています。 DIVタグはDIVisionの略で個々のセクションを分けていることを示しており、PタグはParagraphの略で段落を表しています。 ですから文章の構造的にはDIVの中にPが複数あるという感じです。 実際のところはDIVタグはスタイルシートの適用範囲として設定して、Pタグはそのときの段落分けとして使うことが多いと思います。

参考URL:
http://www.mitsue.co.jp/case/design/h_056.html,http://www.mitsue.co.jp/case/design/h_059.html
exordia
質問者

お礼

ありがとうございました。たすかりました。

関連するQ&A

  • divとpの使いわけ

    サイトを作っているとdivとpで迷います。 「自由だしどちらでもいんじゃない?」と言う声も聞こえてきそうに 思うのですがこういう方向で使い分けている等という区分ってありますか? 私の場合 <div class="title">タイトルです</div> <p>コメントです1</p> <p>コメントです2</p> <p>コメントです3</p> のような感じでcssで p {margin-bottom: 1em;} と設定しております。 コメントに改行がなく1行2行で済む場合は <div>コメントです</div> で問題ないのですができるだけ適した改行(段落)も入れたくpでテキストは 囲むようにしております。 気になったもので質問させて頂きました。有利な点や不利な点など どんなコメントでも構いませんのでご意見をお待ちしております。

    • ベストアンサー
    • HTML
  • <P>タグと<div>タグについて

    <P>タグと<div>タグには“前後に空行が入るかどうか”という違いがあるそうですが、下記のようなデータを作り、自分のホームページに記入したところ、前後に全く空行が入りませんでした。 しかし、自分のホームページ以外で、このデータを試してみたところ、<p>タグにはきちんと空行が入るようです。 記入する場所によって、空行が入ったり入らなかったりするのは、なぜなのでしょうか? ※ブラウザはIE8を使用しています。 <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <P align="right" style="width:740px;margin:auto;">●●●</p> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div> <div align="right" style="width:740px;margin:auto;">▲▲▲</div>

  • div > p:first-child { color: #ff000

    div > p:first-child { color: #ff0000;} div p:first-child { color: #ff0000;} の違いを教えてください

  • <div>テキスト</div>

    HTMLを記述する際に文書構造を明確に…と考えています。 見出しにはHタグ、本文にはPタグ、リストにはliなどなど。 ある書籍でbody直下にテキストを配置するのはいけない、と書いてありました。テキストに意味付けがなされていないから、というようなことが理由として書いてありました。 そこで思ったのですが、divはもともと意味をなさないブロック要素ですが、この直下にテキストを配置すると、このテキストは文書構造上意味を持たないものになって、文法上間違っているのでしょうか? 今のところ、 <div><p>テキスト</p></div> のように、pで意味付けをするのが正しいのかな、と考えていますが、W3Cのホームページではdiv直下にテキストを配置しているものがありました。 皆さんのご意見を伺いたいです。 div直下のテキストは正しいのか、間違っているのか、どうでもいいのか?

    • ベストアンサー
    • HTML
  • pとdivのどちらが良いでしょうか?

    pタグとspanタグとdivタグの使い分けがよくわからないので http://techmemo.biz/html/p%E8%A6%81%E7%B4%A0%E3%80%81div%E8%A6%81%E7%B4%A0%E3%80%81span %E8%A6%81%E7%B4%A0%E3%81%AE%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E9%81%95%E3%81%84/ を読んだのですが、それでもよくわかりません。 私がやりたい事はindexページにタイトルを表示したいのですが 文字の装飾はしたいです。 でも文字全部に色を付けてサイズを調整したいだけなので spanタグで文字の中の一部の装飾ではないです。 この場合 pとdivのどちらが良いでしょうか? ページの上部に ~サイトの名前~ みたいにしたいです。

  • borderプロパティによる線の表示でdiv要素とp要素で囲った場合の違い

    下の記述例で質問があります。 CSSソース kbd { margin: 0 0.3em; padding: 0.1em 0.3em; border: 1px solid black; } HTMLソース <div> <kbd>keybord</kbd>と入力してください。 </div> このような記述のとき、IE7ではkbd要素を囲っている下の線が消えてしまいます。 しかし、HTMLソースを、 <div> <p> <kbd>keybord</kbd>と入力してください。 </p> </div> のようにdiv要素内にkbd要素をp要素で囲ってやると下の線が現われます。 div要素ではダメ(下の線が消える)なのに、なぜp要素では下の線が現われるのでしょうか?この違いが分かりません。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • <P ALIGN>と<DIV ALIGN>の明確な違いってありますか?

    HTMLの本を読んで勉強しているのですが、<P ALIGN...>も<DIV ALIGN...>も共にテキストの位置を指定するという事が書いてあるだけで違いについては書いてありません。 例えば、<P ALIGN="center">と、<DIV ALIGN="center">では双方に特定の使い方があるものでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像はDIVタグとPタグの両方で囲むの?

    クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか? ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>~</div>に文章はありません。  同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2(見出しタグ?)で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか? すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか? 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。

  • divが思うように使いこなせず困っています。

    divが思うように使いこなせず困っています。 下記のようにした場合、背景色や、width:100; height:100の指定は無視されてしまいます。 (動作確認はfirefox3でしています) width:100; height:100と指定していてもサイズが小さければ小さくなってしまうのでしょうか。 サイズの固定方法と、一番外のdivを効かせる方法をどなたか教えていただけますか? <div style="min-height:50; width:200; background-color:#FFFF00;"> <div style="width:200; height:100; float:left"> <p>testtest</p> <p>testtest</p> </div> <div style="width:100; height:100; float:left"> <p>testtest</p> <p>testtest</p> </div> </div>

    • ベストアンサー
    • SEO
  • 、<div>と<P>では、どちらを使ったほうが良い

    ページの上の部分に内容のタイトルを表示させています。 そのタイトルにタグをつけて装飾する場合 cssで設定するのですが、<div>と<P>では、どちらを使ったほうが良いのでしょうか?

    • ベストアンサー
    • HTML