CSSのidとclassについて分かりやすく解説

まずは前提となる知識のおさらい

CSSでは、HTMLのid属性とclass属性の値をセレクタとして使用できます。あらかじめ予約されている要素の名前とは違って、任意の名称を作り出せるため柔軟な運用が可能となります。

idセレクタとclassセレクタは、どちらも制限なくCSSに記述できますが、これら二つの運用方法には明確な違いがあります。本ページでは、idとclassの特徴から、二つの使い分け方まで具体的に解説します。

まず初めに、CSSでidとclassを使うための基本的な知識をおさらいしておきましょう。

CSSのidとclassはセレクタである。
idとclassは、特定の要素にスタイルを適用するために用いる。
idセレクタは、id属性の値の先頭に#を置き、完全一致の文字列で定義する。
classセレクタは、class属性の値の先頭に.を置き、完全一致の文字列で定義する。
HTMLのid属性は、ひとつのページで重複する値を使用してはならない。これはある特定の要素が持つ識別子である。
HTMLのclass属性は、ひとつのページに同一の値が何度登場しても構わない。これはある条件のまとまりを示すグループ名である。
idはclassよりも詳細度が高い。

idセレクタの基本

#id_name {
	/* ここにスタイルを記載します */
}

idは、大量に書かれた文字の中から、たったひとつの要素を特定するためのセレクタです。そのため、ページの中で何度も登場するパーツや、汎用的なスタイルを指定するための運用には向いていません。

HTMLのルール上でも、id属性の値はページの中で固有のものとして扱われます。例えば、ページ内リンクを扱う場合に、ジャンプ先を特定する識別名が重複していた場合に、不具合の原因になります。

idの基本は、とにかくページの中で固有のもの、特別なスタイル、絶対に重複しない要素を想定することです。これらが曖昧な限り、classを使用した方が安全です。

また、idセレクタはclassセレクタよりも優先度が高くなります。これは詳細度を計算するポイントの仕様に基づきます。例えば、同じ要素に別のスタイルを適用した場合、カスケードの原則により後に書かれた内容が優先されます。しかし、同じ条件下であればidで適用されたスタイルは、後から上書きしようとするclassのスタイルを打ち消します。

classセレクタの基本


.class_name {
	/* ここにスタイルを記載します */
}

classは、大量に書かれた文字の中から、共通のスタイルや条件を持つまとまりを示すセレクタです。そのため、ウェブサイト全体の中で一度しか登場しない要素や、共通項のないスタイルの運用には向いていません。

HTMLのルール上では、class属性の値はページの中で何度重複しても構いません。例えば、複数のclassセレクタを用意して、それを組み合わせてスタイルを完成させることもできます。

classの基本は、とにかくページの中で何度も登場するパーツ、汎用的なスタイル、重複する内容を想定することです。これに反して、何か特別な扱いをしなければならない要素に対しては、idの使用を検討すべきです。

また、classセレクタはidセレクタよりも優先度が低くなります。これは詳細度を計算するポイントの仕様に基づきます。同じ条件下で、idで適用したスタイルを後からclassで上書きしようとした時に、これが効かないという現象につながります。

idセレクタを使う場面

idを使う場面としてまず考えられるのが、サイト全体のレイアウトの設計です。以下の例では、グリッド・レイアウトのコンテナに、エリア分けしたアイテムを配置しています。この時、idは各ボックスの固有名を表しておりサイト全体を通して変更されないスタイルです。


<div id="container">
	<div id="header">header</div>
	<div id="main">main</div>
	<div id="sidebar">sidebar</div>
	<div id="footer">footer</div>
</div>

#container {
	display: grid;
	grid-template: "a a a"
				   "b b c"
				   "d d d";
	gap: 1rem;
	padding: 1rem;
	background-color: #eee;
}
#container > div {
	padding: 1rem;
}
#header {
	grid-row: a / a;
	grid-column: a / a;
	background-color: #f60;
}
#main {
	grid-row: b / b;
	grid-column: b / b;
	min-height: 150px;
	background-color: #fc0;
}
#sidebar {
	grid-row: c / c;
	grid-column: c / c;
	min-height: 150px;
	background-color: #9f0;
}
#footer {
	grid-row: d / d;
	grid-column: d / d;
	background-color: #09f;
}

このように大きな枠組みの運用では、サイトの基本構造を形作る祭に有効です。idで指定する内容は、各アイテムが必要とする個別のものなので、要素名やclassでグループ化できません。そのため、idをセレクタに用いることは理にかなっていると言えます。

続いて、より詳細な場面での使用例を見ていきましょう。次の例は、複数のセクションが存在するページで、特定の条件に該当するセクションのみにスタイルを適用します。

サンプルでは、最新情報を目立たせるためにidセレクタと、それに続く擬似要素で視覚的な効果を与えています。「最新」の情報は重複しないため、このアプローチが成立します。「未読」などの重複する可能性がある条件の場合は、classの方を採用すべきです。


<div class="box">
	<section id="latest">
		<h1>お知らせ</h1>
		<p>内容を表すテキスト。内容を表すテキスト。</p>
	</section>
	<section>
		<h1>お知らせ</h1>
		<p>内容を表すテキスト。内容を表すテキスト。</p>
	</section>
	<section>
		<h1>お知らせ</h1>
		<p>内容を表すテキスト。内容を表すテキスト。</p>
	</section>
</div>


