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回だけ使うことが出来るということを覚えておきましょう。

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

侍ブログ編集部

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

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー