1. ウェブ
  2. HTML
  3. リファレンス
  4. 要素
  5. <span>

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

<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;
}

属性

この要素にはグローバル属性のみがあります。

例

例 1

HTML

html
<p><span>Some text</span></p>

結果

例 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

ブラウザーの互換性

関連情報

  • HTML の <div> 要素

MDN の改良に協力

協力方法を知る

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

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