spanタグとは?|特定の範囲をグループ化する

spanタグとは?|特定の範囲をグループ化する
リンゴ
博士、<span>タグって<div>タグとどう違うんですか?
あまり違いが分からないんですが…
博士
確かに、<span>タグと<div>タグは似たような役割を持っておるが、この二つには使い方に明確な違いがあるんじゃ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<span>タグとは

 

<span>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類フロー・コンテンツ / フレージング・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容フレージング・コンテンツ


 
 
<span>タグは、特定の範囲(フレージング・コンテンツ)をグループ化する際に使用します。
この要素を指定しただけでは表示上の変化はありませんが、class属性やid属性を使ってスタイルシートを設定したい場合や、lang属性を使って言語情報を付加したい場合などに利用できます。
 
 
博士
<span>タグ自体は何も意味を持っていないんじゃ。
 
 

使用例

 
 

表示例


赤色は、英語ではRed、イタリア語ではRossoと表記します。


 
 
博士
以下のように、class属性を使ってスタイルを変更することができるぞ。

 
 

表示例

spanタグ class属性を使ってスタイルを変更した例
 
 

span要素とdiv要素の違い

span要素は、div要素と似た役割を持っていますが、この二つの要素の明確な違いは「改行が入るかどうか」です。
実際に見てみましょう。

まず、div要素を使ってテキストを表示した例です。

div要素で表示した例
div要素で表示した例
div要素で表示した例
 
 
次に、span要素を使ってテキストを表示してみます。

span要素で表示した例span要素で表示した例span要素で表示した例
 
 
違いは一目瞭然ですね。
span要素で表示した場合、div要素のようには改行されずにテキストが表示されました。
 
 
博士
改行はさせたくないが、文書の途中で一部だけスタイルを変更したいときなどに使えるぞ。
リンゴ
なるほど!
 
 

スポンサーリンク

まとめ

特定の範囲(フレージング・コンテンツ)をグループ化する際は<span>タグを使います。
 
 

博士
div要素やp要素の中で使われることが多いタグじゃ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








spanタグとは?|特定の範囲をグループ化する