by the dreamland

夢の国の近くで暮らすエンジニア(おもにインフラ系)のブログ

divタグのidとclassについて

divタグのidとclassについてのメモ。

勉強になる。

 

http://airrat.blog103.fc2.com/blog-entry-230.html

 

以下抜粋

 

id や class ってどんな違いがあるの?
#(シャープ)とか.(ドット)ってどう対応してんの? 

 

div とは、 

<div>~</div>の間にあるものは
ひとまとまりのグループです。


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


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

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

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

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

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

 

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



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

■ 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>などなど)