HTMLのdivとspanの違いをわかりやすく解説

HTML div と span の違いとは？

HTMLを書いていると必ず出てくる <div> と <span>。どちらも「意味を持たない汎用タグ」ですが、使い方が異なります。

一言で言うと、

ブロック要素とインライン要素の違い

HTMLの要素は大きく2種類に分かれます。

👉 HTMLとCSSの違いも参考にしてください。

divの使い方

<div> は複数の要素をグループ化して、CSSでまとめてスタイルを当てるときに使います。

<div class="card">
  <h2>カードのタイトル</h2>
  <p>カードの説明文が入ります。</p>
  <a href="/detail/">詳しく見る</a>
</div>

class="card" をつけることで、CSSで .card としてまとめてスタイルを当てられます。

spanの使い方

<span> は文章の一部だけにCSSを当てたいときに使います。

<p>プログラミングは<span class="highlight">楽しい</span>です。</p>

.highlight {
  color: #0d9488;
  font-weight: bold;
  background-color: #f0fdf4;
  padding: 2px 6px;
  border-radius: 4px;
}

「楽しい」という部分だけに色と背景色がつきます。

🔥 inputタイプ一覧で実践してみましょう。

使い分けのポイント

• 複数の要素をまとめてレイアウトを組む → <div>
• 文章の一部だけにスタイルを当てる → <span>
• 意味のある構造を作る → セマンティックタグ（<section>・<article> など）を優先する

💡 HTMLテーブルの作り方で基礎を確認できます。

divとspanの使い分け

divとspanはどちらも「意味を持たない汎用的なタグ」ですが、使い方が違います。

divはブロック要素です。ブロック要素は横幅いっぱいに広がり、前後に改行が入ります。複数の要素をまとめてグループ化するときに使います。カードやセクション、レイアウトの箱として使うことが多いです。

spanはインライン要素です。インライン要素は文章の中に埋め込まれ、前後に改行が入りません。文章の一部だけにスタイルを当てたいときに使います。たとえば「この単語だけ赤くしたい」というときにspanで囲みます。

迷ったときの判断基準はシンプルです。「複数の要素をまとめる箱」ならdiv、「文章の一部を装飾する」ならspanを使いましょう。

divの実践的な使い方

divはレイアウトを組むときに欠かせません。よく使うパターンを紹介します。

パターン1：カードを作る

divにクラスをつけて、CSSで背景色、余白、角丸、影を設定すると、カード風のデザインが作れます。プロフィールカードや商品カードなど、情報をまとめて表示するときに使います。

パターン2：横並びのコンテナ

divを親要素にして、CSSでdisplay: flexを指定すると、中の要素が横並びになります。ナビゲーションバーやカードの横並びに使います。Flexboxの詳しい使い方は「CSSフレックスボックス入門」で学べます。

パターン3：セクションの区切り

ページの各セクション（ヘッダー、メイン、フッターなど）をdivで囲んで、それぞれにクラスをつけます。セクションごとに背景色や余白を変えられます。

ただし、セクションの区切りにはdivよりもセマンティックタグ（header、main、footer、sectionなど）を使うほうが正しいHTMLです。セマンティックタグについて詳しくは「セマンティックタグとは」で学べます。

spanの実践的な使い方

spanは文章の一部を装飾するときに使います。

使い方1：特定の単語だけ色を変える

文章の中で強調したい単語をspanで囲み、CSSでcolorを指定します。strongタグとの違いは、spanには意味がないことです。見た目だけ変えたいときはspan、重要な意味を持つ言葉にはstrongを使いましょう。

使い方2：アイコンの横にテキストを配置する

アイコン画像の横にテキストを置くとき、テキスト部分をspanで囲むことがあります。CSSで位置を微調整するときに便利です。

使い方3：文字数カウンターの表示

「あと○文字入力できます」のような動的なテキストを表示するとき、数字の部分をspanで囲みます。JavaScriptでspanの中身だけを書き換えれば、文字数がリアルタイムで更新されます。

divとspanを使いすぎないために

divとspanは便利ですが、使いすぎるとHTMLが読みにくくなります。「div地獄」と呼ばれる状態です。

使いすぎを防ぐコツは、まず「このタグに意味はあるか？」と考えることです。ナビゲーションならnavタグ、記事ならarticleタグ、補足情報ならasideタグなど、意味を持つタグがあればそちらを使いましょう。

意味を持つタグがない場合にだけ、divやspanを使います。「レイアウトのためだけの箱」や「装飾のためだけの囲み」がdivとspanの正しい使い方です。

divとspanはHTMLの中で最もシンプルなタグですが、使い方を間違えるとコードが読みにくくなります。「意味のあるタグを優先し、意味がないときだけdiv・spanを使う」というルールを守れば、きれいで保守しやすいHTMLが書けるようになります。

まとめ

divとspanを使いこなすと、CSSでのレイアウトや装飾が自由にできます。レッスンでさらに詳しく学んでみましょう。