CSSの「class（クラス）」ってなんのこと

こんにちはー
CSS勉強中ブログです




CSS編集するときに大切なポイント
「class(クラス)」について勉強するよ



今日は、上級編

初心者の人は難しいからよく分からないかもしれないけど、
一歩一歩あわてずに勉強しようね

もし難しかったら、このブログの基礎編や　初級編から　ちょっとずつ勉強してみてね




｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ




で、、classってなにかっていうと
ブログのそれぞれの箇所についてる名前のことだよ


たとえば、、

前回の自分のコメントの色を変える　という記事で紹介した
このCSSを見てみて

.ownerComment{
background: lightpink ;
}

このCSSを説明すると

.ownerComment（オーナー　の　コメント）っていう箇所の、、、

background（背景）を、、、

lightpink（ライトピンク色）にする


っていうことなんだって。

ふむふむ




この例だと
classとは、

.ownerComment　これのこと

ほうほう





ってことは、

自分の改造したい箇所が、なんていうclassかが分かれば、

自分の変えたい部分のデザインを自分で変えられるってことだｎ


おお




｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ




次になんていうclassかを調べる方法を勉強してみる



（Internet Explorer8を使っている人用の解説です）



Internet Explorerでブログを開く





キーボードのF12ボタンを押すと、下に　開発者ツールが出る
※もう一回F12ボタンを押すと閉じるよ





開発者ツールの左の　矢印ボタンを押す





調べたいところを押すと、下にclassの表示がでる





この箇所はこう書いてある
class="blogComment ownerComment skinStrongBgColor"

blogComment
ownerComment
skinStrongBgColor
っていう３つのclassがついてるよ

そのうち、
自分のコメントの箇所にだけついている
ownerComment
をつかったのがこれだよ

他の二つのclassは　自分のコメントの部分以外の箇所にもつかわれているからつかわなかったよ

.ownerComment{
background: lightpink ;
}

CSSにするときは、classの前に　. をつけるよ
忘れそうだよね




｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ

.ownerComment{
background: lightpink ;
}

この組み合わせを変えることで

.ownerComment（オーナー　の　コメント）っていう箇所の、、、

background（背景）を、、、

lightpink（ライトピンク色）にする

自分でブログのデザインを改造できるよ



｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *｡.｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ




今回は上級編なので、よくわからなくても大丈夫

難しい人は、基礎や初級編から、見てみてね



むずかしい

けど、ブログの改造っておもしろい