よりウェブデザインを CSS 設定する HTML の id / class 属性

このページにはプロモーションが含まれています

下のページで CSS の概要や書き方について解説しました。

CSS（スタイルシート）とは？入門者向けに CSS について徹底的に分かりやすく解説

しかし、上のページではタグ種類ごとにしかスタイルを設定する方法しか解説していませんので、細かく要素指定を行うことが出来ず不便です。

このページでは HTML で id / class 属性を用いてさらに細かくウェブのデザインを開発する方法について解説します！

Contents

CSS の書き方のおさらい
id 属性
class 属性
id 属性と class 属性の使い分け
複数の id / class 属性の設定
- 複数の class を設定する方法
- class と id の両方を設定する方法
適用されるスタイル設定の優先度
- class と id の優先度
- class 同士の優先度
まとめ

CSS の書き方のおさらい

おさらいですが、CSS の基本的な書き方は下のように「セレクタ」「プロパティ」「設定値」を書くことです。

セレクタ {
    プロパティ : 設定値
}

ここで注目していただきたいのがセレクタです。セレクタは記述したプロパティ設定の適用先要素を指定するものでしたね。

このセレクタで指定する要素の代表例はタグです。例えば下のようにプロパティを書けば h1 タグの要素全ての文字の色が赤色に変わります。

h1 {
    color : red
}

ポイントは、セレクタにタグ名を書くとそのタグで記述された全ての要素に同じプロパティ設定が適用されるという点です。もちろん全て同じ見た目の見出しにしたいのであればこの記述でも問題ありません。

しかし、例えば「見出しごとに見た目を変えたい」時にはこの記述では狙ったウェブデザインにすることが出来ません。

そのような時に使用すると便利なのが HTML の「id 属性」と「class 属性」です。「id 属性」と「class 属性」を用いることで、タグの種類単位ではなく要素単位でスタイルを指定することが可能になります。

id 属性

id 属性は要素に固有の名前をつけるための HTML の属性です。書き方は下記のように、タグ名の後に半角スペースを書き、さらにその後に「id = “id 名”」と書きます。

<h1 id = "first">first という名の見出しです</h1>
<h1 id = "second">second という名の見出しです</h1>

この記述により、一つ目の要素に “first”、二つ目の要素に “second” という名前がついたことになります。

この名前が “first” の要素に対してスタイルを指定する場合は、CSS に下記のように記述します。セレクタに「#id名」と指定するところがポイントです。

#first {
	color : red;
}

これにより、この “first” と名前のついた要素のみに上記のスタイルが適用されるようになります。この場合は文字が赤色で表示されるようになります。

このように id 属性を用いることで特定の要素のみのスタイルを変更することが可能です。

class 属性

class 属性は要素をグループ分けするための HTML の属性です。書き方は下記のように、タグ名の後に半角スペースを書き、さらにその後に「class = “クラス名”」と書きます）。

<h2 class = "hot">hot グループの見出しです</h2>
<h2 class = "cold">cold グループの見出しです</h2>

この記述により、一つ目の要素が “hot” というグループに所属し、二つ目の要素が “cold” というグループに所属したことになります。

この “hot” グループに対してスタイルを指定する場合は、CSS に下記のように記述します。セレクタに「.グループ名」と指定するところがポイントです。

.hot {
	color : red;
}

これにより、この “alert” グループの要素のみ文字が赤色で表示されるようになります。

同じ class 属性を複数の要素に指定することで、複数の要素に一括してスタイルを設定することも可能です。同じグループに複数の要素が所属しているイメージですね。タグの種類が異なっても同じ class 属性を指定することが出来ます。

<h2 class = "hot">hot グループの見出しです</h2>
<p class = "hot">hot グループの段落です</p>
<h2 class = "cold">cold グループの見出しです</h2>
<p class = "cold">cold グループの段落です</p>

この場合は上の２つの要素の文字が赤色で表示されることになります。

このように、class 属性を用いることで要素をグループ分けし、グループ単位でスタイルを指定することが可能になります。

id 属性と class 属性の使い分け

両方ともセレクタを細かく指定するための属性ですが、この２つには下記のような違いがあります。

