ブログをリニューアル予定。過去記事は削除するかもです。

【classとidの使い分け】HTML・CSSの基礎知識をわかりやすく解説します

【classとidの使い分け】HTML・CSSの基礎知識をわかりやすく解説します

classとidってどうやって使い分けたらいいんだろう?

具体的な違いや、おすすめの使い方を教えて欲しいな。

 

こんな人向けの記事。

結論から言えば、大きく分けてclassとidの違いは下記のとおりです。

 

  • class:1ページで同class名を何度も使える、1要素に複数のclass名を指定できる
  • id;1ページで同id名は一度しか使えない、1要素に複数のid名は指定できない

 

上記を、初心者にもわかりやすく深堀り解説します。

僕のおすすめ使い分け方法も解説しているので、HTMLやCSSを学習中の人や、WordPressでブログをカスタマイズしたい人は参考にどうぞ。

 

スポンサードサーチ

【classとidの使い分け】HTML・CSSの基礎知識

【classとidの使い分け】HTML・CSSの基礎知識

classも、idも、HTMLの属性に記載し、CSSのセレクタでカスタマイズすることができる点は同じです。

 

とはいえ、両者の使い分けには明確な違いがあるので注意が必要。

使い分けが甘いと、あとあとメンテナンスしづらくなったり、CSSが効かないというトラブルが生じたりするので、まずは基本を押さえましょう。

 

classとは

  • 1ページ内で、同じclass名を何度も使える
  • 1要素に複数のclass名を指定できる

 

classの特徴
<div class="class-1">ひとつ目のクラスを指定。</div>
<div class="class-2 class-3">ふたつのクラスをまとめて指定。</div>
<div class="class-1">ひとつ目のクラスを再度指定。2回目の登場。</div>

 

1つ目と3つ目の<div>に、class-1が2回使われていますがOKです。

また、2つ目の<div>には、class-2class-3が並んでいますが、これもOK。

 

CSSでclassを指定する場合

class名をCSSで指定したい場合は、下記のように書きます。

 

CSS
.class-1 {
ここにカスタマイズする内容を記載
}

 

class名の前にドット(.)をつけてカッコで囲むだけです。

 

idとは

  • 1ページ内で、同じid名は一度しか使えない
  • 1要素に複数のid名は指定できない

 

idの特徴
<div id="id-1">ひとつ目(id-1)を指定。OK。</div>
<div id="id-2 id-3">ふたつのidをまとめて指定はできない。NG。</div>
<div id="id-1">ひとつ目(id-1)を再指定はできない。NG。</div>

 

1ページ内で同じidを2回以上使用したり、1タグの中に2つのidが存在するのはNGです。

 

CSSでidを指定する場合

id名をCSSで指定したい場合は、下記のように書きます。

CSS
#id-1 {
ここにカスタマイズする内容を記載
}

 

id名の前にシャープ(#)をつけて、カッコで囲めばOK。

 

【classとid】上手に使い分ける方法

classとidの使い分けに関しては、人によって意見が異なるところだと思いますが、僕がおすすめする使い分けの方法は次の通りです。

 

  • class:CSSでスタイルを指定する場所
  • id:スタイル変更が必要ない場所

 

classは、1ページ内で何度も使用できるので、サイトの中に何度も出てくる見出しや表などに使うのがおすすめです。

いっぽう、idは使用頻度が限られるため、サイト全体を通じて不変の固定要素に使うといいと思います。

 

CSSの優先度は“id > class”です

CSSでカスタマイズをした場合、classよりもidの方が優先度高いです。次の通り。

 

HTML
<div id="background-red" class="background-blue">背景色を2つ指定</div>
CSS
#background-red {
   background-red: #ff0000;
}
.background-blue {
   background-blue: #0000ff;
}

 

この場合、CSSの優先度は“id > class”なので、背景は赤色になるということです。

つまり、“どうしてもCSSは変更したくない、けどスタイルの一部だけを変えたい”というときなどは、classスタイルをidスタイルで上書きできちゃうということです。

(あまり使う機会はありませんが…)

 

WordPressでブログをカスタマイズしたい人

上記の通りなので、WordPressでブログをカスタマイズしたい人で、追加コードを挿入する場合はなるべくclassで属性を指定しましょう。

サーバー上のファイルを直接編集して、テーマそのものを編集したい人はidを使う機会もあると思いますが、基本的には不要です。

テーマの一部を自分好みにデザインしたい場合は、Chromeのデベロッパーツールなどを用いて、そのタグの属性を調べ、追加CSSでセレクタ指定してカスタマイズをどうぞ。

» 参考記事:WordPressカスタマイズのやり方【どんなテーマも共通(コツは属性値です)】

 

 

スポンサードサーチ

まとめ:class/idは、ちゃんと使い分けよう

まとめ

ということでまとめです。

 

classの使い方
  • 1ページ内で、同じclass名を何度も使える
  • 1要素に複数のclass名を指定できる
  • サイトに頻出する箇所に使うのがおすすめ
  • CSSのセレクタ指定はドット(.)
idの使い方
  • 1ページ内で、同じid名は一度しか使えない
  • 1要素に複数のid名は指定できない
  • サイトで不変の箇所に使うのがおすすめ
  • CSSのセレクタ指定はシャープ(#)

こんな感じですね。しっかり使い分けて、快適なプログラミングライフをどうぞ。

おわり。