HTML「id」と「class」の違いについて徹底解説
こんにちは、ゆうきです。
今回は、HTML/CSSをコーディングする際に重要となる「id属性」と「class属性」について解説します。
id属性とclass属性は、どちらもHTMLのタグに名前をつける役割を担います。class属性は、１つのページ内で1だけ利用できるのに対して、id属性は何度でも利用できるなど、両者は様々な点で役割が微妙に異なります。
このページでは、class/idの違いと使い方を解説していきます。
HTML/CSS初心者でも知らないと恥ずかしい内容ばかりなので、最後までご覧ください。
id・classをつける意味とは
id属性/class属性は、どちらもHTMLのタグに名前を付与する役割を持ちます。
名前を付与することで、単なるdivタグを「class name」「id name」で指定できるようになります。
すると、命令した部分だけにCSSを適用できるようになりデザインの幅を広げることが可能になるのです。
idとclassの違い・使い分け方
似ているようで異なるid属性とclass属性の違いは、
- id：ひとつのidはページ内で１度しか使えない。また、1要素に複数のidはつけられない。
- class：ひとつのページ内でclassをいくつでも使える。また、1要素に複数のclassをつけていい。
点にあります。
これを分かりやすいように学校に例えて説明すると、
class属性は学級名（1年4組・・・）、
id属性は生徒名（山田花子・・・）というようになります。
1年4組（class属性）存在する生徒は複数人いるのに対して、山田太郎（id属性）は基本的に１人です。
そのため、classは複数回利用でき、idは基本的に１回限りの利用ということが言えるのです。
タグに名称を付ける場合、それがそのページ内で唯一の存在であればid属性を用いて命名するのに対して、ある程度大まかなまとまりとしてとらえるのであれば、class属性を用いて命名する、と理解しておきましょう。
class属性よりもid属性が優先される
1つのタグにclass属性とid属性、両方の属性を指定した場合は、id属性が優先されます。
CSSの基本思想としては、idタグのように範囲が狭い属性ほど優先度が高くなるためおぼいておくと便利です。
まとめ
今回の記事でのポイントとしては、
- id と classの最大の違いは、ひとつのページで使える回数とひとつの要素に付与できる数。
- id は一意のもので、ひとつのページ上に同じidは複数使えない。また、ひとつの要素にidはひとつしかつけられない。
- classの使用数に制限はない。同じページ上に複数回使われても大丈夫。また、ひとつの要素に複数つけることも可能。
- idは一意的の目印にするだけ、CSSによるデザイン設定はclass、などと使い分けると管理・メンテナンスが楽でオススメ。
です。
現在、プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
＊ただし本気で取り組む方のみ
詳しくはこちらの記事をご覧ください。
