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

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

INDEX

  1. classとidの特徴と違い
    1. classとは
    2. idとは
  2. まとめ

ホームーページなどの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ですましてしまうのもよくはありません。

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

この記事を書いた人

大西照

大西照

株式会社Esolab 代表取締役

PAGE BACK
お問い合わせ