【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」でHTMLのコードエラーが発生する事はないので、頭の中で10回唱えましょう。

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

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

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

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

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

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

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

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

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

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

このように分類すると、共通パーツのデザインを変更する時に一括で変更する事ができるので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」を使用しています。

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