HTMLのidとは?使い方やclassとの違いについても解説

HTMLのidの意味がよくわからない
HTMLのidの使い方について知りたい
classとidの違いがよくわからない

HTMLを始めたばかりの初学者にとっては覚えるべきタグがいっぱいありすぎて、どのタグにどんな意味があるのか、いまいちわからない方も多いのではないでしょうか?

HTMLの中で、id="sidebar"のような表記を見たことはありませんか?idはCSSやJavaScriptなどを扱うときにも出てくるキーワードで、どのようなものなのか分からない初心者の方も多いと思います。

そこで、今回はHTMLのidとは何かについて、意味や使い方について解説をしていきます。

  • idとは
  • idの使い方
  • idを使うべきところ
  • classとidの違い

HTMLのidについて、基本からやさしく解説していくのでぜひご覧ください。

HTMLのidとは

それではidとは何かを解説していきます。idはHTMLのタグに設定できる属性として用意されています。そしてこのidを目印にして、CSSやJavaScriptで装飾やさまざまなプログラムを実行させます。

idはclassとは違って、1つのページに同じ名前のidを一つだけ設定させることが出来ます。

HTMLのidの使い方

それではidの使い方について見ていきましょう。こちらのコードをご覧ください。

<style>
  #page-title {
    color: red;
  }
  .text {
    color: black;
  }
</style>
 
<html>
  <h1 id="page-title">Title</h1>
  <p class="text">ここは本文です。</p>
</html>

実行結果

ここではh1タグが付いているタイトルとなる部分に対して、idをつけました。ページそのもののタイトルは1つであるべきなので、制約がなければここではidを使うべきです。

また、セレクタの指定方法もclassのときの「.」とは違い、「#」で指定されているのが分かると思います。ちなみに、idはclassよりも優先順位が高いという特徴もあります。こちらのコードをご覧ください。

<style>
    #page-title {
      color: red;
    }
    .blue {
        color: blue;
    }
    .text {
      color: black;
    }
  </style>
   
  <html>
    <h1 id="page-title" class="blue">Title</h1>
    <p class="text">ここは本文です。</p>
  </html>

実行結果

page-titleというidと、blueというclassが同じ要素に対して設定されていますが、実行結果を見てみるとタイトルは赤、つまりidが優先されていることが分かりますね。以上が基本的なidの使い方になります。

HTMLのidを使うべきところ

ここまでも簡単に解説してきましたが、ページ内に同じ名前のidは一つしか設定することが出来ません。そのため、同じスタイルを繰り返して適用したい本文などではidは使うべきではありません。

先ほどのページタイトルのように、ナビゲーションバーやサイドバー、ヘッダーやフッターなど、ページに一つしか無くても良いような要素に対して、idを使っていきましょう。

classとidの違い

classとidは、複数回同じ名前のものを使える(class)か、使えない(id)かが大きな違いになります。そのような場合全部をclassで指定してレイアウトを作っていけば良いと思う方もいるかもしれません。

実際にはidを使わずにclassだけを使ってCSSを書いていく手法もあります。ただし、先程解説したように、idはclassよりもCSSが適用される優先順位が高いという特徴もあります。

細かなレイアウトではなく、大まかなレイアウトを決めるとき、idを振り分けておくとCSSも読みやすいものになります。

まとめ

この記事ではHTMLで使われるidについて、簡単な使い方からclassとの違いについてを解説してきました。idについては分かって頂けたでしょうか? classは同じ名前のものを複数回、idは1回だけ使うことが出来るということを覚えておきましょう。

Writer

侍エンジニア編集部

株式会社SAMURAI

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら