スタイルシートをDIVとＳＰＡＮで活用しよう！

スタイルシートをDIVとＳＰＡＮで活用しよう！

　スタイルシートを使いこなすには、<DIV>要素と<SPAN>要素をうまく使い分けて活用していくことが一つのポイントになります。シンプルに説明すると、以下のような使い分けになります。

複数の要素に同じスタイルを適用する<DIV>要素とは？

　ブロックレベル要素の<DIV>要素を使うと、見出しや段落など複数のタグに対して同じスタイルを適用することができます。ブログのレイアウトなどによく使われています。

文字単位でスタイルを適用する<SPAN>要素とは？

　インラインレベル要素の<SPAN>要素を使うと、主に文字や単語などの文字レベルで様々なスタイルを適用することができます。

　例えば、蛍光ペンやマーカーで線を引いたようなスタイルや白抜き文字など、アイディア次第で様々な文字装飾への活用が期待できます。

　なお、同じスタイルを複数の場所に設定する場合は、後で修正する場合の事を考えると、スタイルをタグ内部に直接書き込むよりも、下図のように<span>タグにクラス名を付けて、そのクラスにスタイルを設定し、更にそのクラス名のスタイルシートを外部スタイルシート化するのが効率的でスマートです。