HTML/idとclass

出典: フリー教科書『ウィキブックス(Wikibooks)』

概説[編集]

id属性とclass属性は要素に名前を与える。このことから要素識別子などと呼ばれることがある。要素の指定がHTMLの表示に直接影響を与えることはないが、特定の要素を参照する必要がある際に使われることが多い。これらの属性はほとんど全ての要素に対して割り当てることができる。 id属性とclass属性は、JavaScriptのDOM操作やCSSのセレクタの中で主体的な役割を果たす。

id属性
id属性はある要素に対して固有の名前を与える。つまり、ひとつの文書中に複数の同じ値が出現してはならない。このためアンカー付きハイパーリンクのラベルとして使用することも可能となっている。もしも同じIDを使ってしまった場合はどちらかのid属性値を書き換える必要がある。
class属性
class属性は要素の種類や分類を現すためのもの。複数個所に指定することが可能となっているが、単独としての効果は全くなくCSSなどと組み合わせることでその効果を発揮する。

idとclass属性値の文法[編集]

id属性の値に使える文字は、最初の一文字がアルファベット( [a-zA-Z] )、数字( [0-9] )、ハイフン( - )、アンダースコア( _ )、コロン( : )、ピリオド( . )、それに続きアルファベット( [a-zA-Z] )、数字( [0-9] )、ハイフン( - )、アンダースコア( _ )、コロン( : )、ピリオド( . )が 0 文字以上続く文字列で、、大文字と小文字は区別される(「A」と「a」は別の値である)。最初の一文字に数字を使った場合Internet Explorerなどの一部ブラウザはこれを認識するが、Mozillaなど標準仕様に準拠しウェブページのソースを厳密に解釈するブラウザではこれを認識しない。

上記は、HTML5より前の定義で HTML5 では任意の文字列を使うことが出来る[1]。ただし空白文字を含んではいけない。

脚注[編集]

  1. ^ https://www.w3.org/TR/html51/dom.html#the-id-attribute There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc. (仮訳)IDは、数字だけ、数字で始まる、アンダースコアで始まる、句読点だけなど諸々の形式の制限はありません