CSS classとidの違いと使い方

CSS classとidの違いと使い方 画像

この記事では

  1. classとidの基礎知識
  2. classとidの使い分け方
  3. classとidの名前の付け方

について詳しく解説しています!

HTMLやCSSで登場するclassとidは、コーディングを行う上で完璧に理解しておきたいポイントです。
ですが、どちらも似たような要素で混乱してしまう方も多いのでは無いでしょうか?

本記事ではclassとidの明確な違いや使い分けについて詳しく解説しますので、正しく理解しマスターしていきましょう!

クラスとidの基礎知識

コーデイングの際に使用する言語のことをHTMLでは「属性」CSSでは「セレクタ」と呼びます。
HTMLでclassやid属性で名前を付けることにより、CSSでそれぞれをセレクタとして扱うことができるようになります。

classとidを説明する際によく使う例えで学校に見立てて説明します。

classを「1組」、idを「生徒」とします。
同じ「1組」に所属する人は複数人居ますが、同じ「生徒」は1人しかいない
はずです。

つまり、classはいくつあっても構いませんが、idはひとつしか存在してはいけません

このclassとidの使い分けがあやふやになってしまうと、とても見にくくメンテナンスがしづらいコードとなってしまいます。
おひとりでずっと管理する分には理解できていれば良いと思いますが、社内で複数人と管理する場合や社外の方に引き継ぐ場合など、他者とやり取りがある場合は、classとidを使い分け見やすく心がけると親切かと思います。。

classとid、何となく使い分けてしまっていたりしませんか?
しかし、それぞれの役割や特徴に明確な違いがあるので、同じ意味で使用すべきではありません。
この違いについて説明します

classとは?

ひとつ(同一)のclassはページ内で何度でも使うことができます
また、ひとつの要素に対して複数のclassを付けることができます。

使用例:
CSSでデザインをする際に使用します。
何度でも使えるため、さまざまな箇所で使用できます。

idとは?

ひとつ(同一)のidはページ内で1つしか使えません
また、ひとつの要素に対して複数のidをつけることはできません。

使用例:
ページ内リンク、ヘッダー、フッダー、ナビゲーションバー、サイドバーなどのページ内にひとつしかない要素などに使います。

classとidの使い方

ここでは具体的な使い方について説明します。

classの使い方

HTML

<要素名 class="class名">
CSS

.class名 {
プロパティ: 値;
}

classでは先頭に「.(ドット)」を付けます。

ルール

  • 数字や記号から始まる名前は使えない
  • 使用して良い記号は「-(ハイフン)」と「_(アンダーバー)」のみ
  • 半角英数字を使用する

基本的に自由に名を付けて使うことが可能ですが、上記は守らないといけないので注意が必要です。
また、複数のHTML要素に同じclass名を付けることで、同じCSSを一度に適用させることも可能です。

HTML

<p>黒文字です</p>
<p class="red">赤文字です</p>
<p>黒文字です</p>
<p class="red">赤文字です</p>
CSS

.red {
color: red;
}

これで

「赤文字です」の部分のみ赤文字になります。

IDの使い方

HTML

<要素名 id="id名">
CSS

#id名 {
プロパティ: 値;
}

CSSのidでは先頭に「#(シャープ)」を付けます。

  • 使用しても良い記号は「-(ハイフン)」と「_(アンダーバー)」のみ
  • 基本的に半角英数字を使用する(大文字でもOK)
  • 数字や記号から始まる名前は使えない

ダメな例

<p id="box">classおはよう</p>
<p id="box">class こんにちは</p>

この場合、<p id=”box1″> <p id=”box2″>のように名を変える必要があります。

また、idはページ内リンクを作成することも可能です。
ページ内リンクを作成する際にidを使うことも多いのでぜひ覚えておきましょう!

<div id="home">リンク🔗</div>
<a href="#home">HOMEへ戻る</a>

ページ内リンクのid名は、aタグ内に設置します。
上記の場合は、「#home」をクリックするとid名「home」にリンクするということになります。

