id属性とclass属性
Updated
2021/8/8 9:52
Author

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
属性が付与された要素までスクロールしてくれます。実際にアクセスしてみてください。
この特性を使うことで、ページ全体ではなくページ中の特定のセクションを指すリンクを作れるわけです。
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