突然ですが皆さん。
HTMLのidとclassの違い、知ってますか？
意外と意識せずに使ってる人が多いのかな？と思います。
けど、意識していないために頭を抱えてしまうようなこともあるんです。
というわけで、今日はidとclassのお話をしますよ！
ぱちぱちぱちぱち！！
idとclassの違い
idとclassの違いについて説明する前に、それぞれどのように書くのか例をあげておきますね。
まずidはこのように書きます。
<div id="sidebar"></div>
次にclassはこう。
<div class="entry-title"></div>
こんな感じですね。
なんか2つとも名前つけれるし、同じようなもんじゃないの？っていう人もいると思います。
けど、この2つにはちゃんと違いがあるんです。
その違いは、
idは唯一無二
classは唯一無二ではない
ということです。
idは同じページの中で、1度しか使えないんです。
逆にclassは使いまわすことができます。
そういった違いがこの2つにはあります。
なんとなく、classの方が何回も使えるならclass使っとけばよくね？と思う人もいるかもしれません。
ですがはっきり言いましょう。
この2つをちゃんと使い分けないと大変なことになりますよ。
idの使い方
まず、idはどのような場面で使うのか。
それは、その要素だけにスタイルを適用したい時です。
そういう場面は実際に出てくると思います。
「この要素は文字を少し大きくしたいけど、他の要素には必要ないな」
というようなことです。
こんな時にはidを使うようにしましょう。
こうすることで何が良くなるかというと、他のデザインを崩すことがない、ということです。
idはページ内で唯一無二ですから、そのidの要素以外にスタイルが適用されない。
つまりはidを使うことによってclassを使う場合よりも安全度が高くなるわけですね。
初心者の方は、デザインが崩れる原因にclassが被っている要素を気にせずにCSSをいじって、直したい部分は直るけど全体としては崩れてしまう、ということがあります。
そうならないためにidを使うといいです。
少し応用的な部分を考えるならJavaScriptのgetElementById関数で指定したidを持つHTMLの要素を取得できます。
ここで取得されるのは、単一の要素ですので取得される要素が決まっているわけですね。
ですので、その要素のみに特化した処理が書けます。
そういった利点もidにはあるんです。
classの使い方
classはページ内にいくつも書いていいわけですから、構造が決まっていて、その上で何度も使いまわしたいような場面で使いましょう。
例えば、トップページに複数の記事を載せているような場合、これはclassを使うのがいいですね。
こんな感じです。
<div class="entry-content">記事1</div> <div class="entry-content">記事2</div> <div class="entry-content">記事3</div>
このようにすれば、すべての記事に対して同じデザインを適用できます。
このようにclassは使いまわすことを前提としてつけるようにしましょう。
重要なのは、どこで使っているかをちゃんと把握しておくことです！
じゃないとデザインが崩れる原因になりますからね。
classの扱い要注意ですよ！
まとめ
今回は、意外と知らないidとclassの違いについて紹介しました。
この違いがわかっていれば、デザインが崩れることが少なくなりますよ！
以上！
