HTMLのidとclassについて

Question

ホームページ制作の勉強を今しているのですが、
HTMLで
<id>は一回しか使えなくて、
<class>は何回も使えると書いていたのですが、
それをみて<class>だけ使うだけでいいんじゃないかと思いました。
<id>を使うメリットがあれば教えていただきたいです。
よろしくお願いします。

Answer 1

ページ中に一つしかないということ自体がメリットです

javascriptでgetElementByIDは必ず特定の一つの要素を指し、複数を取得することはない
一つ見つかればそれ以上探さないので取得処理も早い

cssにおいてもIDで指定すれば、ページ中の一つの要素にしか適用したくないスタイルを
誤って兄弟・子孫要素に適用してしまうということがありません

アンカーリンクに用いることができるということももちろんですが
タブやライトボックス、あるいはスライドショーなどの
ウィジェットのリンクにおいてもIDが用いられることが多いのは
ページ中に要素が唯一であることが保証されるからこそ

labelとinputの対応もIDによってされます
これもページ中に要素が唯一であることが保証されるからこそのこと

一つしかないということが保証されるということは
制作物が複雑で機能的になっていくほどメリットが大きくなります

Comments

[enigumann]

ご回答ありがとうございました！
私の中で一番わかりやすく納得できたのでベストアンサーにさせていただきました！

Answer 2

CSSを適用する場面において、idを使う意味はそれ程無いと思います。
javascriptを利用する場面において、特定の要素を取得できるので便利に使用することが出来ます。
javascriptでclassが指定された要素から特定の要素を探す場合には複数ある場合があるので、ひとつひとつチェックしなければならず難しくなってきます。

Comments

[enigumann]

ご回答ありがとうございました！
javascriptも使おうと思うのでしっかり理解しときます！

Answer 3

「id は ドキュメント内に1個しかない」ということが保証されているので、JavaScript などプログラミング言語にとっては一つ見つければ、それ以降のドキュメントを探す必要がないことになり、検索時間が短縮できるメリットがありますね。

var elem = document.getElementById('identity');

「Classはドキュメント内に複数あるかもしれない」ので、一個見つけても他にはないのかをドキュメントの最後まで探さなければいけない。

var elems = document.getElementsByClassName('classname');

Comments

[enigumann]

ご回答ありがとうございました！
例文まで作っていただき、参考になりました！
ありがとうございます！

Answer 4

既に回答が出ていますが、色々ときちんと記事も読まれた方が良いです。
メリットデメリット、使い道など詳しく書いてくれている記事もたくさんあります。
※おそらく語りつくされているものなのでteratail内にも質問がありそうです

• スタイルシートの class と id の違いと使い分け

id属性を使うと「ページ内リンク」も作れる
id属性とclass属性では、スタイルが適用される優先度が異なる
すべての装飾にclass属性を使っているのであれば、それでも構いません。しかし、うまく使い分ければ読み解きやすいCSSソースになるでしょう。

• 今さら人に聞けない「idとclassの使い分け」

ここまでidとclassの違いについて説明してきましたが、ここまで読んで、「classは一つでも複数でも使えるなら、idを使う必要はないのではないか」とお思いになるかもしれません。

実はその通りであり、実際にclassのみを使用しても問題はありません。では、なぜidを使うのか。それは、「わかりやすさ」の面から使用するのではないでしょうか。
idとclassを分けることで、「大まかなレイアウトの部分」と「その他」で分類し、修正や変更をしやすくするという、メンテナンス性の向上が図れるのです。
例えば、レイアウトから文字の色まですべてclassで指定すると、レイアウト部分を修正しようとした時に、どこの要素でそのレイアウトを指定しているのか、探さなければなりません。
それを、「idで大まかなレイアウトを指定、classでそれ以外を指定」という風に使い分けることで、「レイアウトを指定しているのはidだから、ヘッダーのレイアウトを変更するのなら#headerを探せばいいな」というように、一見してメンテナンスのしやすさが大きく変わり、修正や変更の効率が上がります。加えて、コメントも併用するとさらにソースが見やすくなります。

• 本当のID と Class の違い

Classはブラウザの中では特に特別な能力はありませんが、IDは1つとっておきの切り札を隠し持っています。それは何かというとURL上での「ハッシュ値」です。

• idとclassの違いちゃんと分かってる？大変なことになる前に知っておいてな

などなど

記事を一通りきちんと読んでいただければ分かるかと思いますが、
IDの方が要素を特定できる故の便利な使い道が沢山あります。

Comments

[enigumann]

ご回答ありがとうございます！
参考のページを乗せていただきありがとうございます！
読んで理解を深めていきます！