【div】がたくさん出てくるので
名前を付けて区別する際に使うのがidとclass

テンプレート内によく登場してくる div 。
(div限定の話ではなく、divが多くでてくるのでdivを例にあげています。)

div とは、

＜div＞～＜/div＞の間にあるものは
ひとまとまりのグループです。

ということを指示するタグです。


テンプレートはたくさんのグループ(まとまり=＜div＞)で作られているので、
区別する為に＜div＞に名前を付けてあげる必要 があります。

名前を付ける際に、 id と class が登場するんですが、

●　 　「 id 」 　＝ 1回しか使えない。(特定の部分の名前)
●　 「 class 」 ＝ 何回も使える。(分類するときに使う名前)

というルールがあるのだそうです。

1回しか使えないidを何回も使ったりすると、
ページに不具合が起きたりするので、ルールを守る必要があります。

厄介なのは、idが１回しか使えない ということですので、
idを使わず、何回でもOKのclassのみを使っていっても問題ないそうです 。

idとclass #(シャープ)と.(ドット)

idとclassの違いが分かったところで、
実際にテンプレートのHTMLとCSSを対応させて覗いてみます。

■ HTMLを見た時

＜div id="001"＞、＜div class="002"＞
のように表示されている

■ CSSを見た時

#001{　　…　　}、.002{　　…　　}
のように表示されている

上のような関係で書かれています。
実際に、idやclassと記述されているのはHTML部のほうで、
CSS部では、#(id)・.(class)と記号で表示されている訳です。


▼ 管理人の走り書き

【#001】【.002】は
【*#001】【*.002】を省略した格好。(つまり同じもの。)

*(アスタリスク)は、
「全ての要素に対してスタイルを適応させる」、というマーク。

*とは反対に、特定の要素に対して適応させたい場合は、
【h3#001】【p.002】のように、
[要素の名前]+[id,class名]という形で記述する。

● 要素とは
＜＞で囲まれたタグを使って、
役割や範囲などを宣言して、指示するもの。
(例；見出し＜h1＞、グループ＜div＞などなど)

おまけ：＜div＞に似ている＜p＞もいます。

■ ＜p＞
＜p＞～＜/p＞の中にある文章を１つのグループにする。
【特徴】：グループの上と下に1行分のスペースが出来る。

■＜div＞
【特徴】：＜p＞に似ているが、上下の1行分のスペースはない。



というわけで、
idは1回しか使えない、#(シャープ)で書く。ということと、
classは何回でも使えて、.(ドット)で書かれている、
適応させたい場所を指定するときは、
[要素名]を頭につけて、#(id名)または、.(class名)を書く。
というまとめメモでした。