CSS

質問

現在CSSを猛勉強中なのです。

いろんな参考書をみているのですが、CSSで
クラス
ID
プロパティ
セレクタ
属性値
などの言葉がでてきますよね？
div#out { …
p.topb {　…
などに対応しているのだと思いますが、理解に苦しんでいます。
この疑問のお答えや、何か上手にまとめてあるサイトなどあれば教えていただけないでしょうか？

回答No.4

NTJ · ベストアンサー

・エレメント
開始タグで始まり、終了タグで終わる、表示の単位のこと。

・クラス
開始タグに、class="AAA" という形で指定する。
CSS内では、
A.AAA {color:red;}
の形で指定する。
この場合『Aエレメントのうち、AAAというクラスを指定したものについて』という意味になる。
.AAA {color:red;}
という形で指定した場合は、『全てのエレメントのうち、AAAというクラスを指定したものについて』という意味になる。
クラスは同じ指定を複数のエレメントに指定できるので、この方式がCSSの基本になるでしょう。

・ID
開始タグに、id="AAA" という形で指定する。
CSS内では、
#AAA {color:red;}
の形で指定する。
この場合『IDがAAAであるものについて』という意味になる。
A#AAA {color:red;}
という形で指定した場合は、『Aエレメントのうち、IDがAAAであるものについて』という意味になるが、
規約上、ドキュメント上に同じIDを持ったものが複数有ってはいけないので、あまり意味がないですね。
IDは、画面中に一個しか出てこない項目に対して指定するので、複数ページで同フォーマットを使う場合によく見かけます。

・セレクタ
上記の、A.AAA とか #AAA みたいな部分のこと。乱暴に言えば、名札みたいなもの（？）
上記の「クラス指定セレクタ」「ID指定セレクタ」の他、

A {color:red;}
のような「タグ名指定セレクタ」とか、（『Aエレメント全部について』）

A:link {color:red;}
のような「定義済みクラスセレクタ」、（『Aエレメント全部について、まだ読み込んでないリンクの場合』って意味。）

H1 A {color:red;}
みたいな、「状況依存セレクタ」なんてのもあります。
この場合、『H1エレメントの中にあるAエレメント全部について』という意味になります。

また、セレクタを複数指定したい場合には、
A.AAA , B.AAA {color:red;}
って具合に , で区切ります。

H1 A,#AAA {color:red;}
と書くと、『H1エレメントの中にあるAエレメント全部と、IDがAAAであるものについて』って意味になりますが、ちょぉっち解り難いですね。
セレクタの指定方法は、なるべく統一したほうが、自分が楽でしょう。

さらに・・・
* {color:red;}
とすると、『全てのエレメントについて』という意味になります。
CSSは『後勝ち』なので、最初にコレで指定をしておいて、個々に変化する部分を後に書くと良いでしょう。

・プロパティ
属性。
A.AAA {color:red;}
の color の部分のこと。
エレメントの種類によって、付与できるプロパティには違いが有るわけですね。

・属性値
A.AAA {color:red;}
の red の部分のこと。
コイツが肝心の指定値そのものですね。

・・・ざ～っとこんなもんっすかねぇ？
なんか違ってたら、だれか補足よろしく～。

お礼

うわぁぁぁぁ。すごい。こんなに細かく丁寧に説明していただいて！ありがとうございます。さぞお時間かかったことでしょう。ほんとにありがとうございます。

回答No.3

abacabu

THML等で検索すればCSSの説明が載っているサイトが
結構ヒットすると思います。
後、No,2さんがお勧めしている本は私も持っていますが、
結構参考になります。
まぁ、定価￥2,400ですので必要とあらば…ですが。

お礼

情報ありがとうございます↑THMLと書いてありますがHTMLのことでよいのですよね？2400円でも今後参考になって助けてくれるのなら購入したいと思います。

回答No.2

suzuko

参考URLの
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
益子 貴寛 (著)

がとってもお勧めですよ。カテゴリ毎に分かれているので、飛ばし読みでも何とか理解できるのでは？

参考URL：

http://www.amazon.co.jp/exec/obidos/ASIN/4798010928/blogzine-22/503-2925782-9931919

お礼

情報ありがとうございます。さっそく明日に電気店の書籍コーナーに足を運びたいと思います。

回答No.1

furucch

↓こちらの[タグ要素とセレクタ]など参考にされてはどうでしょうか
http://www.tohoho-web.com/css/basic.htm

参考URL：

http://www.tohoho-web.com/www.htm

お礼

情報ありがとうございます。是非参考にさせて頂きます。