span要素

span要素は、単独では意味をなさないが、特定の範囲にグローバル属性を適用させるのに便利な要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、パルパブル・コンテンツ。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フレージング・コンテンツを内包できる。
属性 グローバル属性。
ブラウザ対応

構文

<span>フレージング・コンテンツ</span>

要点

  • span要素は、単独では意味をなさないが、特定の範囲にグローバル属性を適用させるのに便利な要素である。
  • 例えば、span要素にid属性やclass属性を指定し、スタイルシートの適用範囲とすることができる。span要素にstyle属性を指定し、span要素内に適用するスタイルシートを、直接指定することもできる。lang属性を指定し、ドキュメントと異なる言語コードを、span要素内に適用することもできる。

サンプルコード

style属性

<span style="color: red;">red</span>

id属性

<span id="sample">サンプル</span>

class属性

<span class="sample">サンプル</span>

サンプル

style属性

HTMLソースコード
<p>色： <span style="color: red;">red</span> <span style="color: blue;">blue</span> <span style="color: green;">green</span></p>
実際の表示

色： red blue green

id属性、class属性

HTMLソースコード
<style scoped="scoped">
#sampleId {
	background-color: #00d7ff;
}
.sampleClass {
	background-color: #a6ff00;
}
</style>
<p><span id="sampleId">sapn要素にid属性</span>を指定しスタイルシートを適用。</p>
<p><span class="sampleClass">sapn要素</span>に<span class="sampleClass">class属性</span>を指定しスタイルシートを適用。</p>
実際の表示

sapn要素にid属性を指定しスタイルシートを適用。

sapn要素にclass属性を指定しスタイルシートを適用。