【初心者向け】divとspanの違いを理解しよう！使い分けを分かりやすく解説！

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

divとspanの違いと使い方について解説していきます。HTMLを書いている際にdivとspanを使用する場面が多いかと思います。

divとspanは使用場面は多いけど、どんな違いがあるのか理解できていない…なんて思っているかと思います。

• そう言われると違いについてはハッキリとは分からない…
• 使い分ける必要があるの？
• 使い分け方が分からない…

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、フロントエンドエンジニア・マークアップエンジニアとして、主にWebサイトを作成しています。

この2つのタグについては、意味を持たないタグとされており、特にこの2つに関しての違いをはっきりと理解できていない方も多いかと思います。

HTMLを書いていく上で、必ずと言っていいほどdivタグとspanタグを使用します。

それぞれのタグの特徴と、使い分けを理解することによって、更に効率良くHTMLを書けるはずです！

ここでは、上手く使い分けをできていなかったり、それぞれ2つのタグの特徴を理解できていない方へ、分かりやすく解説していこうと思います！

1 divとspanについて

divとspanについてHTMLでよく使われるタグになります。この2つの違いについての前に、まずはdivとspanについてそれぞれについて理解しましょう。

divとは？

divタグとは、「division（ディヴィジョン）」の略で直訳すると、分割、分配、部分、区切りなどの意味になり、それだけでは特に意味を持たないタグです。

divタグで囲った部分をブロック要素としてまとめて扱うことができるようになるタグになります。

例えば、h1タグは見出しに使用するタグで、pタグであれば文字の段落を区別するためのタグになりますが、divはそのような意味は特になく、それらをブロック要素（グループ）にするために使用するタグです。

何のためにグループにするのかと言いますと、CSSでレイアウトを整えるためにグループ化します。

h1タグと、pタグの背景を一緒の背景色にしたいとなった場合に、divタグでブロック要素にして一括で背景色を変えることができ、効率化にもなり書くコードの量を減らすことができます。

spanとは？

spanタグとは、spanを直訳すると、長さ、距離、期間、時間などの意味になり、divタグと同じくこれだけでは特に意味を持たないタグです。

spanタグで囲った部分を主にデザインやレイアウトを変えるために使用するタグです。

例えば、pタグの中で、「一部分の文字を赤色にしたい！」と言った場合に、pタグの中の赤文字にしたい部分をspanタグで囲み、CSSで赤色にしたりする場合に使用します。

要するに、その要素全体に使用するのではなく、一部分のみの見た目を変えたい場合に使用します。

divとspanの違い

それぞれ2つのタグの意味を簡単にですが理解できたかと思います。

どちらも、それだけでは特に意味を持たないタグで、どちらも一緒じゃんなんて思うかもしれません…。

実は、大きな違いがあります！

ここからは、専門的な説明にはなりますが、この2つのタグには、「display」というCSSのプロパティの値の違いがあります。

あとは、改行されるかの違いです。divは改行されますが、spanは要素の終わりで改行がされません。

• display: inlineの特徴として下記3点記載致します。
  • 前後に改行が入らない。
  • 幅、高さ、余白を指定できない。
  • display: inlineの要素しか中に入らない。spanの中にdivを入れない。

スポンサーリンク

2 divとspanの使い分け

ここまで、divとspanの違いを解説してきました！

上記でも述べましたが、divは、複数のタグをdivで囲み、ブロック要素にしたい場合に使用します。spanは、タグの一部分をspanで囲み、その部分だけ見た目を変えたい場合に使用します。

次は実際に使用するために使い分けを理解しましょう。最初にdivの使い方、次にspanの使い方をご説明していきます。

divの使用例

例として、実際のdivを使用してのHTMLを下記にて記載しています。

<div>ボックス1</div>
<div>
　<p>ボックス2</p>
　<p>ボックス3</p>
</div>

上記の図のように縦に「ボックス1、ボックス2、ボックス3」と表示される仕組みになっています。

spanの使用例

例として、実際のspanを使用してのHTMLを下記にて記載しています。

<span>ボックス4</span>
<span>ボックス5</span>
<span>ボックス6</span>

上記のように横に「ボックス4、ボックス5、ボックス6」と表示される仕組みになっております。

実際にHTMLで表示させてみると、図のようにわかりやすいかと思います。

divとspanはどちらも複数回使用しても問題ありません。「divの中にdiv…そしてその中に更にdiv」みたいに使用しても問題ありません。

divとspanタグはデザインが複雑なればなるほど、使用回数が増えていきます。

コードの見やすさを保つためには、なるべく使用回数を減らすことがスマートだとされておりますので、そこの部分も意識してコーディングしていきましょう！

3まとめ

今回は、divタグと、spanタグについて解説しました！

HTMLを書く時に必ずと言っていいほど使用するタグです。

私もそうですが、なんとなくそれぞれのタグの意味を理解しないまま使用している方が多いとかと思います。

この知識はコーダーにとって、知っておいて損ではないので、これからHTMLを書く方は、ぜひこちらの記事を参考に、この2つのタグを理解した上で上手に活用していきましょう！