<span>: コンテンツ区間要素 - HTML | MDN

サイドバーを切り替え

配色

OS のデフォルト
ライト
ダーク

日本語

言語を記憶もっと知る

<span>: コンテンツ区間要素

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

<span> は HTML の要素で、記述コンテンツの汎用的なインラインコンテナーであり、何かを表すものではありません。スタイル付けのため（class または id 属性を使用して）、または lang のような属性値を共有したりするために要素をグループ化する用途で使用することができます。他に適切な意味的要素がない時にのみ使用してください。 <span> は <div> 要素ととても似ていますが、 <div> がブロックレベルの要素であるのに対し、 <span> はインラインレベルの要素です。

試してみましょう

<p>
  ミキサーに<span class="ingredient">バジル</span>、<span class="ingredient">松の実</span>、<span class="ingredient">ニンニク</span>を追加し、ペースト状になるまで混ぜ合わせます。
</p>

<p>
  ブレンダーを低速で回しながら、<span class="ingredient">オリーブオイル</span>を少しずつ加えてください。
</p>

span.ingredient {
  color: red;
}

HTML

html

結果

例 2

HTML

html
<li>
  <span>
    <a href="portfolio.html" target="_blank">See my portfolio</a>
  </span>
</li>

CSS

css
li span {
  background: gold;
}

結果

技術的概要

コンテンツカテゴリー許可されている内容タグの省略許可されている親要素暗黙の ARIA ロール許可されている ARIA ロール DOM インターフェイス

フローコンテンツ, 記述コンテンツ

記述コンテンツ

なし。開始タグと終了タグの両方が必須です。

記述コンテンツを受け入れるすべての要素、またはフローコンテンツを受け入れるすべての要素。

対応するロールなし

すべて

HTMLSpanElement

仕様書

HTML
# the-span-element

ブラウザーの互換性

ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。

MDN の改良に協力

このページは役に立ちましたか？

はいいいえ

協力方法を知る

このページは MDN の貢献者によって 2026年4月18日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

<span>: コンテンツ区間要素

目次

試してみましょう

属性

例

例 1

HTML

結果

例 2

HTML

CSS

結果

技術的概要

仕様書

ブラウザーの互換性

関連情報

MDN の改良に協力