spanとdivの違いと使い方について

2021 1/31

2021.01.01 2021.01.31

トモジ

spanとdivの違いって何？
詳しく知りたい・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、spanとdivの違いに関して要点を
わかりやすく説明しております。

記事の内容

spanとdivの違いと使い方について

HTMLのタグには珍しく、
どちらも意味を持たないタグになり
スタイルを適用するために使用されます。

しかし、全く同じ特性をもつタグではないので
用途や違いに関して見ていきましょう。

spanとdivの役割

spanタグとdivタグは以下の違いがあります。

spanタグ

インライン要素でありスタイルを適用
させたい部分に使用される

divタグ

ブロックレベル要素でありスタイルを
適用させたいタグにまとめて使用される

そして、spanタグとdivタグの違いは
以下の図のようになります。

違いは図を見ていただければ一目でわかりますが、
displayの違いに関してピンとこないと方も
いるかと思いますので、次はinlineとblockの
違いに関して見ていきましょう。

インライン要素(inline)

インライン要素とは、
親要素の内容領域で行ボックスが作られます。
そして要素の高さや幅の変更ができません。

例

インライン要素に関して

<body>
  <p>こんにちは、私の名前は<span>tomoji</span>と申します。</p>
</body>

span {
  color: red;
}

出力結果

こんにちは、私の名前はtomojiと申します。

ブロックレベル要素(block)

ブロックレベル要素とは、
親要素の内容領域で横いっぱいに広がり
上から順に縦に並んで配置をします。

この要素は、CSSで高さや横幅が変更可能です。

例

ブロックレベル要素に関して

<body>
  <p>※親要素(parent-element)の横幅は50％</p>
  <div class="parent-element">
    <div>
      <p class="line1">段落1</p>
      <p class="line2">段落2</p>
      <p class="line3">段落3</p>
    </div>
  </div>
</body>

.parent-element {
  border: solid 1px #023F68;
  background-color: #95D1F3;
  width: 50%;
}

.line1 { background-color: #FB6D52;}

.line2 { 
  background-color: #EFF5B0;
  width: 50%;
}

.line3 { 
  background-color: #BBD380;
  height: 100px;
  width: 30%;
  margin: auto;
}

出力結果

※親要素(parent-element)の
横幅は50％(背景色水色)

段落1

段落2

段落3