トップページ  > HTML Living Standard  > <span>

★HTML Living Standard リファレンス

<span> …… 特別な意味を付加せず範囲指定する
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<span>タグは、特別な意味を付加せずグローバル属性を指定する際などに使用します。

span要素に特別な意味はありません。 span要素は、特別な意味を付加することなくグローバル属性を指定する際などに役立ちます。

例えば、class属性でクラス名を指定したり、lang属性で言語を指定するなどの場面で、 span要素が役に立つでしょう。

div要素とspan要素の使い分け

div要素span要素の使い分けですが、 div要素は、複数の子要素をまとめてコンテンツブロックをまとめるのに便利です。 span要素は、インラインのテキストなどに対してクラス名や言語などを指定するのに役立ちます。

■使用例

以下のサンプルでは、プログラムコードの各部分にspan要素を使ってクラス名を付けています。 span要素でクラス名を付け分けると、特別な意味を付加することなくCSSで色分けできます。

HTMLソース

<style>
.lang-c {color:#666666;}
.ident {color:#00cccc;}
.keyword {color:#cc0000; font-weight:bold;}
</style>

<pre><code class="lang-c"><span class="keyword">for</span> (<span class="ident">j</span> = 0; <span class="ident">j</span> < 256; <span class="ident">j</span>++) {
  <span class="ident">i_t3</span> = (<span class="ident">i_t3</span> & 0x1ffff) | (<span class="ident">j</span> << 17);
  <span class="ident">i_t6</span> = (((((((<span class="ident">i_t3</span> >> 3) ^ <span class="ident">i_t3</span>) >> 1) ^ <span class="ident">i_t3</span>) >> 8) ^ <span class="ident">i_t3</span>) >> 5) & 0xff;
  <span class="keyword">if</span> (<span class="ident">i_t6</span> == <span class="ident">i_t1</span>)
    <span class="keyword">break</span>;
}</code></pre>
↓↓↓

ブラウザ上の表示

for (j = 0; j < 256; j++) {
  i_t3 = (i_t3 & 0x1ffff) | (j << 17);
  i_t6 = (((((((i_t3 >> 3) ^ i_t3) >> 1) ^ i_t3) >> 8) ^ i_t3) >> 5) & 0xff;
  if (i_t6 == i_t1)
    break;
}

■関連項目

  • <div> …… 特別な意味を付加せず子要素をまとめる
  • <span> …… 特別な意味を付加せず範囲指定する
  • <p> …… 段落を表す
  • <br> …… 改行を表す
  • <wbr> …… 改行箇所の候補を表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