HTMLタグには色々ありますが、divタグとspanタグの違いや使い方がイマイチ分からないという人はいると思います。
そこで今回はdivタグとspanタグの意味と違いについて解説していきます。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
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の違いを解説
続きを見る
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タグで一部だけフォントの色やサイズを変える方法
続きを見る
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タグは他に適したタグがない場合に使う
どちらも非常によく使うタグなので、ぜひ使いこなせるようになりましょう。
以上になります。