mozilla

Revision 392089 of span 要素

  • リビジョンの URL スラグ: Web/HTML/Element/span
  • リビジョンのタイトル: span 要素
  • リビジョンの ID: 392089
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント HTML/Element/span Web/HTML/Element/span

このリビジョンの内容

概要

この要素は、何か特定のセマンティクスを表すものではない、フレージング・コンテンツの為の汎用コンテナです。CSS によるスタイリングの用途等で、要素のグループ化が必要な場合に用います。多くの場合、 class 属性id 属性lang 属性等と共に使われます。セマンティクス上で他に適切な要素がある場合はそちらを使用して下さい。

<span> は {{ HTMLElement("div") }} 要素と非常に似た役割を持っています。 {{ HTMLElement("div") }} 要素がブロックレベル要素の汎用コンテナであるのに対し、<span>インラインレベル要素の為の汎用コンテナの役割を果たします。

使用可能な場所

コンテンツカテゴリ フローコンテンツフレージングコンテンツ
許可されたコンテンツ フレージングコンテンツ
タグの省略 不可。開始タグと終了タグの両方が必要。
許可された親要素 フレージングコンテンツを受け入れる全ての要素。また、フローコンテンツを受け入れる全ての要素。
標準文書 HTML5, section 4.6.24; HTML 4.01, section 7.5.4

属性

他の全ての要素と同様に、この要素はグローバル属性を持ちます。

DOM インターフェース

この要素は HTMLSpanElement インターフェースを提供します。

<p><span>Some text</span></p>

結果

Some text

関連情報

  • {{htmlelement("div")}}
{{ HTML:Element_Navigation() }}

このリビジョンのソースコード

<h2 id="Summary" name="Summary">概要</h2>
<p>この要素は、何か特定のセマンティクスを表すものではない、フレージング・コンテンツの為の汎用コンテナです。CSS によるスタイリングの用途等で、要素のグループ化が必要な場合に用います。多くの場合、 <strong>class 属性</strong>か <strong>id 属性</strong>、<strong>lang 属性</strong>等と共に使われます。セマンティクス上で他に適切な要素がある場合はそちらを使用して下さい。</p>
<p><code>&lt;span&gt;</code> は {{ HTMLElement("div") }} 要素と非常に似た役割を持っています。 {{ HTMLElement("div") }} 要素がブロックレベル要素の汎用コンテナであるのに対し、<code>&lt;span&gt;</code> は<strong>インラインレベル要素の為の汎用コンテナの役割</strong>を果たします。</p>
<h2 id="Usage_context" name="Usage_context">使用可能な場所</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th>コンテンツカテゴリ</th>
      <td><a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">フローコンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">フレージングコンテンツ</a></td>
    </tr>
    <tr>
      <th>許可されたコンテンツ</th>
      <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">フレージングコンテンツ</a></td>
    </tr>
    <tr>
      <th>タグの省略</th>
      <td>不可。開始タグと終了タグの両方が必要。</td>
    </tr>
    <tr>
      <th>許可された親要素</th>
      <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">フレージングコンテンツ</a>を受け入れる全ての要素。また、<a href="/ja/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">フローコンテンツ</a>を受け入れる全ての要素。</td>
    </tr>
    <tr>
      <th>標準文書</th>
      <td><a class="external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element" title="http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element">HTML5, section 4.6.24</a>; <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" title="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN">HTML 4.01, section 7.5.4</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>他の全ての要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p>
<h2 id="DOM_interface" name="DOM_interface">DOM インターフェース</h2>
<p>この要素は <code><a href="/ja/docs/DOM/HTMLSpanElement">HTMLSpanElement</a></code> インターフェースを提供します。</p>

<h2 id="Examples">例</h2>

<pre class="brush:html;gutter:false">&lt;p&gt;&lt;span&gt;Some text&lt;/span&gt;&lt;/p&gt;</pre>

<h3 id="Result" name="Result">結果</h3>
<p><span>Some text</span></p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li>{{htmlelement("div")}}</li>
</ul>
<div>
  {{ HTML:Element_Navigation() }}</div>
このリビジョンへ戻す