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

id と class の解説ページのアイキャッチ

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

CSSの解説ページのアイキャッチCSS(スタイルシート)とは? 入門者向けに CSS について徹底的に分かりやすく解説

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

このページでは HTML で 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を指定することで特定の要素のみの見た目を変更する様子

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

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

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

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

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

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

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

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

複数の id / class 属性の設定

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

複数の class を設定する方法

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

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

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

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

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

.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 を設定した時のスタイル設定

このように1つの要素に複数の 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とclas両方で文字色を設定する様子

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

idに対するスタイル設定が優先される様子

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

id 属性 < class 属性 < タグ名

class 同士の優先度

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

複数のclassで文字色を設定する様子

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

下側に記述したスタイルが優先される様子

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

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

まとめ

このページでは、よりウェブデザインを細かく設定することができる HTML の id 属性と class 属性について解説しました。

この id 属性と class 属性を用いることでより細かくウェブページのデザインをすることができるようになります。自分好みのウェブサイトを作っていく上で必須の知識ですので、是非覚えておきましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です