classセレクタ

TOPページに戻る > CSS

スポンサード リンク

classセレクタ

htmlをCSSでデザインするために使うセレクタです、classセレクタで指定してスタイルを適用させることができます
基本的にhtmlは構造的な枠組みを作りますが、cssはスタイルやデザインをを指定するために使います
classセレクタは特徴として同じページに何度も同じセレクタが使えるので便利です

使い方

要素名.class名 { プロパティ : 値; }

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

p要素にredとゆうクラス名を付けた場合の使い方
p.red { プロパティ : 値; }

要素なしのクラス名だけでも指定できます(この場合、他のhtml要素にredとゆうクラス名をつければその要素のスタイルが変更できます)
.red { プロパティ : 値; }

クラス名に使える文字は半角英数字とハイフン「- 」、アンダーバー「_ 」などです
良い例、
.sanple5
.sample_1
.sample-2

※ハイフンとアンダーバーは最初と最後には使えません
※数字は最初につけることができません
できない例、
.5sample
.-sample
._sanple

実際の指定方法

cssファイル (文字の色を赤に変更)

p.red { color: red; }

html部分 (redクラスの場所を指定)

<p class="red">classセレクタ</p>

実際の表示

classセレクタ


複数のプロパティの指定
セミコロン( ; )で区切れば何個でもプロパティをつけることができます。次の例は文字の大きさ、色をしています。sampleとゆうクラス名をつけました

.sample { font-size: 1em; color: red; }

下記のように改行を入れて見やすく表示することもできます
.sample { 
 font-size: 1em;
 color: red; 
 }




(C)2012 ホームページ作成無料