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