/*サーチコンソール*/ /*google adcense*/

p要素、div要素、span要素の違いを初心者向けに解説【HTML】

2020年1月27日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

HTMLを勉強し始めて当たる壁の一つとして、「p要素とdiv要素の違い、div要素とspan要素の違いがわからない」ということがあります。実際HTMLについて何も知らなかった僕も、これをきちんと理解するまでに時間がかかりました。

今回は初心者向けにこの3つの要素の違いを解説していきます。

p要素、div要素、span要素の違いを初心者向けに解説
この記事の要点まとめ
それぞれの要素について
p要素
p要素は段落を表す要素。
div要素
divタグで囲むと、各コンテンツをひとまとめにすることができる。
span要素
span要素は意味を持たない汎用的な範囲を指定できる。
p要素とdiv要素の違い
大きな違いは、p要素は段落を変えdiv要素は囲んだ部分をひとまとめにすること。
div要素とspan要素の違い
div要素は囲んだ部分をひとまとめにし、span要素は一部分にだけ指定する。
中に入れることができる要素
p要素、div要素、span要素の中に入れられる、入れられない要素を表で紹介。
p要素、div要素、span要素は正しく使い分けよう
これらを理解し、使用するべき場所で使うように心がけるようにする。

それぞれの要素について

ハリボー
ハリボー

div要素とかspan要素ってよくわかんないんだよね。

最初は理解するのに少し時間がかかるかもね。

ヒナ
ヒナ

まずはp要素、div要素、span要素について簡単に解説していきます。p要素については、この記事よりも詳しく書いた記事を用意していますので、興味のある方は「初心者向け段落の作成方法【HTML】」の記事を読んでみてください。

また、この記事ではclassやidといった属性が使用されていますが、これについてはまた別の記事にします。

p要素

p要素とは「paraguraph」の略で、段落を表す要素です。p要素を使って段落を作ると、タグで囲んだ部分の前後に余白ができます。

p要素の中にはspan要素やimg要素など(フレージングコンテンツ)を入れることができますが、p要素やh1要素などを入れることはできません。これに関してはまた別の記事で解説していきます。

※CodePenの使い方がわからない方はこちら

See the Pen p要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

div要素

div要素は「division」の略で、区分・部分といった意味を持っています。divタグで囲むと各コンテンツをひとまとめにすることがでる汎用的な要素です。

divタグで囲まれた部分は、メインコンテンツを表す「main要素」、記事の意味を示す「article要素」などと異なり、特殊な意味を定義しません。囲んだ部分をCSSを使いデザインを変更するために使用されることが多いです。タグで囲まれた部分は改行されますが、前後に余白はできません。余白を付ける場合は自分で指定する必要があります。

div要素の中にはほぼ全ての要素を入れることができます。div要素の中にdiv要素を入れることも可能です。

下の例ではdivタグ間にテキストしか入っていませんが、基本的にこのような使い方はしません。このような場合は段落としてp要素を使用してください。

See the Pen div要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

span要素

span要素は、意味を持たない汎用的な範囲を指定できます。p要素やdiv要素のように、囲まれた部分で改行されることもなく、ただspanタグで囲むだけではデザイン上何も変化しません。

文章中特定の場所だけに対して色を変えたいなどの場合、その場所をspanタグで囲み、CSSでデザインを変更するという使い方をします。

span要素の中にはspan要素やimg要素などを入れることができますが、p要素やh1要素などを入れることはできません。

See the Pen span要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

p要素とdiv要素の違い

これについては別の記事で解説するから、よくわからなかったらそっちも見てみてね。

ヒナ
ヒナ

3つの要素について簡単に解説位していきましたが、p要素とdiv要素はどちらも「一つのまとまりを作るもの」です。ただタグで囲むだけだと、前後に余白ができるくらいしか違いはありません。

大きな違いとして、p要素は段落を変えるもの、div要素は囲んだ部分をひとまとめにするということです。そして要素の中にフレージングコンテンツしか入れられないp要素に対して、div要素はほぼ全ての要素を入れることができるという点です。divクラスを使用しないと実装できないことや、使わなくても実装できるけどdiv要素を使うことですっきりとしたコードにすることができることもあります。

文字で書いてもよくわからないと思うので、3つの例で解説していきます。

