この記事では
- classとidの基礎知識
- classとidの使い分け方
- 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と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を使い分けてメンテナンスのしやすいコーディングを行ってみてくださいね。