ウェブランサー

CSSのidとclassについて

CSSでは、id属性とclass属性を使って名前を決めたHTML要素に対して、その名前をセレクタ名として用いることで、個別にスタイルを定義することができます。この方法によって、同じタグに違うスタイルを指定したり、別々のページで同じパターンを作って管理を合理的にすることができます。

CSSでid名をセレクタに使用する場合の特徴

「id」は、1ページに同じid名を持つHTML要素を複数設置してはいけない、というルールになっています。1つのページ内に同じスタイルの要素を複数設置したい場合には、class属性を使います。idの方がclassよりも優先順位が上の扱いになります。

id属性の例
<div id="content">
id名をセレクタにする場合
id名の先頭に「#」を付けて指定(#content)
HTML
<head>
<style type="text/css">
<!--
#id_name01 {
 font-size: 14px;
 width: 900px;
}
#id_name02 {
 border: 1px solid #CCCCCC;
}
-->
</style>
</head>
<body>
<div id="id_name01">
<div id="id_name02">IDで指定されたスタイルを適用</div>
</div>

CSSでclass名をセレクタに使用する場合の特徴

「class」は、1ページに同じclass名を持つHTML要素を何度記述しても問題ない、というルールになっています。1つのドキュメント内で何度も同じスタイルを指定したい場合に使用します。classの方がidよりも優先順位が下の扱いになります。

class属性の例
<div class="box">
class名をセレクタにする場合
class名の先頭に「.」を付けて指定(.box)
HTML
<head>
<style type="text/css">
<!--
.class_name {
 color: #FF0000;
 font-weight: bold;
}
-->
</style>
</head>
<body>
<div>
<span class="class_name">CLASS</span>で指定されたスタイルは同じドキュメント内で<span class="class_name">何度でも使えます</span>。
</div>

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます