Go to information

span要素

  1. span要素
  2. 指定可能属性
  3. サンプル

span要素

span要素(generic inline container)は特に意味を持っているわけではなく、行内容(インライン要素やテキスト)をグループ化(含まれた内容を一つの単位とする)し、文書に構造的意味合いを付加・補強することで文書の情報的価値を高めます。span要素がインライン(行内)レベルでのグループ化を示すのに対し、div要素はブロックレベルの範囲のグループ化を示します。div要素も span要素を単体で使用することはなく、id属性class属性を割り振ってスタイルシート(CSS)のセレクタにしたり、言語情報に関するlang属性XHTML では xml:lang属性)、書字方向に関するdir属性などを併用して効果を発揮します。

バージョン
要素型
インライン要素
開始タグ
必須
終了タグ
必須
非推奨
-
内包可能

span要素の属性

共通属性
イベント属性

span要素のサンプル

span要素は、テキスト水準のある情報をマークアップするのに HTML, XHTML に定義されている要素では適当な要素がない場合のマークアップを行うのによく用いられています。次にあげる用例が正しい・適切な使い方というわけではありませんが、その部分が何であるかを、あえて span要素を使ってマークアップすることで、その趣旨を知ることができます。

日付を示す
span.date   { font-style: italic ; }
span.sunday { color : red ; }
<p>運動会:
<span class="date">2005/09/25(<span class="sunday">Sun</span>)</span></p>
表示例

日付を示す適当な要素はないので、英数字の羅列を日付として明示するために span要素に "date" という値の class属性でマークアップし、さらに、その日が日曜日ということを目立たせるために、日曜日はカレンダーではよく赤色で表記されることから "sunday" という値の class属性で曜日部分をマークアップし、スタイルを適用するためのセレクタとしても効果を発揮します。XHTML文書であれば、XSLT を用いることで、日付情報の span要素だけを取り出したりすることも可能になります。

現在位置
  1. W3G
  2. XHTML
  3. HTML辞典
  4. span要素
ナビゲーション
ステータス情報
作者
上田 遼
公開
2005-09-27T18:15:51+09:00
更新
2008-12-29T04:27:10+09:00
URI
http://w3g.jp/xhtml/dic/span
検索