同じ id 属性はページ内に一つのみ
同じ class 属性はページ内に複数存在して良い

よく使うのは class 属性の方だと思います。id 属性だと一つ一つの要素のスタイルを指定するので大変ですし、一つ一つ異なった見た目にするとページ内の見た目の統一感も無くなってしまいます。基本的には class 属性を使い、特に注目してもらいたい要素のみに id 属性を使うので良いと思います。

複数の id / class 属性の設定

一つの要素に対して複数の class を設定することも可能です。一つの要素が複数のグループに所属しているイメージですね。また一つの要素に class と id の両方を設定することも可能です。

複数の class を設定する方法

class 属性の class の名前を半角スペースで並べて記述することで、要素を複数のグループに属させることができます。

例えば下のように記述すれば、各要素に２つずつの class が設定されることになります。

<p class = "big gray">私は体が大きく灰色の動物です</p>
<p class = "big brown">私は体が大きく茶色の動物です</p>
<p class = "small gray">私は体が小さく灰色の動物です</p>
<p class = "small brown">私は体が小さく茶色の動物です</p>

これにより、例えば１行目の要素は big と gray に所属することになります。さらに２行目の要素は big と brown に所属することになります。

CSS を下記のように記述すれば、各要素に２種類ずつのスタイル設定が行われることになります。

.gray {
	color : #888888;
	background: linear-gradient(#cccccc, #ffffff);
}

.brown {
	color : #a52a2a;
	background: linear-gradient(#d77c7c, #ffffff);
}

.big {
	font-weight : bold;
	font-size : 1.5em;
}

.small {
	font-weight : normal;
	font-size : 0.8em;
}

実際の表示結果は下のようになります。

これは各要素に対して下のように複数のスタイルが適用されたためです。

このように１つの要素に複数の class を設定することで両方の class のスタイル設定を適用することが可能になります。

class と id の両方を設定する方法

同様に class と id 両方を設定することも可能です。

例えば下のように class 属性と id 属性両方を記述すれば、各要素に class と id 属性の設定をすることができます。

<p class = "big gray" id = "elephant">私は体が大きく灰色の象です</p>

CSS を下記のように記述すれば、要素に class へのスタイル設定と id へのスタイル設定両方を適用することができます。

.gray {
	color : #888888;
	background: linear-gradient(#cccccc, #ffffff);
}

.big {
	font-weight : bold;
	font-size : 1.5em;
}

#elephant{
	border : solid 1px;
	background: linear-gradient(#ccccfc, #ffffff);
}

適用されるスタイル設定の優先度

class や id で複数のスタイルを設定すると出てくるのが、プロパティ設定の重複です。同じプロパティに異なる設定値が設定された場合、どの設定値が採用されるかは優先度によって決定されます。

class と id の優先度

例えば class と id 両方を場合に、class と id 両方に対するスタイル設定で文字の色（color）設定すると、class と id のどちらの色で表示されるのでしょうか？

この場合は id の方で設定された色で表示されることになります。

スタイル設定は、同じプロパティに異なる設定値が設定された場合、より局所的な属性に対する設定が優先されます。基本的に下記の優先度でプロパティ設定が上書きされると考えると良いと思います。

id 属性 < class 属性 < タグ名

class 同士の優先度

では要素に複数の class を設定され、それぞれの class で同じプロパティ設定が行われている場合、どの class のプロパティ設定に基づいて表示が行われるでしょうか？

この場合、CSS ファイルの中で下側に記載されたプロパティ設定が優先されます。ですので複数の class で同じプロパティに異なる設定値が設定されている場合は、CSS ファイルの一番下に設定されているプロパティが優先されることになります。

このようにプロパティ設定が重複した時にどの設定によりページ表示が行われるかは優先度が関わってきます。

同じプロパティの設定を複数の class で行なっている場合は、最終的にどの設定値が採用されるのかが分からなくなってしまうことが多いです。そんな時はここで解説した優先度を思い出して、自分の意図したウェブデザインにするためにどのように CSS を記述すれば良いかを考えていただければ良いと思います。