Revision 522603 of span 要素

  • リビジョンの URL スラグ: Web/HTML/Element/span
  • リビジョンのタイトル: span 要素
  • リビジョンの ID: 522603
  • 作成日:
  • 作成者: yyss
  • 現行リビジョン はい
  • コメント 英語版 Nov 28, 2013 4:00:06 AM に対応。

このリビジョンの内容

概要

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

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

属性

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

例 1

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

結果

Some text

例 2

<li><span>
    <a href="portfolio.html" target="_blank">See my portfolio</a>
</span></li>

CSS:

li span {
    background: gold;
}

結果

仕様

仕様書 策定状況 コメント
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}} {{Spec2('HTML5 W3C')}} The DOM interface is now {{domxref("HTMLSpanElement")}}.
{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}} {{Spec2('HTML4.01')}}  

ブラウザ実装状況

{{CompatibilityTable}}
機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

関連情報

  • {{htmlelement("div")}}
{{HTMLRef}}

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

<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>
<ul class="htmlelt">
 <li><dfn><a href="/ja/docs/HTML/Content_categories" title="HTML/Content_categories">コンテンツカテゴリ</a></dfn> <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></li>
 <li><dfn>許可された内容</dfn> <a href="/ja/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">フレージングコンテンツ</a></li>
 <li><dfn>タグの省略</dfn> {{no_tag_omission}}</li>
 <li><dfn>許可された親要素</dfn> <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>を受け入れるすべての要素。</li>
 <li><dfn>DOM インターフェイス</dfn> {{domxref("HTMLSpanElement")}} (HTML 5 より前は {{domxref("HTMLElement")}})</li>
</ul>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>他の全ての要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p>
<h2 id="Example1" name="Example1">例 1</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="Example2" name="Example2">例 2</h2>
<pre class="brush:html;gutter:false">
&lt;li&gt;&lt;span&gt;
&nbsp;&nbsp;&nbsp; &lt;a href="portfolio.html" target="_blank"&gt;See my portfolio&lt;/a&gt;
&lt;/span&gt;&lt;/li&gt;
</pre>
<h3 id="CSS" name="CSS">CSS:</h3>
<div class="note">
 <p name="Result">li span {<br />
  &nbsp;&nbsp;&nbsp; background: gold;<br />
  }</p>
</div>
<h3 id="Result2" name="Result2">結果</h3>
<ul>
 <li><span style="background:gold">&nbsp;&nbsp;&nbsp; <a href="portfolio.html" target="_blank">See my portfolio</a></span></li>
</ul>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">策定状況</th>
   <th scope="col">コメント</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>The DOM interface is now {{domxref("HTMLSpanElement")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="See_also" name="See_also">ブラウザ実装状況</h2>
<div>
 {{CompatibilityTable}}</div>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>機能</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>基本サポート</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>機能</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>基本サポート</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
 <li>{{htmlelement("div")}}</li>
</ul>
<div>
 {{HTMLRef}}</div>
このリビジョンへ戻す