divとspanの違いは？使い分け方を初心者向けに解説

1. divとは？spanとは？

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

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

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

1-2. divとspanの役割

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

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

参考: classとidとは？

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

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

つまり、複数のタグをまとめたりすることで、その部分だけのデザインを変えることができるのです。

1-3. 使用例

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

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

<p>例文です</p>
<p>例文です</p>

.example {
	width: 40px;/*幅を40pxに*/
	height: 200px;/*高さを200pxに*/
	background:orange;/*背景色をオレンジに*/
	}

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

2. divとspanの違いは？

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

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

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

このdisplayプロパティの違いにより、divとspanでは様々な違いが生じます。逆に言えば、divに対してdisplay:inlineを指定すれば、spanと同じ働きをするようになります（逆も同じです）。

と言ってもなかなか分かりづらいと思うので、ここでは「具体的にdivとspanでどのような違いがあるのか」という点に絞って解説します。

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

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

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

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

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

spanの使用例

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

<p>サルワカで<span class="blue">ウェブデザイン</span>を学ぼう</p>

.blue {/*クラス名blueに対して*/
	color: skyblue;/*色を水色に*/
	font-weight: bold;/*太字に*/
}

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

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

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

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

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

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

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

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

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