CSSスタイルシートの「id」と「class」の違いは？使い分けや記述方法・優先順位も元企業ホームページ担当がわかりやすく解説

ライター／れおな=007

学生時代にホームページ作成を学び、別業種への就職後もホームページを担当した経験がある。IT関連の知識が豊富で、会社員の傍ら執筆活動を続けるWEBライター。学生時代や担当当時に得た知識と経験を生かし、本記事を執筆していく。

「id」と「class」の使い方の違いは？

ホームページ作成で必ずと言っていいほど使う属性、「id」と「class」の違いはご存知ですか。本項ではまずHTMLファイル内での、idとclassの属性の使い分け方を確認します。タグにidとclassどちらの属性を与えるかで、CSSファイル内での記述が変わってくるのでよく押さえておきましょう。

5分で分かる！HTMLとCSSの違いとは？定義や役割・読み込み方も現役エンジニアがわかりやすく解説

id：ページ内に1つだけの要素に使う

HTMLファイルの中でid属性は、ページ内に1つだけ存在する要素に使います。具体的にはロゴマークを使ったホームボタンや、お問い合わせフォームの送信ボタンなどが考えられるでしょう。また同じ名前が一度しか使えないという特性を使って、ページ内リンクを作成するのも可能です。

反対に同じ要素に複数のidを指定したり複数箇所に同じidを指定したりするのはNGで、HTMLの文法エラーと呼ばれます。そのまま編集を続けると記述したプロパティが正しく反映されず、思うようなページが作れなくなるでしょう。

class：ある一定のカテゴリの複数の要素に使う

idに対してclass属性は、ある一定のカテゴリの複数の要素に使えます。グローバルメニューやコンテンツをリスト化したものなどがわかりやすい例でしょう。1つ1つの要素に対して統一したclassを指定することで、同じプロパティを一括適用するのが可能です。また1つの要素に複数のclassが指定できるため、同じカテゴリの一部の要素に限定してプロパティを変えられます。

CSS上での記述方法の違いは？

image by iStockphoto

idとclassの属性はHTMLファイル上での使われ方が違う点が、CSSスタイルシートに記述する際の違いにつながっています。本項ではidとclassを、CSSスタイルシート上でどのように記述するかをみていきましょう。

id：「＃」で記述

CSSのスタイルシートにid属性を与えた要素のプロパティを記述する際には「#（ハッシュタグ）」を使います。そのためHTMLファイル上のある要素に「one」というidを付与した場合、CSSのスタイルシートでは「#one{プロパティ}」という記述になるでしょう。もちろん子要素や擬似要素についてのプロパティを記述する場合は、半角スペースで区切っておくのがポイントです。

class：「.」で記述

CSSのスタイルシートにclass属性を与えた要素のプロパティを記述する際には「.」を使います。具体的にはHTMLファイル上のある要素に「two」というclassを付与した場合、「.two{プロパティ}」という記述になるでしょう。子要素や擬似要素のプロパティについては、idの場合と同様に半角スペースで区切って記述します。

ただし、複数の要素について同じプロパティを適用する際は、「,（コンマ）」で区切って並べるのがポイントです。ここを半角スペースで区切ると、右に書かれた要素が子要素であると認識されてしまう点に注意しましょう。

CSSを適応する際の優先順位の違いは？

image by iStockphoto

上記通りidとclassの使い分けがあるため、CSSに記述したプロパティを反映する際の優先順位が生まれます。本項では両者のCSSを反映する際の優先順位を確認し、思うようなプロパティを反映するためのポイントを考察しましょう。

id を指定したプロパティが優先

同じ要素にidとclassの値を付与した場合、CSSのスタイルシートではidを指定して記述されたプロパティが優先して適用されます。基本的にCSSスタイルシートでは、同じ要素について一番最後に記述されているプロパティが適用されるでしょう。

しかし一つの要素にidとclass両方を付与していた場合、idのものとして設定したプロパティはCSSファイル内のどこに記述してもclassのものより優先されます。

id を指定したプロパティがない場合は？

CSSスタイルシート内にidを指定したプロパティの記述がない場合、その要素に対して付与されたclass属性のものが適用されます。またidが付与された要素そのものにclassが付与されていない場合は、親要素に対して記述されたプロパティが反映されるでしょう。

「id」こんな時どうする？

image by iStockphoto

同じid属性はHTMLファイル内で重複させてはならないことを、前項までで確認しました。そのため1つのid属性を持つ要素の記述は、CSSスタイルシート上でも1箇所になるでしょう。本項ではCSSスタイルシートを記述している際に、これらの条件を満たさない状況が生まれた場合の解決方法をお伝えします。

同じ要素、同じプロパティについて記述したら？

CSSスタイルシートで同じ要素かつ同じプロパティについて複数回の記述がある場合、一番最後に記述されたものが適用されます。そのためスタイルシートを編集しても正しくプロパティが反映されない時は、ページの後方に記述があるかを確認し不要な方を削除しましょう。

それでもHTMLファイルに、記述したプロパティが反映されないこともあるでしょう。その場合は該当のHTMLファイルにリンクされている別のスタイルシートに記述されているか、HTMLファイルそのものの中に記述がある可能性が考えられます。連動する全てのファイルを見返し、どのプロパティを適用するか確認してください。