HTMLの「id」「class」とスタイルシートの「#」「.」ってどう使う？

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

　「#」は「id」、「.」は「class」という事なんだけど。

　「#（id）」と「.（class）」の違いは何？

　どう使い分ければいい？

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

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

　　ということだが…。

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

　もちろんほかにも大きな違いはあるようだけど、スタイルシート初心者があまり突っ込んだことを考えても仕方ない。

「.（class）」でスタイルシートを指定するデメリット

　「.（class）」でスタイルシートを指定するデメリットは、

　ということだそうだ。

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

#（id）のHTMLとスタイルシートの記述の仕方

HTMLの例）

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

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

スタイルシートの記述例

#rei { }

　Pでも、divでも同じ記載でOK。

　P#rei { }やdiv#rei{ }でもOK。

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

実際に「#（id）」を使ってみる

　では、実際に「#（id）」を使ってみると、

<!-- HTMLの記載 -->
<p id="font1">この行はid="font1"を適応しています</p>

<!-- CSSの記載 -->
#font1 {
color: #903; /* 文字色指定 */
}

　で、実際の表示は

この行はid="font1"を適応しています

　というようになる。

.（class）のHTMLとスタイルシートの記述の仕方

HTMLの例）

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

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

スタイルシートの記述例

.rei { }

　P#rei { }やdiv#rei{ }でもOK。

　hやulも指定できる。

実際に「.（class）」を使ってみる

　「.（class）」はページ内に複数使うことができるので、Pとdivの要素を同じフォントカラーで指定してみる。

<!-- HTMLの記載 --> <p id="font2">この行はid="font2"を適応しています</p>

<!-- HTMLの記載 --> <div id="font2">この行は<br>id="font2"を適応しています</div>

<!-- CSSの記載 --> 
#font2 {
 color: #c0f; /* 文字色指定 */
 }

　で、実際の表示は

この行はid="font2"を適応しています

　という表示になる。