お見合いパーティー


高性能検索順位チェックツール(無料)

IDとクラス

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

IDセレクタ

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

記述例は以下の様になります。

[スタイルシート]
#myid {
  font-size: 120%;
  color: red;
}

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


クラスセレクタ

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

記述例は以下の様になります。

[スタイルシート]
p.myclass {
  font-size: 120%;
  color: red;
}

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


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

[スタイルシート]
.myclass {
  font-size: 120%;
  color: red;
}

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




スポンサードリンク