超初心者向け CSS講座② IDとクラス

ある要素の中で、指定したIDまたはクラスを持つものに対してスタイルを適用させることができます。

IDセレクタ

IDはそれぞれの要素につける固有の名前（識別子）となり、一つのHTML文書内で複数の要素が同じIDを持つことはできません。

IDは任意のID名の前に「#」を付けて指定します。
記述例は以下の様になります。

[CSS]

#myid {
	font-size: 120%;
	color: red;
}

[HTML]

<span id=”myid”>ここは上記のスタイルが適用されます</span>

クラスセレクタ

クラス（class）は、一つのHTML文書内で複数の要素につけることができる「グループ名」のようなものです。
ある特定のスタイルを、複数の要素に適用したい場合に使用します。

クラスは任意のクラス名の前に「.」（ドット）を付けて指定します。
記述例は以下の様になります。

[CSS]

p.myclass {
	font-size: 120%;
	color: red;
}

[HTML]

<p class=”myclass”>ここは上記のスタイルが適用されます</p>
<p class=”myclass”>ここにも上記のスタイルが適用されます</p>
<p>ここにはスタイルが適用されません</p>

特定の要素に依存しないよう、要素を省いた形で記述することもできます。

[CSS]

.myclass {
	font-size: 120%;
	color: red;
}

[HTML]

<p class=”myclass”>ここは上記のスタイルが適用されます</p>
<span class=”myclass”>ここにも上記のスタイルが適用されます</span>
<p>ここにはスタイルが適用されません</p>