<span></span>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

span要素は、特定の範囲(フレージング・コンテンツ)を1つのグループとしてまとめます。(この要素自体は特別な意味を持ちません)


<span>グループ化します</span>

span要素は、主にclass属性id属性lang属性などと併せて使用することになります。

例えば、次のような用途に使用することができます。

  • class属性を使い、スタイルの適用範囲を設定する
  • id属性を使い、スクリプトの対象となる範囲を設定する
  • lang属性を使い、特定範囲の言語情報を示す

使用例

class属性を使ってスタイルを適用させた例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

span.element { color: #cc0000; }
span.attribute { color: #008040; }
span.value { color: #0080c0; }

</style>

</head>
<body>

<p>次の例では、要素を<span class="element">赤色</span>、属性を<span class="attribute">緑色</span>、値を<span class="value">青色</span>で表示しています。</p>

<pre>
<code><span class="element">&lt;p <span class="attribute">class="<span class="value">example</span>"</span>&gt;</span>サンプルテキストです。<span class="element">&lt;/p&gt;</span></code>
</pre>

</body>
</html>

表示例

次の例では、要素を赤色、属性を緑色、値を青色で表示しています。

<p class="example">サンプルテキストです。</p>
lang属性を使って言語情報を示した例

<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

span[lang] { color: #cc0000; }

</style>

</head>
<body>

<p>緑色は、英語では<span lang="en">Green</span>、イタリア語では<span lang="it">Verde</span>と表記します。</p>

</body>
</html>

表示例

緑色は、英語ではGreen、イタリア語ではVerdeと表記します。