「p」と「div」と「span」の違い

ポイント

  • <p>=ブロック要素。<div>=汎用ブロック要素。<span>=汎用インライン要素。
  • <p><div>=前後に改行が入る。<span>=前後に改行は入らない。
  • <p>=行間に空白ができる。<div>=行間に空白はできない。
  • <p>=主に改行に使われる。<div><span>=主に装飾に使われる。
  • <p>に属性を使うのはNG。装飾したい場合は<div><span>。

解説

HTMLの勉強を始めて多くの人が素朴な疑問を抱くのが<p>と<div>と<span>の違いです。

<p>も<div>も<span>も、他のタグと比べると、これと言った意味がないように感じます。

まず、タグの分類で考えると、<p>=ブロック要素。<div>=汎用ブロック要素。<span>=汎用インライン要素になります。

ただ、これだけでは意味がよく分かりません。

同じ言葉をそれぞれのタグで囲んでみると分かりやすくなります。

<p>これはPとDIVとSPANの違いです。</p>

<p>これはPとDIVとSPANの違いです。</p>

<p>これはPとDIVとSPANの違いです。</p>

これはPとDIVとSPANの違いです。

これはPとDIVとSPANの違いです。

これはPとDIVとSPANの違いです。

<div>これはPとDIVとSPANの違いです。</div>

<div>これはPとDIVとSPANの違いです。</div>

<div>これはPとDIVとSPANの違いです。</div>

これはPとDIVとSPANの違いです。
これはPとDIVとSPANの違いです。
これはPとDIVとSPANの違いです。

<span>これはPとDIVとSPANの違いです。</span>

<span>これはPとDIVとSPANの違いです。</span>

<span>これはPとDIVとSPANの違いです。</span>

これはPとDIVとSPANの違いです。 これはPとDIVとSPANの違いです。 これはPとDIVとSPANの違いです。

 

まず、<span>は改行されませんが、<p>と<span>には前後に改行が入ります。

更に、<p>には改行された行間に空白が入りますが、<div>には行間に空白が入りません。

一般的な使い分けとしては、<p>は改行させたい場所に、<div>と<span>は装飾したい場合によく用いられます。

改行用のタグとして<br>がありますが、このタグは推奨されていないため、代わりに<p>で囲むことが一般的です。

しかし、<p>タグに属性を使うことは推奨されていませんので、その場合は<div>や<span>を使う事になります。

全体に同じ装飾を施したい場合は<div>、特定の文字だけ装飾したい場合は<span>を使うのが一般的です。

全体を赤字にしたい場合

<div style=”color:red;”>

<p>これはPとDIVとSPANの違いです。</p>

</div>

これはPとDIVとSPANの違いです。

一部を赤字にしたい場合

<p>これは<span style=”color:red;”>PとDIVとSPANの違い</span>です。</p>

これはPとDIVとSPANの違いです。

参照元

http://princesswell.rocketserver.jp/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/

http://htmlandcss.seesaa.net/article/134659158.html

http://www.eonet.ne.jp/~nga/html/div&p.html

 

同じカテゴリーの記事

 

こんな違いも人気です

コメントは受け付けていません。

サブコンテンツ

タグクラウド

このページの先頭へ