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

今回はHTMLの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="div-span-example">
  <div class="example">
    <p>例文です</p>
    <p>例文です</p>
  </div>

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

.div-span-example {
  box-sizing: content-box;
  border: 1px solid #e6e6e6;
  font: 16.15px/1.9 sans-serif;
  color: #333;
  padding-block: 1.9em;
}

.div-span-example p {
  display: block;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.example {
  display: block;
  box-sizing: content-box;
  width: 40px;
  height: 200px;
  margin: 0;
  padding: 0;
  background: orange;
}

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

2. divとspanの違いは？

ではdivとspanの違いは何なのでしょうか。HTMLで中に入れられる内容の違いと、CSSによる表示の違いを分けて考えましょう。まず、ブラウザの既定のスタイルでは、displayは次のようになります。

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

このdisplayプロパティの違いにより、divとspanでは表示に様々な違いが生じます。divにdisplay: inline、spanにdisplay: blockを指定すれば、表示の仕方を変えられます。ただし、HTMLの内容モデル（中に入れられる内容の規則）は変わりません。spanにdivを入れられるようになるわけではありません。

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

既定のdisplay: blockで通常フローに置くdivは、CSSで幅（width）と高さ（height）を指定できます。一方、通常の文字を囲むspanのような非置換のinline要素にはwidthとheightが適用されません。この図は既定の表示の比較です。spanもdisplay: inline-blockなどに変えれば幅と高さを指定できます。画像などの置換要素は、このinlineの説明とは別です。

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

既定のinline表示のspanは文章の流れの中に置かれ、前後でブロックを分けません。一方、通常フローのblock表示のdivは前後でブロックが分かれます。この図は既定の表示の比較で、HTMLに改行文字やbrタグが追加されるという意味ではありません。

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

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

spanの使用例

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

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

.div-span-example {
  box-sizing: content-box;
  border: 1px solid #e6e6e6;
  font: 16.15px/1.9 sans-serif;
  color: #333;
  padding-block: 1.9em;
}

.div-span-example p {
  display: block;
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

.blue {
  display: inline;
  color: skyblue;
  font-weight: bold;
}

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

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

divタグの中にspanタグを入れることはよくあります。一方で、spanの中にdivを入れる書き方はHTMLの内容モデルに適合しません。

spanに入れられるのは、文字やspanなどのphrasing content（文章の中で使う内容）です。divはその分類に含まれません。この図は公開当時の概略です。「inlineの中にblockを入れない」はCSS全般の禁止規則ではありません。CSSではinlineの要素の中でblockの表示が生じる場合もありますが、displayを変えてもspanのHTMLの規則は変わりません。

divの中でspanを使うことはできます。この図も公開当時の表示の概略です。HTMLで入れられる内容を決めるのは、inline・blockというCSSの値ではなく、各要素の内容モデルです。

divの中にspanを入れるイメージはこんな感じです（かなりざっくりした図ですが…）。

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

それぞれで中に入れられる内容が決まっています。divには通常flow content、spanにはphrasing contentを入れられます。displayの値だけで判断することはできません。divも何でも無条件に入れられるわけではありません。例えばliはulやolなど、決められた親の中に置きます。dl内のdivなど、置く場所によって特別な条件がある場合もあります。

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

ものすごくざっくり言うと「divはflow contentをまとめる」、「spanは文章の中のまとまりを作る」というイメージですね。

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

どちらも複数回使用しても問題ありません。「divの中のdivの中のdiv…」というのもアリなわけですね。ただ、divタグは複雑なレイアウトやデザインのものを作るときに、ついつい多用してしまいます。コードの見やすさを保つために、不要なまとまりを増やさないようにしましょう。articleやnavなど、その内容に適した意味を持つ要素がある場合は、そちらを優先します。