実行できるHTMLドキュメント: span タグ

Q: div と span の違いは何ですか？

はブロックで、新しい行から始まり横幅いっぱいに広がります。 はインラインで、テキストの行の中に収まり、幅は内容の分だけです。内容のまとまりをグループにするには div を、テキストの中の語句に印を付けるには span を使います。

Q: span に width が効かないのはなぜですか？

インライン要素は width、height、上下の margin を無視します。行の中に置いたままサイズを指定したいなら display: inline-block を、div と同じように扱いたいなら display: block を指定します。

Q: HTML で 1 つの単語だけ色を変えるには？

単語をクラス付きの span で囲み、CSS で色を付けます: word と .accent { color: #2563eb; }。一度きりなら word でも構いません。

HTML span タグとは: 文字の一部を装飾する方法と div との違い

<span> タグは汎用のインラインコンテナです。行の中の数語を囲み、改行させずにスタイルを付けたりスクリプトで扱ったりできます。使い方、div との違い、より適したタグがある場面を解説します。

このページのコードはエディタで実行できます - 編集してすぐに結果を確認できます。

著者 Kevin Spektor, Co-founder & CTO

公開日：Sep 24, 2026

span タグの役割

<span> は行の中のテキストの一部を囲み、スタイルを付けたり JavaScript から見つけたりできるようにします。<div> のインライン版で、意味も初期の見た目もなく、新しい行を始めません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; font-size: 18px; }
    .accent { color: #2563eb; font-weight: 600; }
    .tag { background: #fef3c7; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <p>Your order ships <span class="accent">tomorrow</span>, status: <span class="tag">packed</span>.</p>
</body>
</html>

文は 1 行のままで、囲んだ語句だけが変わります。

div と span の違い

2 つの目的は同じ (意味のないコンテナ) で、違うのはページ上での配置のされ方です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs span</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .line { margin-bottom: 16px; }
    .d { border: 2px solid #2563eb; }
    .s { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div class="line">Text before <div class="d">a div</div> text after.</div>
  <div class="line">Text before <span class="s">a span</span> text after.</div>
</body>
</html>

div は文を 3 行に分けてページの端まで伸び、span は文の中に収まってテキストにぴったり沿います。

	`<div>`	`<span>`
表示	ブロック	インライン
新しい行から始まる	はい	いいえ
幅	利用できる幅いっぱい	内容の幅だけ
`width`、`height`、上下の margin	適用される	無視される
中に入れられるもの	ブロックを含め何でも	テキストとインライン要素だけ
主な用途	セクション、カード、レイアウト用のラッパー	テキスト内の単語や語句

もう 1 つの違いとして、<div> は <p> の中に入れられず、入れようとするとブラウザは段落を途中で閉じます。一方 span はテキストを置ける場所ならどこにでも置けます。詳しくは div のページを参照してください。

span のスタイル: 効くものと効かないもの

色、フォント、背景、左右の padding は span にも効きます。サイズは効きません。インライン要素は width、height、上下の margin を無視します。行の中に置いたままサイズを指定するには inline-block に切り替えます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span width</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 2; }
    .box { background: #dbeafe; width: 120px; height: 40px; margin: 20px 0; }
    .ib { display: inline-block; line-height: normal; }
  </style>
</head>
<body>
  <p>Inline: <span class="box">width ignored</span> end.</p>
  <p>Inline block: <span class="box ib">120 × 40</span> end.</p>
</body>
</html>

1 つ目の span の幅は語句の分だけです。2 つ目はちょうど 120 × 40 ピクセルで、それでも文の中に収まっています。

JavaScript で span を使う

span は、カウンターやユーザー名など、スクリプトが値を入れる場所としてよく使われます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>span with JavaScript</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #count { font-weight: bold; color: #16a34a; }
  </style>
</head>
<body>
  <p>You have clicked <span id="count">0</span> times.</p>
  <button type="button">Click</button>
  <script>
    let n = 0;
    document.querySelector('button').addEventListener('click', () => {
      n++;
      document.getElementById('count').textContent = n;
    });
  </script>
</body>
</html>

変わるのは数字だけで、文の残りはそのままです。

span より適したタグがある場合

span には意味がないので、スクリーンリーダーはただのテキストとして読みます。語句に役割があるなら、その役割のタグを使い、好きなようにスタイルを付けましょう。

意味	span の代わりに使うタグ
重要なテキスト	`<strong>`
強調	`<em>`
ハイライト、印を付けたテキスト	`<mark>`
コード、ファイル名	`<code>`
キーボードのキー	`<kbd>`
日付や時刻	`<time datetime="2026-09-24">`
別の言語のテキスト	`<span lang="fr">` (span に `lang` 属性を付ける)

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save <code>index.html</code>.</p>
<p>This step is <strong>required</strong>, and <mark>the deadline is Friday</mark>.</p>
<p>She said <span lang="fr">merci</span> and left.</p>

<strong>、<b>、<em>、<i> の違いは太字のページで解説しています。

よくある間違い

普通の span に width を指定する。 無視されます。display: inline-block を使いましょう。
span の中に div や段落を入れる。 無効な HTML で、行が崩れます。外側の span を div に変えましょう。
クリックできる span。 div と同じく、onclick を付けた span にはキーボードで到達できません。<button> かリンクを使いましょう。
スタイルのたびに span を使う。 段落やセクション全体にスタイルが必要なら、テキストを span で囲まずに <p> やコンテナ自体にクラスを付けましょう。

よくある質問

HTML の span とは何ですか？

<span> は汎用のインラインコンテナです。1 つの単語など、テキストの行の一部を囲み、CSS や JavaScript から扱えるようにします。それ自体に見た目や意味はありません。

div と span の違いは何ですか？

<div> はブロックで、新しい行から始まり横幅いっぱいに広がります。<span> はインラインで、テキストの行の中に収まり、幅は内容の分だけです。内容のまとまりをグループにするには div を、テキストの中の語句に印を付けるには span を使います。

span に width が効かないのはなぜですか？

インライン要素は width、height、上下の margin を無視します。行の中に置いたままサイズを指定したいなら display: inline-block を、div と同じように扱いたいなら display: block を指定します。

HTML で 1 つの単語だけ色を変えるには？

単語をクラス付きの span で囲み、CSS で色を付けます: <span class="accent">word</span> と .accent { color: #2563eb; }。一度きりなら <span style="color: #2563eb">word</span> でも構いません。

span の中に div を入れられますか？

入れられません。span に入れられるのはテキスト、リンク、画像、他の span などのインラインの内容だけです。span の中の div もブラウザは表示しますが、無効な HTML で行が崩れるので、外側の要素を div に変えましょう。