HTMLの「id」「class」とスタイルシートの「#」「.」

　外部スタイルシートを見てみると#で指定されたものと.で指定されたものがあるのに気がつくと思う。

　#はHTMLのidで設定して部分のスタイルを指定する。

　.はHTMLのclassで指定した部分のスタイルを指定する。

　さて、この#（id）と.（class）の差はどこにあるんだろう？

　ちょっと調べてみた。

#（id）と.（class）の一番わかりやすい違い

・「#（id）」は1ページに1回しか使うことができない

・「.（class）」は1ページに何回でも使うことができる。

　もちろんほかにも大きな違いはあるようだ。

　けど、スタイルシート初心者があまり突っ込んだことを考えても仕方ない。

　.すべてのスタイルシートを指定してもだめということはないようなので、自分でスタイルシートを追加するときには.（class）のほうが使い勝手がいい。

　.（class）でスタイルシートを指定するデメリットは、同じスタイルが思いがけないところで適応されてしまう可能性があることだそうだ。

　また、複数指定できるため#のように内部リンクの指定ができない。

　といわれても、あまりぴんとこないやね。

<p id="rei">idを使った場合のHTMLの例</p>

<div id="rei">idを使った場合のHTMLの例</div>

p#rei { }
または
#rei { }

div#rei { }
または
#rei { }

　hやulも指定できるが1ページに1箇所だけ。

<p class="rei">idを使った場合のHTMLの例</p>

<div class="rei">idを使った場合のHTMLの例</div>

p.rei { }
または
.rei { }

div.rei { }
または
.rei { }

　hやulも指定できる。