idとclassの使い分けについて
このまま学習を続けて、本当に実務で通用するのか不安な方へ。
そんな方に向けて、実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。
さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
idとclassの使い分けについて解説していきます。
目次
1. idとclassの違い
CSSを記述するためにHTMLタグに名前をつける方法として、「id」と「class」2種類の指定方法があります。
両者の違いは、idが同じページ内で1度しか使用できないのに対し、classは何度でも使用することができます。
2. idとclassの使い分け
一般的にはclassを使用することが多いですが、idを使用する場合と、使用しなくても良いが使用するとメリットがある場合の2つについて説明していきます。
idを使用する場合
下記の場合は、idの使用を推奨します。
- ①：内部リンクの遷移先として指定する場合
- ②：JavaScriptなどの処理で要素を特定する必要がある場合
①：内部リンクの遷移先として指定する場合
例えば、グローバルナビゲーションからページ内のコンテンツに遷移する場合など、遷移先を一意に特定しなければならない場合は遷移先の要素にidを指定します。
②：JavaScriptなどの処理で要素を特定する必要がある場合
特定の要素をクリックした場合に何か処理を行いたい場合など、JavaScript側で要素を特定したい場合は、対象の要素にidを指定します。
idを使用するとメリットがある場合
下記の場合は必ずしもidを使用する必要はないですが、使用することで得られるメリットもありますので、好みに合わせて使用してみてください。
- ①：コード内で明示的に一度しか使用していないことを示したい場合
- ②：他のCSSからの干渉を防ぎたい場合
- ③：CSSを整理したい場合
①：コード内で明示的に一度しか使用していないことを示したい場合
idで指定されているとその要素の中のクラスがページ内の他の箇所では使用されていないことが一目でわかるため、第3者がCSSを修正する際などに修正がしやすいというメリットがあります。（全てclassで記述されている場合、ページ内の他のclassに影響が出ないか確認が必要。）
②：他のCSSへの干渉を防ぎたい場合
ブロックやセクション毎にidで囲んでおくことで、中のCSSがページ内の他のブロックに干渉するのを防ぐことができます。
③：CSSを整理したい場合
ブロックやセクション毎にidで囲んでおくことで、CSSを整理して見やすくまとめることができます。（これは好みです。）
3. まとめ
idとclassの使い分けについて解説してきました。
一般的にはCSSは「class」を使用して記述しますが、要素を一意に特定したい下記のような場合には「id」を使用します。
- 内部リンクの遷移先として指定する場合
- JavaScriptなどの処理で要素を特定する必要がある場合
その他については、idとclassの特性をよく理解した上で、ご自身のコーディングスタイルに合わせて使い分けましょう！
あなたのコーディング力、実務で通用しますか？
以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。
- 模写はできるようになってきたけど、実務に通用するか不安
- ポートフォリオに悩んでいる・載せる実績がない
- 案件に挑戦したいけど、自信がなくて一歩踏み出せない
今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。
コーディングを仕事にしていきたい方へ
Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。
- ポートフォリオに載せる実績がない・・・
- 実務経験がゼロ・・・
- 案件獲得に不安がある・・・
1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。
現場レベルのスキルを身につけたい方へ
現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。
本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。
- 第1章【入門編】プロフィールサイト〜フレックスボックス
- 第2章【初級編】ブランドサイト〜ポジション
- 第3章【中級編】サービスサイト〜複数ページ
- 第4章【上級編】カフェサイト〜複数レイアウト
- 第5章【応用編】ランディングページ〜動きのあるWebサイト
- 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作
現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。
