divとspanの違いと使い分け方を分かりやすく図解

divとspanの意味と違い

今回はHTMLのdivタグとspanタグの意味違い使い分け方をまとめます。初心者の方でも分かるように図をたくさん使いながら解説していきます。

1. divとspanの意味とは?

どちらもHTMLのタグです。<div>〜</div>や、<span>〜</span>というような書き方をします。どちらも基本的にどこかのデザインを変えたいときに使います。

1-1. タグ自体に意味はなし

divもspanもタグ自体には意味がありません。これは他のタグと比較すると分かりやすいですね。

タグの役割

  • pタグ:段落を表す
  • h1タグ:大見出しを表す
  • ulとliタグ:箇条書きを表す
  • divタグ何も表さない
  • spanタグ何も表さない

1-2. divとspanの役割

では一体どんな役割をするのでしょうか。

divタグの使い方

例えば、この図のように複数のタグをdivではさみ、2つに分けてみます。それぞれのclass名を”one”、”two”としました。この時点では表示には変化はありません。

参考: classとidとは?

divタグによりまとまりごとにデザインを変えられる

しかし、divにclass名をつけていれば、その部分だけデザインを変えることができるのです。例えばCSSで.one{background: skyblue}とすれば、class名がoneのまとまりだけ背景色を水色にすることができるのです。

参考: 初心者向けCSSの書き方

1-3. 使用例

実際に簡単な使用例を紹介します。たとえば、4つのpタグの文章があります。このうち上の2つをdivタグで囲み、幅と高さを指定したうえで背景色をオレンジにしてみます。class名はexampleとしてみました。

HTML
<div class="example">
	<p>例文です</p>
	<p>例文です</p>
</div>

<p>例文です</p>
<p>例文です</p>
CSS
.example {
	width: 40px;/*幅を40pxに*/
	height: 200px;/*高さを200pxに*/
	background:orange;/*背景色をオレンジに*/
	}
ブラウザ表示

例文です

例文です

例文です

例文です


オレンジ色に塗られた部分がdivにより作られたまとまりの範囲です(こんな不格好なデザインにすることはないかと思いますが…)。div自体に意味は無くとも、色々なデザインを指定することができるのですね。

2. divとspanの違いは?

ではdivとspanの違いは何なのでしょうか。少しむずかしい説明をすると「2つタグの違い=diplayというCSSのプロパティの値の違い」なのです。

  • divdisplay: blockとなっている
  • spandisplay: inlineとなっている

※ diplayプロパティについてはこちらの記事でくわしく解説しています。

このdisplayプロパティの違いにより、divとspanでは様々な違いが生じます。逆に言えば、divに対してdisplay:inlineを指定すれば、spanと同じ働きをするようになります(逆も同じです)。と言ってもなかなか分かりづらいと思うので、ここでは「具体的にどのような違いが生じるのか」という点に絞って解説します。

2-1. 幅と高さを指定できるかどうか

divとspanの違い

divはCSSで幅(width)と高さ(height)の指定ができます。一方でspanは幅と高さを指定しても反映されません。

2-2. 前後に改行が入るかどうか

divとspanの違い

spanでは前後に改行が入りません。一方divではまとまりの前後に改行が入ります。

2-3. spanは文字の装飾などに便利!

spanの使い方

前後に改行の入らないspanタグは文章の一部の文字色を変えたり、文字に下線を引いたりするときに便利です。この図では、「例文」という文字だけを<span id="aka">でくくり、CSSで.aka {color:red}と指定することで、文字色を赤にしています。

spanの使用例

例として、spanタグを使ってpタグ内の一部の文字だけ色と太さだけを変えてみます。

HTML
<p>サルワカで<span class="blue">ウェブデザイン</span>を学ぼう</p>
CSS
.blue {/*クラス名blueに対して*/
	color: skyblue;/*色を水色に*/
	font-weight: bold;/*太字に*/
}
ブラウザ表示

サルワカでウェブデザインを学ぼう


このようにclassやidと合わせてうまく使えば、自分の好きな部分の装飾だけを変えることができるのです。

2-4. spanの中にdivは入れない

divタグの中にspanタグを入れることはよくあります。一方で、spanの中にdivを入れることは基本的にありません。

inlineの中にblockは基本的に入れない

これはdisplayについて理解すると分かります。inlineの要素(spanはコレ)の中には、blockの要素(divはコレ)を基本的に入れないという決まりがあります

inlineはblockの中で使われる

逆にinlineはblockの要素の中で使われます。

違い

イメージはこんな感じです(かなりテキトウな図になってしまいましたが…)。

2-5. 中に入れることのできるタグの違い

それぞれで中に入れられるタグの種類が決まっています。divの場合、中に何でも入れることができます。一方でspanは基本的にdisplay:inlineの要素だけを中に入れます。

中に入れられるもの
div なんでも入れられる(div、p、h1~h6、ul、dl、ol、li、span、img、strong、em…など)
span span、a、imgなど

divの中に別のdivを入れることもできますし、spanの中に別のspanを入れることもできます。

ものすごくざっくり言うと「divはあらゆるものを挟んで大きなまとまりを作る」、「spanは小さい(主に文字)まとまりを作る」というイメージですね。

3. divやspanは何回使っても良い?

どちらも複数回使用しても問題ありません。「divの中のdivの中のdiv…」というのもアリなわけですね。ただ、divタグは複雑なレイアウトやデザインのものを作るときに、ついつい多用してしまいます。コードの見やすさを保つために、なるべく使う数を減らすのがスマートだとされています。

サルワカくんの顔(通常)
サルワカくん

spanとdivはウェブデザインをするうえで避けることができないタグです。この記事の内容をなんとなくでも頭に入れておくことをおすすめします。

サルワカ