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

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

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

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

p要素とdiv要素の違いはちょっとわかりにくいですね。どちらもブロック要素ですが、文章の段落ではp要素を使うと良いでしょう。

p/div要素とspan要素の違いは、ブロック要素かインライン要素かという点です。pや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要素はブラウザ標準のスタイルで前後に余白ができるようになっているため、特に何も指定しなければ上記のように行間が開きます。

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

div要素

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

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

ブラウザで開くと、p要素と違って間に空白ができないことがわかります。自身でオリジナルのスタイルを適用して表示させたい場合などに活用できます。

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>

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

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

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

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

posted with カエレバ

楽天市場で購入

Amazonで購入

Yahooショッピングで購入