ちょっと今回は休憩のため、パワポ使いません。　

なので少し見づらいかもしれません。。



まずそれぞれの特徴について


id　唯一無二。同じ名前は一度のみ。
class 同じ名前を二箇所以上につけられる。


多くのサイトにid=個人番号　class=クラス、まとまり
のような説明がありますが、


単に私の理解力不足ですが、
私的にこの解釈がしっくりこない。


というわけで改めて考えてみました。 

学校に例えてみました。



miibaru.html ________________

　id="wrapper"   みいばる学園　----------------

　id="header"  　職員室

　id="contents"　みいばる学園の生徒　***********

　　id="main"  高等部
　　　class="first" 1組
　　　class="music" 吹奏楽部

　　id="sub"  中等部
　　　class="first" 1組
　　  class="music" 吹奏楽部
 
　*************************************

　id="footer"  事務室

---------------------------------------------------------


だとしたら・・・


みいばる学園はこの学校全体かつ、一つしか存在しないから　id="wrapper"

職員室も事務室も学校内で機能を持ち、一つしかないから、　id="header"  id="footer"

「みいばる学園の生徒」というまとまりも、他には存在しないから　id="contents"


で、生徒の中にはいろいろなグループ分けが存在します。

１組は、１年にも２年にも３年にも存在しうるし、中等部にも高等部にも存在します。
　　なので、classです。
同様に、吹奏楽部は、高等部に一つ、中等部に一つ。二箇所以上に同じ名前をつけるには、class。


そしてこうしてセレクタで分けるにはわけがあります。



みいばる学園は私立で、同じグループに、うき学園というものがあります。


uki.html ________________

 　id="wrapper"   うき学園　----------------

　id="header"  　職員室

　id="contents"　うき学園の生徒　***********

　　id="main"  高等部
　　　class="first" 1組
　　　class="music" 吹奏楽部

　　id="sub"  中等部
　　　class="first" 1組
　　  class="music" 吹奏楽部
 
　*************************************

　id="footer"  事務室

---------------------------------------------------------



このidとclassの住み分けはみいばる学園と同じ理論です。


で、この２つの学園、全く同じ設計図で建てられています。

どこの部屋がどんな材料を使っているか。

それを決めるのが   gakuen.css だとします。


同じ設計図なので、同じ　cssファイルを使う事ができます。 

吹奏楽部の部室も同じ作り。もちろんそれぞれの中等部と高等部間も。

教室の作りも同じで、スリッパの色なんかも同じです。

でも一つ問題があります。


制服だけは変えたい！


そこでうき学園には別にcontentsの部分の指定が異なるcssを設定します。 



という例えを考えてみましたが、

案外例えって難しいですね。


混乱させてしまったらごめんなさい。


いろいろ見てるとclassかidかは好みなところもあるのかもしれないです。


id と　class  に関しては、

命名のポイントとかがあったりしますので、

参考になるサイトをご紹介します。


新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]



 それではまた次回。