Tip5 Define Classes

あるタグのスタイルを指定すると、そのドキュメント中は全て有効になってしまいますので、ある部分だけは違うスタイルに指定したい場合、Inline Styles で指定しなければなりません。さらに完全を目指す場合、.CSS ファイルで指定したアトリビュートは全て上書きしてやらなければ、残ってしまう要素もあるでしょう。

そういう場合は、スタイル指定をクラスとして定義すると便利です。クラスというとオブジェクト指向のような感じがして難しそうですが、オブジェクト指向とはほぼ関係ありません（JavaScript で扱えるようになるようです）。

とりあえず簡単な例を見てみます。

　
P.doc {line-height: 150%}
P.src {line-height: 120%}
　

このように .CSS ファイルか STYLE Block で指定しておくと、<P> タグに対して doc クラスと src クラスを定義したことになります。クラス名は任意です。使い方は次のようになります。

　
<P CLASS=doc>ここは doc クラスですから line-height は 150% です。</P>
<P CLASS=src>ここは src クラスですから line-height は 120% です。</P>
<P>ここはクラスを指定していないのでデフォルトの表示です。</P>
　

ご覧の通り、<P> タグのスタイルを場合に応じて変えることが出来るのです。上の例のような指定なら、通常の文章の時は doc クラスを使って、引用やプログラム等の時は src クラスを使う、といったことができます。

上の例では、タグに対してクラスを定義しましたが、特にタグを決めなくてもクラスを定義することができます。やはり例を見ましょう。

　
.mincho {font-famiky: "ＭＳ Ｐ明朝";}
.gothic {font-family: "ＭＳ Ｐゴシック";}
　

このようにタグを特定しないでクラスを定義できます。mincho クラスはフォントを "ＭＳ Ｐ明朝" にします。gothic クラスは "ＭＳ Ｐゴシック" ですね。それで、このクラスはどのタグに対しても使用することができます。

　
<H1 CLASS=mincho>明朝の見出し</H1>
<P CLASS=gothic>ここの段落はゴシックです。</P>
　

とりあえず、いくつか良く使いそうなフォントやサイズの指定を、タグ無しのクラスとして作っておけば、本文中で簡単に切り替えられるので便利です。