ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeHTML&CSS講座 > CSSのクラス

CSSのクラス

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


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

div.center {
text-align: center;
}


div.indent {
margin: 20px;
text-decoration: underline;
}


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

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

サンプルソースA

Step3:サンプルソースAの解説2
コードは以下のとおり。

<div class="center">この文字列は中央揃えです</div>
<div class="indent">この文字列は左から20ピクセル詰め、下線付きです</div>


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

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

Step4:サンプルソースB
もう一つ例を見てみよう。

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

p.centerunderline { text-align: center;
text-decoration: underline;
}


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

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

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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング