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

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

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

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

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

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

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

HTMLのidとは

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

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

HTMLのidの使い方

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

実行結果

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

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

実行結果

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

侍ブログ編集部

侍ブログ編集部

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説