99%実体験に基づく生々しい情報を発信中
  • twitter

【HTML/CSS】idとclassの違いと簡単な使い分け【初心者向けに解説】

吹き出しくん

HTML/CSSの学習を始めたけど、idとclassの使い分けと違いが分からない。どうやって使えばいいんだ・・・。

このような方向けの記事になります。

idとclassの有名な例えを紹介

「class」と「id」の役割の違いは、「class」を「学級名」、「id」を「学籍番号」と考えれば分かりやすいでしょう。
同じ学級(class)に属する生徒はたくさん居てもおかしくありませんが、同じ学籍番号(id)の生徒は居ない(=1番号につき1人しか居ない)はずです。
ALL Aboutから引用

上記は引用なのですが、分かりやすい例えとなっております。

本記事では「idとclassの使い分けと違い」をさらに深掘りして解説していきますので、先ほどの例えを頭の片隅に入れつつ読み進めてみてください。

idとclassの違いと簡単な使い分け【初心者向けに解説】

下記の順番で解説していきます。

  • ①:idとclassの決定的な違い
  • ②:idとclassの簡単な使い分け

順番に解説していきます。

①:idとclassの決定的な違い

冒頭の有名な例えで確認したと思いますが、下記のように決定的な違いがあります。

  • id:1ページで同じ名前は1回しか使えない
  • class:1ページで同じ名前を何度も使用できる

これだけ覚えていけば、まず「idとclass」でHTMLのコードエラーが発生する事はないので、頭の中で10回唱えましょう。

肝としては「id」ですね。
「id」のルールをしっかりと押さえるの重要です。

この後に「idとclass」の簡単な使い分けを解説するので、さらに理解を深めてみてください。

②:idとclassの簡単な使い分け

人によって多少は変わると思いますが、まずは下記のように使い分けると良いと思います。

  • idの使い方:ページの重要な部分
  • classの使い方:ページ内の共通のパーツ

基本的には上記のように使い分けるとコードが綺麗になってきます。

「id」はページの重要な部分に使う

  • ヘッダー
  • メインコンテンツ
  • セクション
  • サイドバー
  • フッター
  • など

上記にようにページ内に1つしか存在しない要素に対してはidを使用するのが最適です。

同じ名前のidはページ内に1つしか存在してはいけないので、このような使い方をするのが一般的です。逆にこれ以外のモノにはclassを使うようにすれば戸惑う事はなくなると思います。

「class」は基本的にはページ内の共通のパーツに使う

  • 同じデザインのボタン
  • 同じデザインのボックス
  • 同じデザインのフォント
  • 同じデザインではなくても、重要ではない部分

同じデザインの要素にはclassで分類するのが最適です。同じデザインではなくても、特に重要な役割がない場合はclassを使うようにしましょう。

重要な役割とは先ほど解説した「id」を付与すべき要素の部分の事です。

このように分類すると、共通パーツのデザインを変更する時に一括で変更する事ができるのでCSSの管理も楽になります。

※これ以外にもJavaScriptなどで動的な要素を作る際に「id」や「class」を付与する場合がありますが、初心者の方は考える必要はなしです。

スタイルの優先度は「id」の方が高い

同じ要素で「id」と「class」のスタイルが重複した時は「id」のスタイルが優先的に適応されます。

HTML
<h2 id="main_txt" class="txt">サンプル</h2> <style> #main_txt{ color: red; } .txt{ color: green; } </style>

このように同じ要素にスタイルを指定した場合は文字の色は「赤色」になりますので注意が必要です。

実践:「id」と「class」を使用したHTMLサンプル

最後に実際にどのように「id」と「class」を使うのかという点にフォーカスしてサンプルHTMLを作成したので参考にしてみてください。

HTML
<header id="header"> <h1 class="site_ttl"></h1> <p class="header_txt"></p> </header> <main id="main"> <section id="content1"> <h2 class="sub_ttl"></h2> <div class="box"> <h3></h3> <p></p> </div> </section> <section id="content2"> <h2 class="sub_ttl"></h2> <div class="box"> <h3></h3> <p></p> </div> </section> <section id="content3"> <h2 class="sub_ttl"></h2> <div class="box"> <h3></h3> <p></p> </div> </section> </main> <footer id="footer"> <h2 class="footer_ttl"></h2> <p class="footer_txt"></p> </footer>

重要な部分には「id」、それ以外の要素には「class」を使用しています。

コーディングのやり方には個人差がありますので、基本的になルールを覚えたら自分なりのコーディングルールを作成してみるのが良いと思います。