アーカイブ [2010年12月分] |
|
2010年12月10日(金) |
|
クラス【CSS】
年末の忙しさにかまけて、12月3日分の記事をスキップさせていただきました。スキップした分は、また時間ができたときの記事で挽回していきますのでよろしくお願いします。
さて、前回取り上げたIDを用いて複数の要素部分に対して同様のスタイルを適用したい場合には、それぞれに個別にID名とスタイル文を記述しなければならず面倒です。
そこで、今回取り上げるクラスを使えば、グループ毎のスタイルの設定が可能で、特定の要素に対してクラス名をつけた部分にだけ同一のスタイルを適用させることができます。
※ |
このような性質上、IDよりもクラスは使う機会が多くなるでしょう。(なぜなら、当面、使う箇所が一ケ所であったとしても、クラスにしておくことで、後で追加された情報にそのスタイルを適用させたい状況が現われた場合に、要素にプロパティのみを追加するだけでスタイルを適用できるからです。) |
【クラス定義記述例】
一見して、ID定義と同じように思われた方もおられると思いますが、セレクタの部分の先頭の記号が#(ハッシュ)ではなく、.(ピリオド)になっています。
もちろん、複数のスタイルを{}の間に記述することができます。
クラスには任意の名前を付けることができますが次の決まりがあります。
- 使用できる文字は、半角英数字、ハイフン(
- )、※アンダーバー(
_ )。
- 先頭文字はアルファベットのみ。(先頭に数字や記号は不可)
- 大文字と小文字は別の文字とみなされる。
※ |
クラス名にアンダーバー(
_ )を含めると、ブラウザによってはクラスが正しく認識されないことがあるようで、避けた方が無難です。 |
【クラスの設定】
特定の要素(タグ)にクラスをプロパティとして加えれば、前述のクラス定義を適用させることができます。
各要素のタグ内にプロパティを加え、上の例のように、class="クラス名"という形式で記述します。呼び出し側には.(ピリオド)は記述しません。
例の記述により、この段落にのみクラス(example2)で定義したスタイルが適用されます。(他の<p>タグには影響を及ぼしません。)
このようにIDとクラスは考え方も記述の仕方もほとんど同じで、違うのは定義文での#(ハッシュ)と.(ピリオド)の部分だけで、この一文字によって、一つに対して適用されるIDになるか、グループに対して適用されるクラスになるかの違いが生じます。
詳細はクラスで説明します。
※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。
|