
サイトを作っていると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でテキストは
囲むようにしております。
気になったもので質問させて頂きました。有利な点や不利な点など
どんなコメントでも構いませんのでご意見をお待ちしております。
No.2ベストアンサー
- 回答日時:
> サイトを作っているとdivとpで迷います。
> 「自由だしどちらでもいんじゃない?」と言う声も聞こえてきそうに
決して「自由」ではないですよ。divもpもブロック要素ではありますが、divは子要素にブロック要素を持てますが、pはインライン要素しか内包できない、という先ずは大きな違い(文法上の制約)があります。論理的意味を考えないなら、文法上はpを全てdivで置き換えることは可能ですが、その反対は真ではない、という事になります。
また、上記で触れた様に、(ご存知かもしれませんが)p(paragraph)には「段落」という論理的意味がありますが、div(division)自身は論理的意味は持ちません。ですので、内容が「段落」として相応しいものであるなら、pでマークアップするのが適切という事になります。
----------------------------------------------------------------------
<div class="title">タイトルです</div>
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
----------------------------------------------------------------------
上記の様な文章構造であるなら、ANo.1様の例と同様、「タイトルです」という箇所はh(n)要素でマークアップするのが妥当です。
----------------------------------------------------------------------
<h1 class="title">タイトルです</h1>
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
----------------------------------------------------------------------
ですが、上記の「コメントです1」~「コメントです3」までの3つのpに対して更に何かをまとめたスタイルを追加したいとします。例えば、この3つのpをひとくくりにして、外枠に線を引いたボックスに入れたレイアウトにしたいとします。その場合、ブロック要素であるpを子要素にできるブロック要素は限られます。例えば各リスト要素(ulのli、olのli、dlのdd)などもブロック要素を子要素に持てるのですが、まず親であるこれら自身に「リスト」という論理的意味がある為、どの局面でも適当に使えるというものではありません。となると、この場合妥当な親要素はdiv、という様に考えられます:
----------------------------------------------------------------------
<h1 class="title">タイトルです</h1>
<div class="coment">
<p>コメントです1</p>
<p>コメントです2</p>
<p>コメントです3</p>
</div>
----------------------------------------------------------------------
という様にマークアップした上で、div.commentにborderなどのプロパティでスタイルを与えれば論理構造上も問題がない状態で新たなスタイルを与える事ができます。
> コメントに改行がなく1行2行で済む場合は
> <div>コメントです</div>
> で問題ないのですができるだけ適した改行(段落)も入れたくpでテキストは
> 囲むようにしております。
改行があろうがなかろうが、「コメント」という同じ位置付けを持つものであれば、基本、pでマークアップすべき様に思えますが?
> 有利な点や不利な点など
divとpの使い分けができていない(文法上は正しい上で)からといって特に有利・不利があるかどうかわかりかねますが、pには明確な論理的意味があり、divには論理的意味がない、という事を押さえた上でマークアップを考えていけば、自ずとそれらの出番は決まってくると思うのですが。
個人的には、レイアウトを実現する為にdivを使うべきかどうかで悩む事はあっても、その内容がpかdivか、で悩む事はなかった様に思います。
お返事りがとうございます。
詳しいご説明を頂き理解を深める事ができ自信が持てました。
>改行があろうがなかろうが、「コメント」という同じ位置付けを持つものであれば、基本、pでマークアップすべき様に思えますが?
確かに論理的に考えるとおっしゃる通りですね^^;
まとめてスタイルを設定するにはpをdivでくくりそれ以外のコメントは
<p>でくくって行く方向で進めて行きたいと思います。
ご丁寧に教えて頂きましてありがとうございました!
No.1
- 回答日時:
普通に文章をマークアップするときにはpタグ、タイトルは見出しならh1~h6タグです。
divをhtmlだけで使う時は属性を指定して使います。
<div lang="en">
<h2>Title</h2>
<p>Comment</p>
<p>Comment</p>
<p>Comment</p>
</div>
また、その何も意味がないタグという特性を利用してcssやjavascript等のために記述されることがあります。
一応グループ化という使われ方も主張があるのですが作り手の都合上のグループ化なので、htmlの定義の曖昧さやhrタグの存在などから考えるとおかしいような気がします・・・
お返事ありがとうございます。
h1~h3までは割と使うのですがそれ以降はなかなか使用する事がないのが
現状ですね^^;それでdivでタイトルくくるという癖がついてしまいました。
やはり見出しとなるタイトルの場合はhタグを使うのが基本なのですね!
これを期に見直しして行きたいと思います。ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
コンテナの上下左右を囲う線の...
-
name="description"が効きません
-
html の divとtable の役割
-
XHTMLでループ処理のやり方
-
htmlのolやulなどlistにtitleや...
-
複数のボタンを等間隔に、かつ...
-
ヘッダーを左右に二分割する方...
-
HTML属性での「""」 「''」違い
-
ヘッダーとフッターだけ背景を...
-
ホリエモンのブログは、なぜ両...
-
htmlの見出しタグ(<h1>)の次...
-
CSS。特定ID内の特定IDにだけ適...
-
divの中に外部のHTMLを埋め込む
-
セクションをdivで囲むと見出し...
-
1時間30分を簡単に表したいで...
-
ソースには表示、表には非表示...
-
グリッドレイアウトで"auto-fit...
-
html5でheaderの中にnav
-
幅を可変にし2段組をCSSで組む...
-
ホームページのSEO対策について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
グリッドレイアウトで"auto-fit...
-
divとpの使いわけ
-
セクションをdivで囲むと見出し...
-
スペースを使わず文字位置を揃...
-
divの中に外部のHTMLを埋め込む
-
body>div{}の意味を知りたい
-
要素間、要素内に隙間が空く
-
ヘッダーを左右に二分割する方...
-
html5でheaderの中にnav
-
hタグを使わずに小見出し
-
CSSを使って定型文を挿入できま...
おすすめ情報