目次 [ close ]
  1. はじめに
  2. divとspanの一番の違いは「ブロック要素」か「インライン要素」か
  3. divの使い方（レイアウトのまとまりを作る）
  4. spanの使い方（文章の一部を装飾する）
  5. 初心者がやりがちな間違い
  6. divを書く前に「意味のあるタグ」を一呼吸考える
  7. spanの実用シーン
  8. まとめ

はじめに

HTMLを学び始めると必ず出てくる <div> と <span>。「どちらも"囲むだけ"のタグに見えるけど、何が違うの？」と迷いますよね。実はこの2つ、見た目は似ていても役割がはっきり分かれています。この記事を読めば、違い・使い分け・初心者がやりがちな間違いまでスッキリ理解できますよ！

divとspanの一番の違いは「ブロック要素」か「インライン要素」か

ひとことで言うと、ここが全てです👇

  • div＝ブロック要素：横幅いっぱいに広がり、前後で改行される。レイアウトの"箱"
  • span＝インライン要素：文章の一部だけを囲む。改行されない

divの使い方（レイアウトのまとまりを作る）

div は、カードやセクションなどコンテンツのまとまりを作るときに使います。

<div class="card">
  <h2>商品名</h2>
  <p>商品の説明テキストが入ります。</p>
</div>

このように関連する要素をまとめると、CSSでまとめて装飾・配置できて便利です。

spanの使い方（文章の一部を装飾する）

span は、文中の一部分だけを指定したいときに使います。

<p>送料は<span class="text-red">無料</span>です。</p>
.text-red {
  color: red;
  font-weight: bold;
}

「無料」の部分だけ赤く太字にできました。文の流れを崩さず一部だけ装飾できるのが span の強みです。

初心者がやりがちな間違い

  • ❌ spanに幅や高さを指定しても効かない → インライン要素だからです。サイズを指定したいなら div を使うか、display: inline-block; を足しましょう
  • ❌ divの入れ子地獄 → 何でもdivにせず、意味のある <section> <nav> なども検討すると、見やすく・SEOにも有利です

divを書く前に「意味のあるタグ」を一呼吸考える

divは便利ですが、何でもdivにすると“div地獄”になり、後から読み返したときに役割が分からなくなります。私は今、divを書く前に「これは<section>や<nav>、<article>で表せないか？」と一呼吸置くようにしています。

意味のあるタグ（セマンティックHTML）を使うと、検索エンジンが構造を理解しやすくなり（SEO）、読み上げソフトにも優しい（アクセシビリティ）というメリットがあります。装飾目的のグルーピングだけdivに任せる、というイメージです。

spanの実用シーン

  • 文章の一部だけ色やサイズを変える（例：価格の数字だけ強調）
  • アイコンフォントの表示枠（<span class="icon">）
  • JavaScriptで文字の一部だけ動かす・差し替えるときの目印

「文章の流れを止めずに、一部だけ手を加えたい」——そんなときがspanの出番です。

まとめ

  • div＝ブロック要素（箱・レイアウト）、span＝インライン要素（文章の一部）
  • 幅・高さを指定したいなら基本は div
  • 迷ったら「領域ならdiv、文字の一部ならspan」と覚えればOK！

HTML/CSSの「なんで動かないの？」を一つずつ潰していくと、制作スピードがぐっと上がります。もし学習や制作で詰まったら、ポートフォリオやココナラものぞいてみてくださいね。