CSSスタイルシートのセレクタで「id属性」と「class属性」がありますが「似たような感じだけど、違いというかどのように使い分ければいいのですか？」とクライアントから質問をいただきました。

CSSスタイルシートの「id属性」と「class属性」の違いや使い分けについてお伝えします。

「1箇所だけ」と「複数箇所」

１つのウェブページ内に「1箇所だけ」で指定するのが「id属性」で、「複数箇所」で指定するのが「class属性」です。

id属性で指定する例：１つのウェブページ内にそれぞれ「1箇所だけ」

【ウェブページ内の一意の構造ブロックを明示する】

• id=”header”
• id=”main”
• id="sidebar”
• id="footer”

class属性で指定する例：１つのウェブページ内に「複数箇所」

【商品一覧ページで繰り返しでてくる商品説明文で】

＜p class=”shouhin-setumei”＞

CSSスタイルシートの適用優先順位が異なります

CSSスタイルシートにはセレクタによって適用優先度が異なっています。

「適用優先順位」について知っておくと、思ったようにスタイルが反映されない場合やコーティングをする際に役立ちます。

セレクタによる対象プロパティが重複している場合には原則、CSSスタイルシートでの原則として「後に記述された方」が優先して適用されます。

id属性とclass属性においては、id属性＞class属性となりid属性の方が適用優先順位が高くなっています。

ページ内リンク先の飛び先にid属性

id属性は1つのウェブページに1箇所だけなので、一意の指定に適しており、HTML5（最新のhtmlバージョン）では、ページ内リンクの飛び先にid属性を使用することが推奨されています。

例）

リンク元

＜a href="#itemA"＞商品Aの詳細はこちら＜/a＞

リンク先

＜h2 id="itemA"＞商品Aの詳細＜/h2＞

以上のようにid属性、class属性の違いや役割について理解しておくことで、CSSやhtmlのコーディングをよりよく最適化してくことに役立つかと思います。

参考になれば幸いです。