<span>: コンテンツ区間要素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<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 |
ブラウザーの互換性
関連情報
- HTML の
<div>要素