　SPANとDIV

スタイルシートを使う場合、とても役に立つSPANタグとDIVタグについて説明します。
HTMLで勉強してきたタグは何かの働きを持っていましたよね。例えば、H1タグだと、太字になり文字が大きく表示されますし、H１タグに囲まれたテキストがレベル１の見出しであることを指定します。
このようにタグには何かの働きがありますが、ここで紹介するSPANタグとDIVタグは何も働きがないタグです。どうやって使うかって・・そうです。このタグにstyle属性を使ってスタイルを設定したりクラスやIDでスタイルを適用します。何も働きがないから自分の思い通りの設定をすることが可能です。
<SPAN style="color:blue;font-size:12pt">～</SPAN>のように記入すればこの中に記入された文字はフォントの大きさが12ptで青色になります。自分で指定したスタイル以外は何も効果がありません。

次に、SPANタグとDIVタグの使い分けですが、改行しない場合はSPANタグを、改行したい場合はDIVタグを使います。つまり文書の一部分のみにスタイルを設定したい場合はSPANタグを使い、まとまった文章にスタイルを設定したい場合はDIVタグを使います。

サンプル - Microsoft Internet Explorer

SPANを使えば、部分的にスタイルを設定できます。

DIVは、まとまった範囲にスタイルを設定するのに便利です。

こんなことも出来ます。

ソース

<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
<!--
iro1 {color:orange;}
iro2 {color:red;   }
  -->
</STYLE>
</HEAD>
<BODY>
SPANを使えば、<SPAN style="color:red;">部分的にスタイルを</SPAN>設定できます。

<DIV style="color:green;">DIVは、まとまった範囲にスタイルを設定するのに便利です。
</DIV>

<DIV class="iro1">こんな<SPAN class="iro2">ことも</SPAN>出来ます。</DIV>
</BODY>
</HTML>

HOME >>スタイルシート

次のページ >>