違いを解説君

あるゆる物事の"違い"をわかりやすく解説する情報マガジン

Webデザイン

ITの違い

【CSS】idとclassの違いをわかりやすく解説!正しい使い分け方とは?

CSS(Cascading Style Sheets)を利用してHTML(HyperText Markup Language)を記述する時、『id』と『class』をきちんと使い分けていますか?

 

はなこ
HTMLを記述する時に、『id』や『class』を定義することがあるでしょ。

あの2つって、いったい何が違うのかな?

CSSでスタイルを指定したい時に使うよね。

でも、違いについては僕もよく把握していないな。

たろう
はなこ
『id』と『class』の違いについて、ちょっと調べてみたいわね。

 

今回は、CSSでよく利用する『id』と『class』の違いを見て、その使い分け方について解説します。

スポンサーリンク

【CSS】『id』と『class』の違い

『id』と『class』は、CSSとHTMLをペアにしてよく使われる属性のひとつです。

例えば、CSSに、

#font12 {
font-size: 12px;
}

.font24 {
font-size: 24px;
}

と記述して、HTMLに

<p id="font12">font-size: 12px;</p>

<p class="font24">font-size: 24px;</p>

と記述すると、

表示結果

font-size: 12px;

font-size: 24px;

と表示されます。

HTMLの1行目は『id』に"font12"を指定しています。

なので、CSSの上側、"#font12"で定義されたフォントサイズ12で出力されています。

HTMLの2行目は『class』に"font24"を指定しています。

よって、CSSの下側、".font24"で定義されたフォントサイズ24で出力されるということですね。

どちらも、CSSの定義に従って、HTMLで指定された部分のスタイルを変更するという仕組みは同じです。

 

では、『id』と『class』の違いはどこにあるのでしょうか?

『id』と『class』の主な違いは、次のようになります。

『id』と『class』の違い

  • 『id』は "#" で定義し、『class』は "." で定義する。
  • 同じ『id』名をHTMLの中で複数指定することはできないが、同じ『class』名のタグはいくつあってもよい。
  • 『id』の方が、『class』よりも優先度が高い。

定義する時の記号が異なることは、先ほど説明したとおりですね。

『id』を定義するときは、

#[id名]

のように指定します。

特定のタグにだけ指定したいときは、

[タグ名]#[id名]

になります。

それに対して、『class』を定義するときは、

.[class名]

とします。

特定のタグだけに指定する場合、『id』と同じように

[タグ名].[class名]

とすればいいわけですね。

 

『id』と『class』の最も大きな違いは、

同じ『id』名が複数指定できないのに対し、同じ『class』名はいくつでも指定できる

という点です。

HTMLの中で、タグに同じ名前の『id』を2つ以上付けることはできません。

それに対して『class』の場合は、複数のタグに同じ名前を指定することができます。

『id』はタグに付ける固有名詞を意味しますが、『class』はタグの種類を意味します。

固有名詞ですから、『id』はひとつしか指定できないわけですね。

 

『id』は、『class』より優先されます。

なので、『id』と『class』の両方が指定されていた場合は、『id』のスタイルが使用されます。

 

はなこ
『id』と『class』の違いはなんとなく分かったわ。
じゃあ、次は使い分け方だね。
たろう

 

【CSS】『id』と『class』の使い分け方

スクリプト

スクリプト

『id』と『class』は、どのように使い分ければいいでしょうか?

まず、

スタイルを定義する時、すべてに『class』を使っても問題はありません。

その場合は、全てのタグで

class="[class名]"

と指定することになりますね。

ある『class』名が一度しか使われなかったとしても、問題はありません。

一度しか使わなくても『class』を利用することはできるからです。

 

では、『id』属性は不要なのでしょうか?

『id』を利用する例のひとつに『内部リンク』があります。

『内部リンク』とは、同じページの中にリンク先があり、その場所へジャンプすることです。

例えば、文章に対してページの一番下に補足が書かれている時、本文からその補足へジャンプできると便利ですよね。

そのような場合に『内部リンク』を使います。

『内部リンク』は、次のように記述することで実現できます。

<a href="#hosoku">補足へ</a>

ジャンプ先には次のように書いておきます。

<div id="hosoku">補足です。</div>

このときに利用するのが『id』です。

同じ名前のリンク先が複数あるなんてことはないですよね。

ですから、同じ名前の『id』を複数指定することはできません。

『id』は、他にもJavaScriptの中で特定のタグに対してスタイルを動的に変更したいときなどに使われます。

 

基本的な使い分け方は、

同じタグのスタイルを一度に変換したい場合は『class』を使いましょう。

内部リンクやスクリプトでの動的変更など、ピンポイントの指定には『id』を使いましょう。

となります。

スポンサーリンク

まとめ

今回の違いのポイントを、まとめていきましょう。

ポイント

  • 『id』は、"#"で定義し、『class』は"."で定義する。
  • 同じ『id』名をHTMLの中で複数指定することはできないが、同じ『class』名のタグはいくつあってもよい。
  • 『id』のほうが、『class』よりも優先度が高い。
  • 同じタグのスタイルを一度に変換したい場合は『class』を使う。
  • 内部リンクやスクリプトでの動的変更など、ピンポイントの指定には『id』を使う。

『id』と『class』は、実は役割が大きく異なります。

それぞれの違いをよく認識して正しく使ってくださいね。

関連記事

-ITの違い

Copyright© 違いを解説君 , 2020 All Rights Reserved.