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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

試してみましょう

<p> Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and <span class="ingredient">garlic</span> to a blender and blend into a paste. </p> <p> Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly. </p> 
span.ingredient { color: #f00; }

属性

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

例

例 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

仕様書

Specification
HTML
# the-span-element

ブラウザーの互換性

関連情報