divとspanの違い (CSS)



HTML

CSS

初回更新日:2020/9/20    

前提知識
 ・CSSの基本


■説明
divとspanはそれぞれhtmlの関数ですが、cssと組み合わせて使うことが多いです。 どちらの関数もコードをまとまりとして扱う関数ですが、それだけでは意味を持たず、フォント等を一括で指定する等に使用します。

divとspanの違いは、divは見出し単位、段落単位など、より広い範囲でまとめる事ができます。これをブロック要素といいます。 一方spanはdivより狭い範囲でまとめる事ができ、spanの中には以下を入れる事ができます。これをインライン要素といいます。 spanの中に入れられる関数はfont , img , span , bigなどがあります。

その他に、divは改行が入る、spanは改行が入らないことも両者の違いです。

■具体例
以下となります。divは改行が入り、かつ背景色がその行全てに渡っているのが解ります。

#htmlコード

私の名前は<span class="sample">太郎</span>です

私の名前は<div class="sample">太郎</div>です<br><br>

#cssコード

.sample{font-size:12px; background:orange;}

#表示結果

私の名前は太郎です

私の名前は

太郎
です




関連記事一覧



HTML

CSS