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

こんな人向けの記事。

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

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

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

スポンサードサーチ

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

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

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

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

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-2とclass-3が並んでいますが、これもOK。

CSSでclassを指定する場合

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

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

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

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で指定したい場合は、下記のように書きます。

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

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

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

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

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

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

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

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

<div id="background-red" class="background-blue">背景色を2つ指定</div>

#background-red {
   background-red: #ff0000;
}
.background-blue {
   background-blue: #0000ff;
}

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

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

（あまり使う機会はありませんが…）

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

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

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

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

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

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

Mana SBクリエイティブ 2019年03月18日頃

楽天ブックスで探す

楽天koboで探す

Amazonで探す

Kindleで探す

スポンサードサーチ

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

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

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

おわり。