BlogPaint


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

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



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


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"


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

1組は、1年にも2年にも3年にも存在しうるし、中等部にも高等部にも存在します。
  なので、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の住み分けはみいばる学園と同じ理論です。


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

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

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


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

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

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

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


制服だけは変えたい!


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



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

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


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


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


id と class  に関しては、

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

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


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



 それではまた次回。