LINEで現役エンジニアに直接質問してみよう!登録無料

HTMLのdivとspanの違いは?意味と使い分け方を初心者向けに解説

HTMLを学習し始めると、必ず<div><span>というタグが登場します。どちらもタグ自体に意味はなく、どこかのデザインを変えたい時のみに使われます。

  • divやspanが沢山入れ子になってて、複雑で難しそう!😇
  • HTMLのソースコード中に沢山登場してるけど、どんな意味があるの?🤔
  • HTML書くのなんか怖い👻

こんな疑問を持っている初心者向けの内容です。

divとspanの役割と意味とは?

divとspanはどちらもHTMLのタグの1つです。

<div>
<!-- ここに内容を書きます。 -->
</div>

<span>
<!-- ここに内容を書きます。 -->
</span>

このように、HTMLページ中のヘッダーやボタンなどの部品をグループ化して、デザインを変えるために使われます。

divとspanにタグ自体の意味はない

そもそも、HTMLというのはタグ(<h1>タイトル</h1>など)それぞれでどういう内容の文章なのかを表すために使われ、下記のようにタグの種類ごとに意味を持っています。

タグも意味 一覧
  • <p>: 段落を表す
  • <h1>: 大見出しを表す
  • <ul> <li>: 箇条書きリストを表す
  • <div>: 何も表さない
  • <span>: 何も表さない

ところが、<div><span>は何も意味を表しません。

タグも意味 一覧
  • <div>: 何も表さない
  • <span>: 何も表さない

divとspanのHTML上の役割とは?

では、何も表さないdivとspanタグはどうして存在し、使われるのでしょうか?

divタグとspanタグが使われる要因は大きく分けて2種類あります。

  1. まとまり(グループ)を作るため
  2. 簡単にデザインなどを扱いやすくするため

まとまり(グループ)を作るため(divのみ)

<div>は、まとまり作る(グループ化)を行うためにしばしば使われます。

例えば、下記のように複数の文章があったとします。

<p>divとspanはまとまりを作ります</p>
<p>バンバン使いましょう!</p>

この2つ文章をグループ化すると、下記のようになります。

<div>
    <p>divとspanはまとまりを作ります</p>
    <p>バンバン使いましょう!</p>
</div>

このようにすると、HTML文章を見た時に「この部分を1まとまりとして見ればいいんだな。」と簡単に理解できます。

簡単にデザインなどを扱いやすくするため

<div><span>は、その囲った部分にclassを使って名前をつけることができます。名前をつけると、CSSでデザインする場所を指定できたり、JavaScriptで要素を操作する時の目印にできます。

ヘッダー、ボタン、タイトル、ロゴ画像のように、Webページは色々なパーツを組み合わせて作られています。

これらのパーツ1つ1つにCSSを使ってデザインを作っていくのですが、その際にどのパーツのデザインを編集するのかを指定する時、divやspanが役に立ちます

HTMLでこのような書き方を見たことはありませんか?

<div class="〜〜〜">
<!-- 内容 -->
</div>

class="〜〜〜"の部分が、デザインをどのように編集する時の目印になります。これは、<span>でも同様に、<span class="〜〜〜">のように使われます。

このように、パーツごとにデザインなどを簡単に扱うために、<div><span>が使われます。

divとspanは何回でも使っていい!

divとspanはHTML上で使える回数や場所が決まっていません。好きな場所で、好きなだけ使うことができます。

ただし、使いすぎるとメンテナンス性が落ち、動作も重くなる可能性があるので、必要最低限に留めるようにしましょう。

ただ、気にしすぎることはありません。

divとspanの使い方基本

ここで、<div><span>の使い方を簡単に紹介します。

divの使い方

<div>では、1つのまとまり(グループ)を作ります。一番簡単なグループは下記のようになります。

<div>
<p>divとspanは好きなだけ使えます</p>
<p>気にせずバンバン使いましょう!</p>
</div>

