【HTML】divとspanタグの違いを簡単に解説します

divタグとspanタグって何がどう違うの？誰か教えて。

こういった疑問に答えます。

こんにちは、リバティエンジニアのFUNA（フナ）です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回は、HTMLの<div>タグと<span>タグの意味やそれぞれの違い、使い分け方を解説します。

初心者の方でも分かるように、サンプルコードもあるので参考にしてください。

HTMLにおける<div>と<span>タグの意味は？

まずはこの２つのタグの意味についてみていきましょう。

これらはどちらもHTMLの「タグ」と呼ばれるものです。

それぞれ<div>〜</div>や、<span>〜</span>というような書き方をします。

どちらも基本的には、その要素のデザインを変えたいときなどに使います。

基本的に「タグ」は下記のような様々な働きを持っています。

ですが<span>と<div>タグは、上記のタグなどと違い、このタグ単体では特に何も役割はありません。

つまり、何もしないただの要素なのです。

<div>タグと<span>タグの役割

例えば、下のサンプルコードのように複数のタグを<div>タグではさみ、2つに分けてみます。

<div class="example1">
    <p>こんにちは</p>
    <p>これは例文です</p>
</div>
<div class="example2">
    <p>こんばんは</p>
    <p>これも例文です</p>
</div>

それぞれの<div>タグのclass名を”example1”、”example2”としました。

このように<div>タグで2つに分けて、ブラウザに表示したとしても変化はありません。

ですが、このHTMLにCSSを使ってデザインの見た目を変えてみます。

ここで<div>タグごとにデザインを変えることができるのです。

実際にサンプルコードを見てみましょう。

.example1 {
    /* 幅を40pxに */
    width: 40px;
    /* 高さを200pxに */
    height: 200px;
    /* 背景色をオレンジに */
    background: orange;
}

.example2 {
    /* 幅を10pxに */
    width: 10px;
    /* 高さを500pxに */
    height: 500px;
    /* 背景色を青色に */
    background: blue;
}

このように先ほどのHTMLにCSSでデザインを変えると、<div>でくくったクラスごとにデザインすることができます。

【HTML】divとspanタグの違いとは

では、<div>タグと<span>タグの違いは何なのでしょうか。

先程は<div>タグでサンプルコードを記述しましたが、下記のように<div>を<span>に変えても結果は同じになります。

<span class="example1">
    <p>こんにちは</p>
    <p>これは例文です</p>
</span>
<span class="example2">
    <p>こんばんは</p>
    <p>ここも例文です</p>
</span>

 <div>と<span>の違いとは？

少しだけ難しく解説すると、「2つタグの違いはdisplayというCSSのプロパティの値の違い」なのです。

<div>タグは「display: block」となっているのに対し、<span>タブは「display: inline」となっています。

この「display」プロパティが違うことで、<div>タグと<span>タグでは様々な違いがでてきます。

逆に言ってしまうと、<div>タグに対して”display:inline”を指定すれば、<span>タグと同じ働きをさせることができます。

【divとspanの違い】幅と高さを指定できるかどうか

<div>タグはCSSで幅（width）と高さ（height）の指定ができます。

ですが、<span>タグは幅と高さを指定しても反映されません。

【divとspanの違い】前後に改行が入るかどうか

<span>タグでは前後に改行が入ることはありません。

ですが、<div>タグではそのまとまりの前後に改行が入ります。

【divとspanの違い】spanは文字の装飾などに最適！

前後に改行の入らない<span>タグでは文章の一部分だけ文字色を変えたり、その文字に下線を引いたりしたいときに便利です。

実際に使ってみてみましょう！

<p>HTMLで<span class="blueText">spanタグについて</span>学んでみよう！</p>

/* blueTextというクラス名に対して */
.bluetext {
    /* 色を青色 */
    color: blue;
    /* 太字 */
    font-weight: bold;
}

このように"class"や"id"と合わせて上手に使えば、自分が変更したい好きな部分の装飾だけを変えることができます。

divやspanは何回でも使ってもいいの？

どちらのタグも複数回、何度使用しても問題ありません。

「<div>タグの中の<div>タグの中の<div>タグ…」というのも全然OKになります。

ですが、<div>タグは複雑なレイアウトやデザインのものを作るときに、つい多用してしまいがちになります。

コードの見やすさを管理のしやすさを保つために、なるべく使う数を減らしたほうがよいかもしれません。

【HTML】<div>と<span>タグのまとめ

今回はHTMLにおける<div>タグと<span>タグについて、初心者の方でもわかりやすいようにサンプルコードを使って解説しました。

そもそも<div>タグと<span>タグとはなにか？使い方は？違いは？

このようなよくある質問や疑問点を解説しています。

<div>タグと<span>タグは、ウェブデザインをするうえで避けることができない重要なタグです。

今回勉強した内容を少しでも、なんとなくでも頭の片隅に入れておくことをおすすめします！

>> ~はじめてのCSS~ プロパティについて

関連記事