ZeroPlus Media > Web制作 > HTML/CSS > 【HTML】id属性とは？使い方と特徴を解説

【HTML】id属性とは？使い方と特徴を解説

HTML/CSS

2022/08/06

2023/06/02

この記事では「HTMLのid属性」について解説します。

id属性はHTMLの属性の一つで、class属性と違って使用に関していくつかのルールがあります。ルールに従ってコーディングを行うことは、不具合を生み出さないために重要です。確実に理解しておきましょう。

この記事ではid属性について深堀りしています。ポイントを押さえながら学習していってください。

この記事で身につく内容

HTMLのid属性の使い方と基礎知識

HTMLのid属性とは
まとめ

HTMLのid属性とは

id属性はHTMLのタグに設定できる属性の一つです。属性とは要素に設定を付与することができるものです。属性はid属性の他にもclass属性やstyle属性などがあります。基本書式は次のようになります。

基本書式

<div id=”id”></div>

#id {
  スタイルを記述

}

基本書式にコードを当てはめると、次のようになります。

<div id="id"></div>

#id {
  width: 200px;
  height: 200px;
  background: orange;

}

出力結果

See the Pen html-id-基本 by ZeroPlus (@zeroplus-programming) on CodePen.

idにスタイルを適用する場合は、#id名 という記述になります。

ここからは、idの特徴を解説します。

id属性の特徴1：同名のidは複数使えない

id は、ページ内に同じid名を使うことができません。例えば次のようなHTMLではidを2つ設定しましたが、2つ目の同名idはNGです。

<div id="id"></div>

<!-- 同名のidはNG -->
<div id="id"></div>

<!-- id名が一つ目と違うのでOK -->
<div id="id2"></div>

3つ目のidは別名なので、こちらのidは使用できます。

この状態でCSSは適用できるのかというと、結論をいえば可能です。

<div id="id">id</div>

<!-- 同名のidはNG -->
<div id="id">id</div>

<!-- id名が一つ目と違うのでOK -->
<div id="id2">id2</div>

#id {
  width: 200px;
  height: 200px;
  background: orange;

}

#id2 {
  width: 100px;
  height: 100px;
  background: blue;

}

出力結果

See the Pen htnl-id-パターン by ZeroPlus (@zeroplus-programming) on CodePen.

ただしコーディングの規約上ではNGなので、例え同名のidにスタイルが適用されたとしても、同名のidを複数使うことはやめましょう。

もしスタイルを適用する場合は、idではなくclassに対して適用しましょう。

規約上の問題の他にも、例えばページ内リンクを使用する場合、同名のidが複数あると不具合が発生する問題が考えられます。

次のコードは、同名のidを使用した場合です。aタグをクリックすると、href属性と紐づいたid属性の要素に移動します。ただし、同名のidを使用しているため、2つめのid属性の要素に移動しないという不具合が発生しています。

<a href="#id" class="link">クリック</a>

<div id="id" class="box1">box1</div>

<div id="id" class="box2">box2</div>

.link {
  color: blue;
  font-size: 24px;
  margin-bottom: 500px;
  display: block;

}


.box1 {
  width: 500px;
  height: 2000px;
  background: orange;

}

.box2 {
  width: 500px;
  height: 2000px;
  background: red;

}

出力結果

See the Pen html-id-ボタン by ZeroPlus (@zeroplus-programming) on CodePen.

id属性の特徴2：id属性はclass属性より優先順位が高い

CSSにはスタイルが適用される優先順位があります。ルールの一つは、後から書いたものが優先して適用される、というものです。以下のコードは、classに2種類のCSSを適用させたものです。

<div class="class"></div>

.class {
  width: 200px;
  height: 200px;
  background: red;

}


.class {
  background: orange;

}

出力結果

See the Pen html-スタイル優先 by ZeroPlus (@zeroplus-programming) on CodePen.

後から記述したスタイルが適用されたので、背景色がオレンジになりました。

これを踏まえて、次のコードではどちらのスタイルが適用されるでしょうか？

 <div id="id" class="class"></div>

#id {
  width: 200px;
  height: 200px;
  background: orange;

}

.class {
  background: red;

}

出力結果

See the Pen html-css-id-優先 by ZeroPlus (@zeroplus-programming) on CodePen.

idで指定したスタイルが優先されて適用されます。CSSの優先順位のルールで、後から記述したものが優先されるとありました。

idよりも後からclassでスタイルを指定しても、idで指定したスタイルが優先されて適用されます。

このことから、idはclassよりも優先順位が高いといえます。

しかしコーディングのルール上、基本的にはid属性にスタイルは適用せずに、class属性にスタイルを適用するようにしましょう。

id属性の使いどころ

id属性の使いどころとしては、以下の場合が考えられます。

ページに一つしかなくてもいい要素に指定
JavaScriptで特定の要素にだけイベントを発火させる

ページ内リンクは、href属性とidとで紐づけて設定することができます。次のコードは、aタグをクリックするとidと紐づいた要素に移動します。

ページ内リンク

<a href="#id" class="link">クリック。box1に飛びます</a>
<a href="#id2" class="link">クリック。box2に飛びます</a>

<div id="id" class="box1">box1</div>
<div id="id2" class="box2">box2</div>

.link {
  color: blue;
  font-size: 24px;
  display: block;

}


.box1 {
  margin-top: 500px;
  width: 500px;
  height: 2000px;
  background: orange;

}

.box2 {
  width: 500px;
  height: 2000px;
  background: red;

}

出力結果

See the Pen html-ページ内リンク by ZeroPlus (@zeroplus-programming) on CodePen.

この場合は、id属性を複数使っていますが、同名のid名を使っていないので正常に動作します。

下のコードは特定の要素にだけイベントを発火させるコードです。

ボタンにid属性を設定し、JavaScriptでidを取得しています。

ボタンをクリックすると、要素の背景色が切り替わる動きをします。

JavaScriptで特定の要素にだけイベントを発火させる

<button id="color">クリック</button>
<div class="box1">box1</div>
<script src="main.js"></script>

const button = document.getElementById("color");
const box = document.querySelector(".box1");

button.addEventListener('click', ()=>{
  box.classList.toggle('active');

});

出力結果

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.