STEP1「必要な部分に直接書く」では、STRONGタグや H1タグに STYLEの[属性]と[値]を指定する方法について説明しました。このページではSPANタグとDIVタグを使った書き方のついて説明をします。このタグを使用すれば、HTMLのタグにこだわらずに、自由な個所でスタイルを指定することができます。

(1)ではSPAN、(2)はDIVを使って書かれています。スタイルを指定した個所は「ホームページ」に対してです。スタイルの指定内容は、どちらも「青い太字」で表示すること。結果の違いが分かりますね。結果をわかり易くするために、枠で囲っておきました。

(1)のSPANでは、[ホームページ]の前後で改行されていませんね。それに対して(2)のDIVでは前後で改行がされています。DIVは<HR>や<H1>〜</H1>のタグと同じように、<DIV>〜</DIV>の前後で改行されます。SPANは<B>や<A>〜</A>のタグと同じように、<SPAN>〜</SPAN>の前後で改行されることはありません。STEP1の「必要な部分に直接書く」では<H1>などのHTMLの既存のタグにスタイルを直接指定して、効果を反映していました。しかし既存のタグ以外でも、どこでもスタイルを指示したくなります。そんなときにこのSPANやDIVタグを使うと、非常に便利です。

それでは、先ほどの表示された結果と、スタイルの指示内容を見てみましょう。

これでこのページは終わりです。STEP1の「必要な部分に直接書く」ではHTMLのタグに[STYLE="属性:値;"]の書き方で指示できること、このSTEP2「範囲の指定」ではSPANとDIVの違いについて説明をしました。この２ページだけで、スタイルシートの基本は殆ど終わりです。STEP3とSTEP4は、その応用になります。同じ指示内容を、何箇所でも何ページでも使えるようになります。それではSTEP3の「１ページ全体で使う」に進んでください。