何度も言うように、<div>にはタグ自体に意味がありません。そのため、<div>と使う前と後でブラウザ上の表示の変化はありません。

<div>なし

<div>あり

spanの使い方

<span>は、文章中で使います。

<p><span>div</span>と<span>span</span>は好きなだけ使えます</p>

文章中で使うと、どの部分だけに使うCSSを設定することができます。

divとspanの違いや特徴

ここまで、<div><span>の両方を解説してきました。実は、<div><span>には、「divとspanの使い方基本」で紹介している使い方にも違いがあります。

それを3つのポイントでもっと詳しく解説します。

  • divはブロック要素、spanはインライン要素
  • divは高さと幅を指定できるが、spanはできない
  • divは改行されるが、spanはされない

divはブロック要素、spanはインライン要素

少し難しい説明になってしまいますが、この2つのタグは「ブロック要素かインライン要素か」があります。これは、displayというCSSプロパティが下記のように違う事を意味しています。

  • <div>: ブロック要素(display: block;)
  • <span>: インライン要素(display: inline;)

なので、<span>でもCSSでdisplay: block;を指定してあげれば、<div>と同じように扱うことができます。

しかし、それでは開発者が混乱してしまうだけですので、業務でサイトを作る時はしないでくださいね!

divは高さと幅を指定できるが、spanはできない

HTMLの要素には、1つ1つに高さを幅がありますが、その要素の中には高さと幅を設定でない要素もあります。指定できる要素が<div>(ブロック要素)で、指定できない要素が<span>(インライン要素)です。

  • <div>(ブロック要素): 高さ、幅を設定可能
  • <span>(インライン要素): 高さ、幅を設定不可

しかし一応、裏技的な方法で<span>にも幅と高さを設定できるようにする事もできます。それは、CSSをdisplay: inline-block;として設定してあげることです。

divは改行されるが、spanはされない

<div>でまとまりを作ると、その前後に改行が入ります。しかし、<span>を使うと改行が入りません。

divとspanの使い分けポイント

ここで、divとspanの書き方を一度例にして紹介したいと思います。

ここに複数の画像と文章があります。

<img src="https://hackable.jp/s3/2020/3/mika-B4SujlRCD54-unsplash.jpg" />
<p>divとspanは好きなだけ使えます</p>
<p>気にせずバンバン使いましょう!</p>
<p>ハッカブルプログラミング より</p>

これを、「ヘッダー」「コンテンツ」「フッター」の3種類に分けて、「ハッカブルプログラミング」の部分をspanで囲ってみたいと思います。

<div class="header">
  <img src="https://hackable.jp/s3/2020/3/mika-B4SujlRCD54-unsplash.jpg" />
</div>
<div class="contents">
  <p>divとspanは好きなだけ使えます</p>
  <p>気にせずバンバン使いましょう!</p>
</div>
<div class="footer">
  <p><span>ハッカブルプログラミング</span> より</p>
</div>

どうでしょうか?いつも見るHTMLっぽくなりましたか?

ここで、せっかく3種類に分割したので、それぞれにCSSを使って背景色と文字色などを変えてみたいと思います。

<div class="header">
  <img src="https://hackable.jp/s3/2020/3/mika-B4SujlRCD54-unsplash.jpg" />
</div>
<div class="contents">
  <p>divとspanは好きなだけ使えます</p>
  <p>気にせずバンバン使いましょう!</p>
</div>
<div class="footer">
  <p><span>ハッカブルプログラミング</span> より</p>
</div>
.contents {
  background: #eee;
}
.footer {
  background: #333;
  color: #fff;
}
.footer span {
    font-size: 1.1em;
}

いかがでしょうか?

divでグループ化してclassを使って名前を付け、そのグループ名(クラス名)を使ってCSSでデザインを変えました。さらに、「ハッカブルプログラミング」という文字にはfont-size: 1.1emを使い、フォントサイズを大きくしてみました。

このように、divとspanを使えば、デザインを自在にHTMLページ上で作ることができますよ。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。