<span>

<span>テキストの一部</span>

<!-- classやidを指定してCSSやJavaScriptと連携 -->
<p>価格は<span class="price">1,980円</span>です。</p>

sample_span.html

<!-- テキストの一部に色を付ける -->
<p>特別価格：<span class="price">980円</span>（税込）</p>

<!-- テキストの一部をハイライト表示 -->
<p>この機能は<span class="highlight">最新バージョン</span>で追加されました。</p>

<!-- バッジラベル -->
<p>JavaScript <span class="badge">ES2023</span></p>

<!-- JavaScriptで書き換えるターゲットとして使う -->
<p>現在の時刻：<span id="clock"></span></p>
<script>
  document.getElementById('clock').textContent = new Date().toLocaleTimeString();
</script>

<!-- インラインスタイルで一部だけ装飾 -->
<p>エラーコード：<span style="color: red; font-weight: bold;">404 Not Found</span></p>

<!-- 単位のスタイルを文字と分けて管理 -->
<p>ダウンロード速度：<span class="value">128</span><span class="unit">Mbps</span></p>

インライン要素なので文の流れを保ったまま、特定の部分がspan要素でグループ化されて表示されます。

サンプルページはこちら

『span』は『div』のインライン版といえる存在です。『div』がブロックレベルの汎用コンテナであるのに対し、『span』はインラインの汎用コンテナです。文章の流れを崩さずに一部分だけを装飾したり、JavaScriptで操作したりする際に活躍します。

『span』自体には視覚的なスタイルも意味も持ちません。CSSや『class』属性と組み合わせて初めて効果が出る要素です。テキストの一部を赤くしたい、特定の単語を太字にしたい、文字列をJavaScriptで動的に書き換えたいといった場面でよく使われます。

意味のある装飾には意味のある要素を優先して使用してください。強調したい場合は『strong』や『em』、コードを示す場合は『code』など、内容に合ったセマンティック要素が用意されています。それらでは対応できない汎用的なケースに『span』を使います。

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

15 以降 ○

14 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

4 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

『<span>』は『id』や『class』を付けておくことで、JavaScriptから特定のテキスト範囲を動的に操作できます。

<!-- カウンター表示の更新 -->
<p>残り <span id="count">10</span> 秒</p>

<!-- ハイライト対象のキーワード -->
<p>このサイトでは<span class="keyword">HTML</span>と<span class="keyword">CSS</span>を学べます。</p>

<script>
  // 特定のspanのテキストを更新する
  var countEl = document.getElementById('count');
  var count = 10;
  var timer = setInterval(function() {
    count--;
    countEl.textContent = count;
    if (count <= 0) {
      clearInterval(timer);
      countEl.textContent = '終了';
    }
  }, 1000);

  // クラス名でspan要素を全て取得してスタイルを変更する
  var keywords = document.querySelectorAll('.keyword');
  for (var i = 0; i < keywords.length; i++) {
    keywords[i].style.backgroundColor = '#fff3cd';
    keywords[i].style.padding = '0 2px';
    keywords[i].style.borderRadius = '3px';
  }
</script>

また、ユーザーの操作に応じてクラスを切り替えることで、スタイルを動的に変化させることもできます。

<span class="status" id="statusBadge">オフライン</span>
<button id="toggleBtn">切り替え</button>

<script>
  var badge = document.getElementById('statusBadge');
  var btn = document.getElementById('toggleBtn');

  btn.addEventListener('click', function() {
    // classList.toggle でクラスのON/OFFを切り替える
    badge.classList.toggle('online');
    badge.textContent = badge.classList.contains('online') ? 'オンライン' : 'オフライン';
  });
</script>

<style>
  .status { padding: 2px 8px; border-radius: 4px; background: #ccc; }
  .status.online { background: #4caf50; color: white; }
</style>