1.「3つの段落を全て中央寄せしたい」というときは、div要素の中にp要素を3つ入れます。そしてdiv要素に対してCSSで「中央寄せ」を指定すれば、それだけで3つの段落は中央寄せにすることができます。ですがdiv要素を使わなくても、p要素全てに「中央寄せ」を指定すれば同じことができます。

2.次に「3つの段落の周りを枠線で囲みたい」というときはどのようにすればいいでしょうか。div要素の中に3つの段落を入れ、div要素に対してCSSで「枠線で囲む」を指定することで、実装できます。これをdiv要素を使用せずに実装しようとすると、p要素の中にテキストを記述し、段落分けしたい部分に対してbrタグを使い改行させます。そしてp要素に対して「枠線で囲む」を指定すれば同じことができます。ですがbrタグで改行しているので、段落間の余白はありません。

3.最後に「3つの段落を枠線で囲み、2つめの段落中にリストを作成しさらに枠線で囲みたい」という場合はどうでしょう。まずdiv要素の中に3つの段落を入れますが、全てp要素ではなくp・div・pの順番で入れていきます。次に2つめの段落(div)の中にリストを入れます。そして2つのdivに対し、枠線を指定することで実装できます。これをdiv要素を使わずに実装しようとすると、p要素の中にul要素(リストを作る要素)を入れる必要があります。ですが、p要素の中にul要素を入れることはできません。つまりこれを実装するにはdiv要素が絶対に必要ということになります。

See the Pen p要素とdiv要素の違い by Kosei@SplaTech (@pompom_stk) on CodePen.

ハリボー
ハリボー

やばい意味わからん。別の記事行ってくる。

div要素とspan要素の違い

div要素とspan要素はどちらも、「意味を持たない汎用的な範囲」とされています。意味を持たないというのは、段落(P)や見出し(h1~6)、メインコンテンツ(main)といった意味を持たないということです。ですがdivの使い方と使うメリットは、前章の例でわかったかと思います。次はdiv要素とspan要素の違いについて解説していきます。

まずdiv要素は前章で解説したように、「囲んだ部分をひとまとめにする」ことができます。それぞれのdiv要素に対してCSSでデザインを指定すれば、囲んだ部分に適応されます。span要素もこれと同じような役割を持っていますが、大きな違いは「一部分に対してだけ指定する」という点です。

この記事では大事な部分にはこのように文字色を変えたり文字の太さを変えたりしています。これらをHTMLで表すには、まずテキストをpタグで囲み、デザインを変更したいテキストをspanタグで囲みます。しかしspsnタグでテキストを囲んだだけでは何も変わりません。

文字色やサイズを変更させるには、それぞれのspan要素に対してCSSでデザインを変更する必要があります。span要素はCSSでデザインを変更しなければ、見た目上何の変化もありません。対してdiv要素は何も指定しなくても改行されるという、見た目上の変化があります。これもdiv要素とspan要素の違いの一つと言えるでしょう。

もう一つ、span要素はフレージングコンテンツと呼ばれ、p要素の中に入れることができます。div要素はフローコンテンツと呼ばれるもので、p要素の中に入れることはできません。フローコンテンツやフレージングコンテンツに関しては、ここではよくわからなくて大丈夫です。

See the Pen span要素とdiv要素の違い by Kosei@SplaTech (@pompom_stk) on CodePen.

中に入れることができる要素

ここまでそれぞれの要素について、p要素とdiv要素の違い、div要素とspan要素の違いについて見てきました。その中で何度か「○○の中に○○は入る、入らない」という表現がありました。

HTMLはタグの中に別のタグを入れることができます。ですが、何でも入れられるというわけではなく、決まりがあります。これについては長くなるのでまた別の記事で解説していきますが、今回紹介した要素の中に何が入れられて何が入れられないのかを表にして紹介します。

入れられる要素 入れられない要素
p要素 span
a
img
div
table
ul
div要素 span
p
div
何でも入れられる
span要素 a
img
span
p
div
table
div要素とp要素とspan要素
クリックで拡大

p要素、div要素、span要素は正しく使い分けよう

p要素、div要素、span要素の違いについて理解できたでしょうか?これらは全て、「使用するべき場面」が存在します。正しく理解し、使用するべき場所で使うように心がけましょう。

また、div要素やspan要素を使用するには、同時にclass属性やid属性について理解する必要があります。そこまで難しいものではないですが、これらを使えるようになるだけでCSSでデザインを変更することが楽しくなります。最初は難しく感じるかもしれませんが、ゆっくりと使えるようになりましょう。