HTML Web制作

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

2023年8月28日

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

じゅんぺいブログは、Web制作コーディングWordPress制作)の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください!
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

divタグとは?spanタグとは?

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

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

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

 

divタグとspanタグの共通点

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

 

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

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

 

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

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

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

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

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

HTMLタグの意味

  • h1タグ:大見出し
  • pタグ:段落
  • aタグ:リンク
  • divタグ:意味はなし
  • spanタグ:意味はなし

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

 

divタグとspanタグの違い

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

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

displayの初期値

  • div → display: block;
  • span → display: inline;

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

あわせて読みたい
【CSS】displayのblock・inline・inline-blockの違いを解説
【CSS】displayのblock・inline・inline-blockの違いを解説

続きを見る

 

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タグで一部の色を変える方法は以下の記事でも解説しています。

あわせて読みたい
【HTML】spanタグで一部だけフォントの色やサイズを変える方法
【HTML】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タグを使わないようにする必要はないので、使うことに引け目を感じる必要は全くありません。

まとめ

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

  • divタグ → 主に複数のタグをまとめてグループ化する時に使う
  • spanタグ → 主に一部のテキストのデザインを変える時に使う
  • spanタグの中にblockの要素は入れない
  • divタグとspanタグは他に適したタグがない場合に使う

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

以上になります。

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

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-HTML, Web制作