【初心者向け】HTMLタグのdivとspanの意味と違いを解説

divタグとspanタグってどう違うの？

HTMLタグには色々ありますが、divタグとspanタグの違いや使い方がイマイチ分からないという人はいると思います。

そこで今回はdivタグとspanタグの意味と違いについて解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

divタグとは？spanタグとは？

divタグとspanタグはどちらもHTMLのタグで、基本的にCSSでスタイルをあててデザインやレイアウトなどの見た目を変えたい時に使います。

つまり用途が同じなので『どっちを使っていいか分からない』という人がいると思います。

そこでさらに共通する点と違いについて解説していきます。

divタグとspanタグの共通点

違いの前に共通点を確認しておきましょう。

divタグとspanタグには意味はない

divタグとspanタグは用途だけでなく、どちらもタグ自体に意味を持たないという共通点があります。

HTMLタグの意味・役割について

タグの意味？と思った方もいると思うので、HTMLタグの意味について簡単に解説します。

今回解説するのはdivタグとspanタグですが、他にも『h1タグ・pタグ・aタグ』など色々あります。

タグにはそれぞれ意味や役割のようなものがあり、例えばh1タグの場合は『大見出しにはh1を使う』という感じになります。

そして大抵のHTMLタグには意味がありますが、divタグとspanタグには特に意味はありません。

それではどちらも意味がないならどうやって使い分けるか？という解説をしていきます。

divタグとspanタグの違い

ここまでは用途とタグの意味が同じという解説をしてきましたが、違いはCSSのプロパティになります。

そしてどのプロパティかというと、displayというプロパティの初期値になります。

と言ってもこれがどう違うのかよく分からないと思うので、divタグとspanタグの違い、つまりdisplay: block;とdisplay: inline;の違いについては以下の記事を参照下さい。

divタグとspanタグの使い分け

先ほどの記事でdisplay: block;とdisplay: inline;の違いは分かったと思いますが、divにdisplay: inline;　spanにdisplay: block;を指定すれば逆の使い方も可能です。

と言ってもわざわざそんなことをする意味はなく、それぞれdisplayの初期値で使うのが自然なのでそのつもりで読み進めて下さい。

それでは実際にどう使い分けるのかというのを実装例で見ていきたいと思います。

divタグの使い方

divタグは主に複数のタグをまとめてグループにしたい時に使います。

例えば以下のようなコードがあった場合、全体の背景色を変えたいときはh2とpにbackground-colorを書かないといけません。

<h2>ABOUT</h2>
<p>ABOUTの文章が入ります</p>

これが2つならまだしも3つ4つと中にコードがあったら大変なので、これをdivで囲ってdivにbackground-colorを書けば全体の背景色を変えられます。

<div class="container">
  <h2>ABOUT</h2>
  <p>ABOUTの文章が入ります</p>
</div>

.container {
  background-color: #ccc;
}

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

もしこれがdivを使わずにh2とpにbackground-colorを書いていて、後からaタグが入ったらこうなってしまいます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

あとは同じようなグループを2つ作った場合、別々のスタイルを当てることも可能です。

See the Pen
div解説 by junpei (@junpei-sugiyama)
on CodePen.

なのでdivタグの基本的な使い方は『複数のタグをまとめる』と覚えておきましょう。

spanタグの使い方

spanタグの基本的な使い方は『文章の一部の色やデザインを変える』となります。

例えば『ここが注目ポイントです。』という文章があり『注目ポイント』だけ赤文字にしたい場合『注目ポイント』をspanタグで囲ってCSSを書けばOKです。

コードは以下のようになります。

<p>ここが<span class="red">注目ポイント<span>です。</p>

.red {
  color: red;
}

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これがもしdivタグだとこのようになります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

divタグは縦並びになる、つまり改行されてしまうのでこのようになってしまいます。

spanタグで一部の色を変える方法は以下の記事でも解説しています。

divタグとspanタグの注意点

divタグとspanタグはタグ自体に意味はないのでどこでも自由に使っていいと思われますが、いくつか注意点があります。

spanタグの中にdivタグは入れない

HTMLのルールとして、blockの要素の中にinlineの要素を入れるのはOKですが、逆はNGです。

spanタグはinlineの要素で、divタグはblockの要素なので、spanタグの中にdivタグは入れないようにしましょう。

あまり多用しない

よく『divタグの使いすぎは良くない』と言われますが、その理由の1つが『他に適切なタグがあるのにdivを使うのは良くない』ということです。

例えばリストを作るときに以下のようなコードを書いたとします。

<div>
  <div>リスト1</div>
  <div>リスト2</div>
  <div>リスト3</div>
  <div>リスト4</div>
  <div>リスト5</div>
</div>

しかしリストを作るには『ulタグ』と『liタグ』というリスト用のタグがあるので、そちらを使いましょう。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ul>

ブラウザで見た時には何も変わらなくてもタグには意味・役割があるので、その場に適したタグを使うように意識しましょう。

またspanタグも同様ですが、あまり多用すると閲覧者は問題なくても制作者としては見にくいコードになります。

なので多用してもルール上は問題ありませんが、適したタグを使って見やすいコードを意識すれば多用しないで済むようになってきます。

つまりdivタグやspanタグは『他に適したタグがない場合に使う最終手段』ということです。

かといって無理やりdivタグやspanタグを使わないようにする必要はないので、使うことに引け目を感じる必要は全くありません。

まとめ

今回の解説をざっくりまとめると以下のようになります。

どちらも非常によく使うタグなので、ぜひ使いこなせるようになりましょう。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！