タグに名前をつける classとid

タグに名前をつける classとid

タグに名前をつけることで特定の要素のみにCSSを適用させることができます。

名前をつける時に使用する属性には「class」と「id」の2種類があります。

class 属性

クラスを使う場合は、HTMLファイルでタグにclass属性を追記し、任意のクラス名を記述します。

CSSファイルには「ピリオド（.）」と「クラス名」を書き、適用させたいスタイルを書きます。

なお、HTMLのclass属性部分にはピリオド「.」をつける必要はありません。

HTMLの記述方法

<h2 class="title">タイトル</h2>

CSSの記述方法

.title {
　 color: #000;
}

id 属性

IDを使う場合は、HTMLファイルでタグにid属性を追記し、任意のid名を記述します。

CSSファイルには「ハッシュ（#）」と「ID名」を書き、適用させたいスタイルを書きます。

なお、HTMLファイルのID属性部分にはハッシュ「#」をつける必要はありません。

HTMLの記述方法

<h2 id="title">タイトル</h2>

CSSの記述方法

#title {
　color: #000;
}

クラス名とID名のルール

クラス名とID名は自分で決めることができますが、ルールを守って名前をつけないとCSSが反映されないので注意が必要です。

• 空白（スペース）を入れない
• 英数字とハイフン「-」、アンダースコア「_」で記述
• 1文字目は必ず英字

idとclassの違い

id：1つのHTML文書内で同じid名を使うことができない
class：何回でも同じclass名を使うことができる

スタイルをidに付けると、詳細度が高くなり、classのスタイルが上書きされてしまう可能性があります。

idはページ内で一度しか使うことができず、再利用できないため推奨されていません。

優先度と使い回しの観点から、スタイルはclassを使い、idはページ内リンクやJavaScriptで使われることが多いです。

idセレクタはclassセレクタよりCSSの適用が優先される

スタイルの優先順位

スタイルの優先順位は、詳細度の加算で決まる

CSSには「詳細度」という概念が存在し、これがスタイルの適用優先度を決定します。

詳細度は、セレクタが対象とする具体的な要素、クラス、IDなどの組み合わせによって決まります。

詳細度が高いほど、そのスタイルは優先的に適用されます。

例えば、インラインスタイルの詳細度は非常に高いため、他の任意のセレクタに対して優先されます。

なお、セレクタの継承によっても詳細度が加算されます。