CSS

CSS|classとidの違いって何?

HTMLの要素によく付いている属性としてclass属性とid属性の2つがあります。コーディングを学んで間もないうちはこれら2つの属性はどちらもスタイルシートで場所を指定するセレクタとして使用しているので、両者をどう使い分けるものなのかがよく分からないかもしれません。ここでは、この2つの属性の違いについてお話させていただきます。

コンテンツ

class属性とid属性の違い

classとidの大きな違いは次の2つです。

  1. 同じ名前のidはページ内に1回だけしか指定できないがclass名は複数指定できる。
  2. id属性の方がスタイルシートの優先順位が高い。
    idで指定したデザインとclassで指定したデザインが同じ要素に適用されていて、idとclassがそれぞれ別の値だった場合、idセレクタで指定されたデザインの方が優先されるというルールがあります。

※スタイルシートの優先順位についてはこちらも参照してみてください。

この2つがidとclassの違いになります。

どんなときにid属性は使うのか?

1つのページに同じ名前が1つだけという制限のあるid属性ですが、どんなときに使うことになるのでしょうか。少しだけ事例を紹介します。

ページ内リンクで使用するとき

リンク先が他のページではなくて、ページ内のどこか他の場所に指定したいときはid属性を入れます。こんな感じですね。

<a href="https://example.com/sample#link">リンクテキスト</a>

上記はhttps://example.com/というサイトのsampleというページ内にあるlinkというid名がある場所へのリンクです。もしもidではなくてclassで指定したとして、同じlinkという名前がページ内に複数あったとしら、どこにジャンプするのか分からなくて困りますよね。だから、ページ内ジャンプで利用するときはid名で指定します。

スタイルシートではなくJavaScriptなどで使われている

classやidといった属性を利用しているのはスタイルシートだけではありません。JavaScriptなどはあまり詳しくありませんが、これら他のプログラムで使用する目的でid属性を入れることもあります。

まとめ|基本的にclass属性を使いましょう

スタイルシートでclassだけを使っていて困ることというのは基本的にありません。同じid属性はページ内に1回しか登場させられないという制限がありますので、基本的にclass属性を使っていけば大丈夫です。

最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  4. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP