p要素、div要素、span要素のそれぞれの違い

p要素、div要素、span要素のそれぞれの違い

p要素、div要素、span要素のそれぞれの違い
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 次世代の暗号通貨投資法!初心者でも!どなたでも年利36.27% ⁉︎
  • このエントリーをはてなブックマークに追加

HTMLを書いていると、p要素とdiv要素どちらを使えばいいか、div要素とspan要素どちらを使えばいいか、等の悩みが出てくると思います。

これらの要素はHTMLの中である一定の範囲を指定する際に使います。特にdivやspanは一定の範囲を指定してスタイルを変更したりするために利用することが多いです。

pとdivとspanの違いはざっくり説明すると以下のようになります。

p ブロック要素。段落を指定する時に使います。
div 汎用ブロック要素。前後に改行が入ります。
span 汎用インライン要素。前後に改行が入りません。

p要素とdiv要素の違いは、各ブロック要素の間に1行空白ができるかどうかという点です。p要素の場合、終了タグの後ろにさらに空白の行ができます。div要素の場合、改行はされますが、空白はできません。

div要素とspan要素の違いは、ブロック要素かインライン要素かという点です。divはブロック要素なので、前後に改行が入りますが、spanは入りません。

スポンサードリンク

p要素

実際に見てもらう方がわかりやすいと思いますので、以下のようにHTMLを記述してブラウザで開いてみてください。

<p style="color:red;">HTMLの基礎講座</p>
<p style="color:red;">HTMLの基礎講座</p>
<p style="color:red;">HTMLの基礎講座</p>

以下のようにそれぞれの行の間が開きます。

HTMLの基礎講座

HTMLの基礎講座

HTMLの基礎講座

このように<p>~</p>で囲んだ部分は、前後に1行空白が入ることになります。今回はわかりやすいように色をつけてみました。

色を変えるために記述しているstyleというオプションは、見た目を変更するためのオプションになります。styleオプションは、HTMLに直接書くことができるので、スタイルシートに記述する前に色やサイズ等の見た目を確認したい時に使えます。

div要素

以下のようにHTMLを記述してみてください。

<div style="color:red;">HTMLの基礎講座</div>
<div style="color:blue;">HTMLの基礎講座</div>
<div style="color:green;">HTMLの基礎講座</div>

ブラウザで開くと、p要素と違って間に空白ができないことがわかります。

HTMLの基礎講座
HTMLの基礎講座
HTMLの基礎講座

span

span要素は、div要素とは異なり、前後に改行が入りません。文章の途中でスタイルを変更したい場合等に使います。
先ほど書いてもらったHTMLの中で、3行目の”基礎”だけ色を変えたいといった場合には、以下のように記述します。

<div style="color:red;">HTMLの基礎講座</div>
<div style="color:blue;">HTMLの基礎講座</div>
<div style="color:green;">HTMLの<span style="color:pink;">基礎</span>講座</div>

これをブラウザで開くと以下のようになります。

HTMLの基礎講座
HTMLの基礎講座
HTMLの基礎講座

このように改行は入れたくないけど、途中の一部分だけにスタイルを加えたいという場合には、span要素を使います。

これらのことを理解していれば、実際にHTMLを書く時もどの要素を使えばいいか迷わないと思います。それぞれの要素を使いこなして、より見やすいWEBページ作りに励みましょう。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

One thought on “p要素、div要素、span要素のそれぞれの違い

  1. Pingback: [256interns]HTML5でのマークアップを実際にやってみる | うのうのエンジニアブログ

コメントを残す

メールアドレスが公開されることはありません。