どんなタグ？
特定の範囲でスタイルを変更する場合に
<span>タグを使う。

<p>
 私は最近、<span>WEBデザイン</span>を勉強しています。
</p>

span {
 color:red;
} 

span(スパン)要素は、タグ自身に特に意味や役割を持っていません。
特定の箇所を<span> 〜 </span> タグで挟みグループ化してスタイルを変更する際に使用します。

どのカテゴリに属しているの？

spanタグは フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。

梱包できるタグは？

spanタグに梱包できるタグ（コンテンツ・モデル）は、フレージング・コンテンツです。
つまり、フレージング・コンテンツというカテゴリに属しているタグなら梱包可能です。

文章の一部でスタイル変更したい時によく利用します！

どうやって使うの？
スタイルを変更したい箇所を、
<span> タグで挟んで使います。

spanタグはスタイルを変更したい箇所を<span> 〜 </span>で挟むだけです。

spanタグはインライン要素で文章の一部を変更する場合に利用します。見出し、段落、リスト、フォームなど、まとまった単位でスタイルを変更したい場合はブロック要素であるdivタグを使用します。

使い方

<span>スタイルを変更したい文字</span>

<p>
 abcd<span>efg</span>hij
</p>

span {
 color:red;
 font-size:30px;
} 

どこでも使えるの？

spanタグは フレージング・コンテンツ が配置できるところならどこでも使えます。

気をつけることは？

spanタグはインライン要素なので、デフォルトでは前後に改行が入らないので注意してください。

一部テキストのフォント調整や文字色、背景色の変更などによく利用します。

使える属性は？
グローバル属性のみ使えます。

<span> タグには、どの要素にでも使えるグローバル属性のみ使えます。

使えるのはグローバル属性のみです。

サンプルが見たい
<span>タグを使ったサンプルを
いくつか紹介。

<span> タグを使ったサンプルを紹介します。

<p>
 重要なのは<span>辞めないこと</span>です
</p> 

span {
 color:yellow;
} 

<p>
 重要なのは<span>辞めないこと</span>です
</p> 

span {
 font-style:italic;
} 

汎用的に利用できるタグです

デフォルトスタイルは？
特にありません。

span要素にデフォルトスタイルは、ありません。

対応ブラウザは？
基本的にどのブラウザでも大丈夫。

<span>タグは主に以下のブラウザが対応しています。

Internet Explorar

Internet Explorar 有り

Edge

Edge 有り

Google Chrome

Google Chrome 有り

Firefox

Firefox 有り

Safari

Safari 有り

Opera

Opera 有り

どのブラウザでも問題ありません。