Webページを構築する際によくみるclassとidって何が違うの? | 株式会社Esolab
logo

ARTICLE

記事ページ

記事ページ

Webページを構築する際によくみるclassとidって何が違うの?

TECH

ホームーページなどのWebページを作成する際にほぼ必ず使用するのがclass属性とid属性です。

この2つの属性の違いを明確に分けられていますか?

今回はこのclassとidの特徴と違いについて解説したいと思います。

基礎になるので必ず理解しておきましょう。

ではみていきましょう。

classとidの特徴と違い

classとは

classとは、クラスセレクタと言います。

クラス名を指定することで、そのクラス名がつけられた要素に独自のスタイルを適用させることができます。

クラスセレクタには複数のクラス名を同時に指定することができます。

また、クラス名は1ページ内に何度でも使用することができます。

idとは

idとは、idセレクタと言います。

振る舞いはclassとほぼ同じように使用することができます。

classと違う点がいくつかあります。

まず、idはページ内に1つしか指定することしかできません。

重複して指定することはできませんのでご注意ください。

2つ目に、優先順位が優先されます。

仮にclassとidを1つの要素に指定していた場合、idがのスタイルが優先されます。

3つ目に、ページ内リンクを作成することもできます。

例えば、目次にidを設定して見出しの箇所までとばしてあげるということもできます。

まとめ

いかがだったでしょうか?

今回は、classとidの特徴と違いについて解説しました。

使い所はそれぞれの特徴によって選定していくべきでしょう。

むやみやたらにidに設定してしまうのも良くはないですし、全てclassですましてしまうのもよくはありません。

特徴をしっかり理解した上で使用するようにしましょう。

この記事を書いた人

田川烈

開発部 フロントエンジニア

アーカイブ

カテゴリー

  • TECH (34)
  • DESIGN (21)
  • OTHER (15)
  • MARKETING (6)
  • SEO (5)
  • お問い合わせ

    株式会社EsolabではWEBサイトやECサイトの運営など多岐にわたり事業を展開しています。
    ホームページや自社ECサイトをお求めの方は一度お問い合わせください。

    お問い合わせ