idとclassの使い分けと優先順位

優先順位マスコット画像

基本的にはほぼ全ての場面でclassを使用すると思っても良いでしょう。
ヘッダーやフッダーなどのページ内にひとつしか無い要素についてはidを使用すると覚えておいてください。

  • idはヘッダーやフッダーの目印として使用したり、ページ内リンクを作成する際に使用する
  • classはデザイン設定する際に使用する

など、明確に使い分けることでメンテナンスもしやくすなり不具合が起こりにくくなります。

また、優先順位は基本的に、上から下に行くにつれて高くなります。

しかし、CSSにおけるclassとidのどちらが優先度(詳細度)が高いかについては、idの方が高くなりますので、コーディングの際は注意しましょう。

idとclass名を付ける時に気をつけるポイント

気をつけるポイントはいくつかあります。
また、命名規則に則って名を付けるようにしましょう。気をつけるポイントと命名によく使う一覧を下にまとめたので参考にしてください。

  • 複数のidを同じタグに指定するのはコーディング規約違反
  • 複数使用した場合はCSSが効かない(エラーとなる)
  • HTMLでidが重複した場合は、ページ内リンクがおかしくなる

上記を気をつけないと、CSSが反映されなくなってしまったり、ページ内のリンクやその他言語(JQueryなど)でエラーが出てしまったり、デザインやプログラムに不具合が起こる可能性もありますので特に注意しましょう!

要素 id・class名

ページ全体container
ヘッダーheader
サイトのタイトルsiteTtl
ロゴlogo
キャッチフレーズcatch
ナビゲーションnav
グローバルナビゲーションgNav
パンくずナビゲーションpagePath
コンテンツエリアcontents
メインコンテンツmain
サイドバーside, sideBar
フッターfooter
記事article
内側(入れ子構造)inner
案内guide
話題topic, topics
注目情報spotLight
選び出すpickup
次へnext
前へprev
ページトップへpageTop
もっと見るmore
お知らせinfo
ニュースnews
日付date
更新履歴、沿革history
リストlist
項目item
商品のリストgoodsList
写真エリアphoto, img
テキストエリアtxt
図版エリアfigure
注釈notes
バナーbn
お問い合わせcontact, inquiry
非表示hidden
広告pr
現在位置current
最初の項目、最後の項目 first(最初), last(最後), firstChild, lastChild
奇数列、偶数列odd(奇数), even(偶数)
レイアウトのためのボックスunit, box, col, area
他の要素に組み合わせて使うbox, area

名前付けは基本的に英語であること、頭文字は小文字であることです。
class・id名をつける際に参考にしてください。

まとめ

cssにおけるclassとidについて説明しました。

  • classは同じ名のものを何回でも使うことができる。
  • idは同じ名のものを1度のみ使うことができる。
  • 同じ名のidを使用するとエラーになってしまうので注意する。

同じ要素に名前を付けることができるものでも、効果や使い道が明確に違うことが理解できたかと思います。
classのみでのコーディングももちろん可能ですが、ぜひidとclassを使い分けてメンテナンスのしやすいコーディングを行ってみてくださいね。

この記事を書いた人

erica

こんにちは、そこら辺に居るただの主婦です。うそです。ほんとはデザイナーです。
神奈川県出身、北海道札幌育ち。(ほぼ)道産子です。

前職はお菓子業界で勤務。店長として実店舗運営や全国の催事出店・販売を担当し会社創立から最高売上を記録。
ふと、販売一筋だった自分が何か新しいことしたいと思うタイミングがあり、Web関係を仕事にする夫の影響でWebデザインの魅力に憑りつかれ、猛勉強。
昔からの知人だったRUCOの中塚社長に拾ってもらいました。拾い猫ならぬ拾い主婦です。
RUCOでは2022年から主にデザインを担当しています。

趣味は食べること・釣り・思い付いたらどこでも行くです。
500㎞位の運転ならノンストップで行きます。
最近は道の駅スタンプラリー完走を目標にしてます(頑張るぞ)