.box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
.box > section {
	margin: 1rem 0 0;
	padding: 1rem;
	background-color: #fff;
	box-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
section > h1 {
	margin: 0;
	font-size: 1rem;
}
section > p {
	margin: .5rem 0 0;
}
#latest {
	position: relative;
	border: 2px solid #f60;
}
#latest::after {
	content: "最新";
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 .3rem .1rem;
	background-color: #f60;
	color: #fff;
	font-size: 0.75rem;
}

classセレクタを使う場面

classを使う場面としてまず考えられるのが、同じページの中で何度も使い回す共通のスタイルを定義することです。以下の例では、先ほどの解説で使用したグリッド・レイアウトを応用して、各アイテムの背景色と余白を共通化しています。

アイテムの配置や寸法に関しては個別の管理が必要ですが、グループ化できるプロパティは個別のセレクタから切り離してclassにまとめた方が合理的です。ここでは、共有できるプロパティをareaというクラスにまとめています。


<div id="container">
	<div id="header" class="area">header</div>
	<div id="main" class="area">main</div>
	<div id="sidebar" class="area">sidebar</div>
	<div id="footer" class="area">footer</div>
</div>

#container {
	display: grid;
	grid-template: "a a a"
				   "b b c"
				   "d d d";
	gap: 1rem;
	padding: 1rem;
	background-color: #eee;
}
#header {
	grid-row: a / a;
	grid-column: a / a;
}
#main {
	grid-row: b / b;
	grid-column: b / b;
	min-height: 150px;
}
#sidebar {
	grid-row: c / c;
	grid-column: c / c;
	min-height: 150px;
}
#footer {
	grid-row: d / d;
	grid-column: d / d;
}
.area {
	padding: 1rem;
	background-color: #fff;
}

CSSを使い慣れた方であれば、上記の内容にグルーピング・セレクタの子結合子（E > F）を採用するかもしれません。コンテナの直下に置かれているのは全て<div>要素であるため、わざわざclassを使わなくても#container > divでグループ化できるからです。

ただし、その場合はイレギュラーな要素をコンテナに追加したり、グリッドにスタイルの違うアイテムを挿入することができません。このあたりはサイト全体の設計や運用方針によって使い分けましょう。

より具体的な場面では、次のような使い方があります。idと違ってclassは、ページ上で何度でも使用できます。これは、同じスタイルを適用すべき対象の数が事前に把握できない場面で有効です。

例えば、ユーザーの操作に応じてスタイルを切り替える用途で使用します。ページが表示された直後の状態では、スタイルを適用すべき要素の数が予測できない箇所、あるいは親要素が変わったりスタイルを適用する要素が変わる場面で、この方法を活用できます。


<div id="container">
	<section>
		<h1>当てはまる項目をチェックして下さい。</h1>
		<div>
			<input type="checkbox" name="c" value="1" id="c1">
			<label for="c1" class="item">項目1</label>
		</div>
		<div>
			<input type="checkbox" name="c" value="2" id="c2">
			<label for="c2" class="item">項目2</label>
		</div>
		<div>
			<input type="checkbox" name="c" value="3" id="c3">
			<label for="c3" class="item">項目3</label>
		</div>
	</section>
</div>

#container {
	overflow: auto;
	padding: 0 1rem 1rem;
	background-color: #eee;
}
#container > section {
	margin: 1rem 0 0;
	padding: 1rem;
	background-color: #fff;
}
section > h1 {
	margin: 0;
	font-size: 1rem;
}
section > div {
	position: relative;
	margin: .3rem 0 0;
}
div > input {
	position: absolute;
	top: .6rem;
	right: 1rem;
	margin: 0;
}
.item {
	display: block;
	padding-left: .5rem;
	border: 1px solid #ccc;
	background-color: #9cf;
	line-height: 2rem;
	cursor: pointer;
}
input[type="checkbox"]:checked ~ .item {
	background-color: #f09;
	color: #fff;
}

idとclassを使い分ける

ここまで見てきたようにidとclassは、制作や運用の過程で場面に応じて使い分けることが求められます。大まかに分類すると、同じページの中で特定の要素、変動性のないスタイルを指定する場合はidセレクタ。同じページの中で複数回登場するパターン、変動性のあるスタイルを指定する場合はclassセレクタを使用するという認識で良いでしょう。

詳細度の違いを把握する

idとclassには、詳細度の違いがあります。この観点を導入すると、idで指定したスタイルは、classで上書きできないという価値を持ちます。

以下の例を見てみましょう。通常、CSSは同じプロパティの値を後から書かれた内容で上書きできるという特性を持っています。しかし、これはカスケードのみに絞った場合の説明であり、十分ではありません。この振る舞いには、いくつかの複合的な要因が重なります。

そのひとつが詳細度です。簡単にいうと、より具体的なセレクタの方が曖昧なセレクタよりもポイントが高いという意味です。idはclassよりも詳細度が高いため、後に書かれたclassの指定に打ち勝ちます。

CSSって何？初心者が最初に学ぶべき基礎知識

CSSの書き方を詳しく解説！基本的な型とルールを覚えよう

CSSの特徴をしっかりと把握しよう

CSSファイルの作り方

CSSセレクタの一覧表

CSSで使える単位の一覧表

ボックス・モデルの完全解説

ブロックレベルとインラインレベルを理解する

CSSの余白を表すmarginとpaddingを正しく理解する

idとclassを上手く使い分ける

全称セレクタ（ユニバーサル・セレクタ）の解説

リストのデザインをマスターする

フレックス・ボックスを理解する

グリッド・レイアウトを理解する