読者です 読者をやめる 読者になる 読者になる

いつ俺〜いつから俺ができないと錯覚していた?〜

学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。

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

プログラミング Webデザイン

f:id:shun_prog0929:20151221213325j:plain


突然ですが皆さん。

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の違いについて紹介しました。

この違いがわかっていれば、デザインが崩れることが少なくなりますよ!


以上!