HTMLを学習していると、タグの中に「id」と書かれているコードを見かけることがあります。しかし、「id属性は何のために使うの？」「class属性とは何が違うの？」「どの場面で使えばいいの？」と疑問に感じる方も多いのではないでしょうか。id属性は、HTML要素に固有の名前を付けるための属性で、ページ内の特定の要素を識別したり、ページ内リンクの移動先として指定したりとJavaScriptで特定の要素を操作したりするときに使われます。
この記事では、HTMLのid属性の意味や基本的な使い方、class属性との違い、ページ内リンクでの活用方法を初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。
オススメ：HTML・CSSの基礎を無料で学べる初心者向け講座はこちら
関連記事：「HTMLのclass属性とは？使い方やCSSとの関係を初心者向けに解説」
HTMLのid属性とは？
id属性は、HTML要素に固有の名前を付けるための属性です。Webページ内の特定の要素を識別する役割があり、CSSやJavaScriptから要素を指定したり、ページ内リンクの移動先として利用したりする際に使用されます。HTMLを学び始めたばかりの方はclass属性と混同しやすいですが、id属性には「1つのページ内で同じ名前を重複して使えない」という大きな特徴があります。
id属性の役割
id属性は、ページ内にある特定の要素を識別するための目印として使用されます。
例えば、見出しやお問い合わせフォームなど、ページ内で1つしか存在しない要素に設定されることが多くあります。
<h1 id="site-title">忍者CODE</h1>上記の例では、「site-title」という名前で見出しを識別しています。
このようにid属性を付けることで、後からCSSやJavaScriptで対象の要素を指定しやすくなります。
id属性は要素を一意に識別するために使う
id属性の最大の特徴は、1つのページ内で同じ名前を1回しか使えないことです。
例えば、以下のような書き方は推奨されません。
<div id="profile">プロフィールA</div>
<div id="profile">プロフィールB</div>同じid名を複数の要素に設定すると、ブラウザやJavaScriptが正しく対象を判別できなくなる場合があります。そのため、id属性は「ページ内で唯一の要素」に対して使用するのが基本です。例えば、ヘッダー・フッター・お問い合わせセクションなど、1ページに1つしか存在しない要素に適しています。
class属性との関係
id属性とclass属性はどちらもHTML要素に名前を付けるための属性ですが、用途は異なります。
id属性は特定の要素を識別するために使用し、class属性は複数の要素をグループ化するために使用します。例えば、複数のボタンに同じデザインを適用したい場合はclass属性を使用し、お問い合わせフォームのような1つしか存在しない要素にはid属性を使用します。
つまり、class属性は「仲間分け」、id属性は「個人名を付ける」と考えるとイメージしやすいでしょう。
HTMLでid属性を使う方法
id属性は、HTML要素に固有の名前を付けるための属性です。CSSでデザインを適用したり、JavaScriptで特定の要素を操作したりするときによく使用されます。ここでは、id属性の基本的な書き方からCSS・JavaScriptでの利用方法まで見ていきましょう。
基本的な書き方
id属性は、HTMLタグの中に「id=”名前”」という形式で記述します。
<h1 id="title">HTML学習サイト</h1>上記の例では、h1タグに「title」というid名を設定しています。id名は自由に付けられますが、後から見ても役割が分かる名前にすることが大切です。例えば、「header」「contact」「profile」など、要素の内容が想像できる名前を付けると管理しやすくなります。
なお、同じページ内で同じid名は使用できないため注意しましょう。
CSSでidを指定する方法
id属性にCSSを適用する場合は、id名の先頭に「#（シャープ）」を付けて指定します。
<h1 id="title">HTML学習サイト</h1>#title {
color: blue;
font-size: 32px;
}上記のように記述すると、「title」というidを持つ要素だけにスタイルが適用されます。class属性では「.（ドット）」を使用しますが、id属性では「#（シャープ）」を使用する点が大きな違いです。
関連記事：「【CSS初心者向け】idセレクタの効果的な使い方と注意点」
JavaScriptでidを取得する方法
id属性はJavaScriptから特定の要素を取得する際にも利用できます。JavaScriptでは「getElementById()」を使用して要素を取得します。
<button id="btn">クリック</button>const button = document.getElementById("btn");
console.log(button);このコードでは、「btn」というidを持つボタン要素を取得しています。取得した要素に対して、文字を変更したり、クリックイベントを設定したりすることが可能です。例えば、ボタンを押したときにメッセージを表示するような機能も実装できます。
JavaScriptで特定の要素だけを操作したい場合、id属性は非常に便利な目印になります。
id属性でページ内リンクを作成する方法
id属性の代表的な使い方の一つが、ページ内リンクです。ページ内リンクとは、同じページ内の特定の場所へ移動できるリンクのことです。長い記事の目次や「お問い合わせはこちら」ボタンなどでよく利用されています。id属性とaタグを組み合わせることで、簡単にページ内リンクを作成できます。
id属性を設定する
まずは、リンクの移動先となる要素にid属性を設定します。
<h2 id="contact">お問い合わせ</h2>上記の例では、「お問い合わせ」という見出しに「contact」というid名を設定しています。
このid名が、ページ内リンクの移動先になります。
id名は自由に設定できますが、後から見ても内容が分かる名前にしておくと管理しやすくなります。
aタグからリンクする
次に、aタグのhref属性に「#id名」を指定します。
<a href="#contact">お問い合わせはこちら</a>このリンクをクリックすると、「id=”contact”」が設定された要素まで自動的に移動します。ページ内リンクでは、URLではなく「#」を付けたid名を指定するのがポイントです。
HTMLだけで実装できるため、初心者でも簡単に設定できます。
ページ内リンクの活用例
ページ内リンクは、長いページの利便性を向上させるためによく利用されます。
例えば、記事の冒頭に目次を設置し、各見出しへ移動できるようにするケースです。
<ul>
<li><a href="#section1">HTMLとは</a></li>
<li><a href="#section2">CSSとは</a></li>
</ul>
<h2 id="section1">HTMLとは</h2>
<h2 id="section2">CSSとは</h2>このように設定すると、目次から各セクションへすぐに移動できます。また、ページ上部へ戻る「トップへ戻る」リンクや、お問い合わせフォームへの誘導ボタンなどにも活用されています。ページが長くなるほどユーザーの利便性が向上するため、Webサイト制作ではよく使われるテクニックの一つです。
関連記事：「HTMLのaタグとは？リンクの作成方法を初心者向けに解説」
実務で使われるid属性の活用例
実際のWeb制作現場では、id属性は単なるHTMLの識別子としてだけではなく、JavaScriptとの連携やページ内ナビゲーションの実装で活用されることが多くあります。
お問い合わせフォームへの誘導
企業サイトやLP（ランディングページ）では、ページ上部のボタンからお問い合わせフォームへ移動させるためにid属性が利用されます。
<a href="#contact">無料相談はこちら</a>
<section id="contact">
お問い合わせフォーム
</section>
ユーザーが長いページをスクロールする必要がなくなるため、コンバージョン率の改善にもつながります。
JavaScriptによる動的な操作
実務では、ボタンのクリックイベントやモーダルウィンドウの表示などにもid属性が利用されます。
const submitButton = document.getElementById("submit-btn");
特定の要素を確実に取得したい場合にid属性は便利ですが、最近では複数要素を扱いやすいclass属性やdata属性を利用するケースも増えています。
id属性とclass属性の違い
id属性とclass属性はどちらもHTML要素に名前を付けるための属性ですが、用途やルールには違いがあります。初心者の方は「どちらを使えばよいのか分からない」と迷うことも多いですが、それぞれの特徴を理解しておくことで適切に使い分けられるようになります。
idはページ内で1回だけ使う
id属性は、ページ内の特定の要素を識別するために使用します。そのため、同じページ内で同じid名を複数の要素に設定することはできません。
<header id="site-header"></header>
<!-- 同じid名は使用しない -->
<header id="site-header"></header>id属性は「このページに1つしか存在しない要素」に付けるのが基本です。例えば、ヘッダー・フッター・お問い合わせフォームなどに利用されることがあります。また、ページ内リンクやJavaScriptで特定の要素を取得する際にもよく使用されます。
classは複数の要素で使える
class属性は、複数の要素をグループ化するために使用します。同じclass名を何度でも利用できるため、共通のデザインや機能をまとめて適用したい場合に便利です。
<button class="btn">送信</button>
<button class="btn">確認</button>
<button class="btn">戻る</button>上記のように同じclass名を設定すれば、CSSを1回記述するだけで複数のボタンに同じデザインを適用できます。Web制作では、CSSのスタイル指定の多くがclass属性を使って行われています。
関連記事：「HTMLのclass属性とは？使い方や役割を初心者向けに解説」
CSSの優先順位の違い
id属性とclass属性には、CSSの優先順位（詳細度）の違いがあります。同じ要素にid属性とclass属性の両方が設定されている場合、基本的にはid属性のスタイルが優先されます。
<h1 id="title" class="headline">
サンプルタイトル
</h1>#title {
color: red;
}
.headline {
color: blue;
}この場合、文字色は赤色で表示されます。
これはidセレクタの方がclassセレクタよりも優先順位が高いためです。
ただし、近年のWeb制作ではCSS管理をしやすくするため、スタイル指定はclass属性を中心に行うことが一般的です。id属性はページ内リンクやJavaScriptでの要素取得など、特定の目的で使用するケースが多くなっています。
現場ではCSSの指定にid属性をあまり使わない理由
HTMLの学習段階では、id属性を使ったCSS指定を学ぶことがあります。 しかし、実際のWeb制作現場では、スタイル指定にid属性を多用するケースはあまり多くありません。 その理由は、idセレクタの優先順位（詳細度）が高いためです。
#title {
color: red;
}
一見便利に見えますが、後から別のCSSを適用したい場合に上書きしづらくなり、管理が複雑になることがあります。 そのため、現在のWeb制作では以下のようにclass属性でデザインを管理する方法が主流です。
.title {
color: red;
}
現在では、デザインはclass属性、JavaScriptやページ内リンクはid属性という役割分担が一般的になっています。
id属性を使う際の注意点
id属性は便利な機能ですが、使い方を間違えるとCSSやJavaScriptが正しく動作しない原因になることがあります。特に初心者の方は、class属性との違いを十分に理解しないまま使用してしまい、思わぬトラブルにつながるケースも少なくありません。
同じid名を複数使わない
id属性は、ページ内で要素を一意に識別するための属性です。
そのため、同じページ内で同じid名を複数の要素に設定することは推奨されていません。
<div id="profile">プロフィールA</div>
<div id="profile">プロフィールB</div>上記のような記述をすると、JavaScriptで要素を取得する際やページ内リンクを利用する際に意図しない動作が発生する可能性があります。
id属性は「そのページに1つだけ存在する要素」に付けるものと覚えておきましょう。
CSSの指定に多用しない
id属性はCSSでも利用できますが、スタイル指定のために多用するのはあまりおすすめできません。なぜなら、idセレクタはclassセレクタより優先順位が高いため、後からデザインを変更しづらくなることがあるからです。
#title {
color: red;
}小規模なサンプルでは問題ありませんが、ページ数が増えるとスタイル管理が複雑になる場合があります。そのため、現在のWeb制作ではデザインの指定はclass属性を中心に行い、id属性はページ内リンクやJavaScriptで利用することが一般的です。
ReactやVue.jsではid属性の使用頻度が低い
近年のWeb開発では、ReactやVue.jsなどのJavaScriptフレームワークを利用するケースが増えています。 これらの環境でもid属性は利用できますが、実際にはclass属性やコンポーネント単位の管理が中心です。 例えばReactでは、要素取得にid属性を使う代わりに「ref」を利用することが一般的です。 そのため、
- ページ内リンク → id属性
- スタイル指定 → class属性
- 要素操作 → refやstate管理
という使い分けが主流になっています。 HTMLの基礎を学ぶ段階ではid属性の理解が重要ですが、モダンな開発環境では利用シーンが限定されることも覚えておきましょう。
わかりやすい名前を付ける
id名は自由に付けられますが、役割が分かる名前を付けることが大切です。
例えば、以下のような名前は内容が想像しやすく管理しやすくなります。
<section id="contact"></section>
<header id="site-header"></header>
<footer id="site-footer"></footer>反対に、「test」「aaa」「sample1」のような意味が分かりにくい名前は、後からコードを見返した際に役割を把握しづらくなります。
自分だけでなく他の人が見ても理解しやすい名前を付けることで、保守や修正もしやすくなります。学習段階から分かりやすい命名を意識することで、実務でも読みやすいコードを書けるようになるでしょう。
HTMLとCSSを効率良く学ぶ方法
id属性の使い方を理解するためには、実際にHTMLやCSSを書きながら学習することが大切です。特にid属性は、CSSやJavaScript、ページ内リンクなどさまざまな場面で利用されるため、手を動かしながら学ぶことで理解が深まります。
実際にコードを書きながら学習する
HTMLやCSSは知識だけを覚えるよりも、実際にコードを書きながら学習する方が上達しやすいです。例えば、id属性を設定した見出しを作成し、CSSでデザインを変更したり、ページ内リンクを設定したりしてみましょう。
<h2 id="about">サービス紹介</h2>
<a href="#about">サービス紹介へ移動</a>実際にブラウザで表示を確認しながら試すことで、id属性の役割や使い方を自然に理解できるようになります。また、class属性との違いを比較しながら学習すると、より実践的な知識が身につきます。
独学が不安ならプログラミングスクールもおすすめ
HTMLやCSSは比較的学びやすい言語ですが、「idとclassの使い分けが分からない」「CSSが思った通りに反映されない」と悩むことも少なくありません。
独学でつまずいたまま学習が止まってしまう方も多いため、効率良く学びたい場合は質問できる環境を活用するのもおすすめです。
忍者CODEでは、HTMLやCSSの基礎からWebサイト制作まで体系的に学習できます。動画教材で学びながら実際にコードを書くアウトプット中心の学習ができるため、知識だけでなく実践的なスキルも身につけやすいのが特徴です。
HTMLやCSSをこれから本格的に学びたい方は、自分に合った学習環境を選びながらスキルアップを目指してみましょう。
まとめ
本記事では、HTMLのid属性について解説しました。
id属性は、HTML要素に固有の名前を付けるための属性です。ページ内の特定の要素を識別したり、ページ内リンクの移動先として指定したり、JavaScriptで要素を取得したりする際に利用されます。また、id属性は同じページ内で同じ名前を複数使用できないという特徴があります。一方で、class属性は複数の要素に同じ名前を設定できるため、それぞれの役割を理解して使い分けることが大切です。
さらに、id属性はCSSで指定することもできますが、現在のWeb制作ではスタイル管理のしやすさからclass属性を中心に利用するケースが一般的です。id属性はページ内リンクやJavaScriptでの要素取得など、特定の目的で活用する場面が多くなっています。
HTMLやCSSの学習では、実際にコードを書きながら試してみることが理解への近道です。id属性の使い方を身につけることで、より実践的なWebページを作成できるようになります。ぜひ今回紹介したサンプルコードを参考にしながら、id属性を使ったページ内リンクや要素の指定を実際に試してみてください。
