投稿日：2007年7月24日　　　レベル：初心者　　　　ソフトウェア：-

---

• Step1 ： サンプルソースA
• Step2 ： サンプルソースAの解説
• Step3 ： サンプルソースAの解説2
• Step4 ： サンプルソースB
• Step5 ： サンプルソースBの解説

今回は CSS のクラスを紹介するわけだが、コレを説明するには実際にサンプルを見てもらうのが一番手っ取り早いかもしれない。できる限り分かりやすいサンプルを用意したので、CSS ファイルに以下のコードを書いてみてださい。



見て分かると思うが、同じタグに対して属性が別々に指定されている。今回の例で言うと異なる属性が 2 つの div タグに適用されている。クラスを使用するためには、class="" 属性を使用します。

HTML ページ内で、<div class="center"> 文字列 </div> と記述すると、その文字列は中央揃えで表示されます。<div class="indent"> 文字列 </div> と記述すれば、その文字列は左側から 20 ピクセル分 詰められ、下線も引かれる。以下のような感じだ。



コードは以下のとおり。



分かっただろうか。ブラウザがページを読み込んだらまず、DIV タグがあることに気がつく、そして次にその div タグには 'center' もしくは 'indent' という名前のクラスが必要であることがわかる。するとブラウザは CSS ファイルを読みに行って、対応するクラスがあるか確認し、そのスタイルを適用するというわけだ。

こうしたクラスはどんなタグにだって適用できる。もちろん body タグにだって。

もう一つ例を見てみよう。

次は、複数のクラスを <p> タグに適用してみる。 最初にやるべきことは、各 P タグに名前をつけることだ。ピリオド "." の後に続く名前がクラスの名前になります。



'centerunderline' というクラス名がついた P タグはすべて中央揃えで下線付きになります。 CSS のコード内には、p.centerunderline と書かれているのが分かるだろう。 p と書かれた部分に続くのがクラス名となる。これを呼び出すには、HTML コード内で class="" を使用すればよい。 簡単でしょ？

もちろん、ページ内のすべてのパラグラフのスタイルを変更したければ、通常どおりの p { style style } を使用すればよいし、 クラスを使用する場合はすべて、<p class="クラス名"> と記述すればよい。

引用:Web Design Library 著者:Joseph Skidmore翻訳:五野上

スポンサードリンク