非エンジニアのためのデジタルリテラシー/リファレンス/HTML/id属性とclass属性
チュートリアルリファレンス 用語集
チュートリアルリファレンス 用語集

id属性とclass属性

Updated
2021/8/8 9:52
Author
Jumpei IkegamiJumpei Ikegami
order
7
「HTMLタグの書き方」で紹介した容認、HTMLタグには属性を付与することができます。aタグにとってのhref属性など、付与できる属性はHTMLタグの種類に依存している場合もあります。一方、広く様々なタグに対して付与できる属性もあります。中でも代表的な属性は、id属性とclass属性です。
‍

id属性

id属性は、その名の通り要素を一意に特定する（identifyする）ための属性です。
HTML
ある1枚のWebページの中で、あるid属性が付与された要素は1つまでしかありません。逆に、複数の要素でid属性に重複がある場合、そのページの実装は間違っています。（実際には、id属性が重複した微妙な実装のページもこの世にはたくさん存在しますが。。。）
ちなみに、1つの要素に対して複数のid属性を付与することもできません。
id属性を使うとページ中から要素を1つだけ特定できるので、次の2つの用途で使われます。
  • ページ内リンクを実現するため
  • JavaScriptからその要素を見つけやすくするため
‍

ページ内リンクを実現する

たとえば、Yahoo!のトップページでは、「リアルタイム検索で話題のキーワード」という領域に対して"Realtime"というid属性が付与されています。（2020年7月現在の情報なので、もし変わっていたらフィードバックフォームから教えてください。）
次のようにURLアンカーとして#RealtimeをつけてYahoo!のトップページにアクセスすると、ブラウザが自動で対応するid属性が付与された要素までスクロールしてくれます。実際にアクセスしてみてください。
https://www.yahoo.co.jp/#Realtime
この特性を使うことで、ページ全体ではなくページ中の特定のセクションを指すリンクを作れるわけです。
‍

JavaScriptからid属性で要素を特定する

JavaScriptでページ上の要素を特定するための手がかりは、たくさんあります。たとえば、後述するclass属性でJSからHTML要素を特定しすることもできます。しかし、class属性は同一ページで重複しても問題ないので、HTMLを書き換えた場合にJSで使っていたのと同じclass属性を持った要素が増えてしまい、うまく動作しなくなることもあります。id属性を使うと、その懸念は軽減されます。（もちろん、id属性を使っていてもそのHTML要素のid属性自体が書き換えられたら同じことですが。）
id属性をCSSセレクタで利用するには、「# + id属性の値」のように記述します。
JavaScript
詳しくは、次のリファレンスをご覧ください。
Webページ上のテキストや属性などを取得する2021/6/20 6:082021/8/8 9:36
‍

class属性

class属性は、id属性とは違い同じ値を複数の要素に対して付与することができます。
HTML
class属性は、主にCSSを使ったスタイルを当てる要素を指定するのに使われます。class属性をCSSセレクタで利用するには、「.（ドット） + id属性の値」のように記述します。たとえば、上記のHTML中にあった"emphasis"というclass属性にCSSで強調のためのスタイルを当てるには、このようにします。
CSS
class属性で強調すべき部分を指定
なお、1つの要素に対して複数の異なるclass属性値を付与することもできます。その場合は、半角スペース区切りで複数指定します。
HTML
‍

もっと詳しく知りたい方へ