id,classについて

【属性について】

そもそも属性って何？？ってところからなんですけども

ざっくりと説明すると

HTMLの要素に何かしらの設定を付けることができますよってものですね

|дﾟ)ゲームやアニメで言うなら

剣という武器要素にに燃やせるという炎属性をつけることができますよーっと

例題として

<image>という要素に"src"という画像のパスを規定したり、"width"の

画像の横幅のサイズを指定したり、"height"は画像の縦幅のサイズを指定したり

といった具合です。

【id属性とclass属性の役割】

id属性とclass属性の役割は

各要素に任意の名前をつけ、名前によって要素を区別することができます。

よって、同じ要素内だとしても名前を付けてあげることによって、

別々に指示してあげることができるようになるんです！

特にid属性とclass属性はグローバル属性といって

すべての要素で使うことができる属性に分類されます。

ではid属性とclass属性の違いについて解説していきます。

【id属性】

同じWebページ内でid属性の値が重複してはならない

つまり同じ名前をつけてあげることができないんですね。

CSSで指定する場合は頭文字に

#名前(シャープ+idで付けた名前)

を付けます

【class属性】

同じWebページ内で同じclass属性の値を何度でも用いることができる

id属性はHTML内に同じ名前を1つしか指定できませんが、class属性は複数可能です。

CSSで指定する場合は頭文字に

.名前(ピリオド+classで付けた名前)

を付けます

ーまとめー

classとid、どちらでスタイルを呼び出しても結果は変わりません。

classとidの違いは、「使用回数」にあります。

classは1ページ中に何度でも呼び出すことができますが、idは1ページ中に1度だけしか使うことができません。

結論

ホームページを制作していると、必ず　”これは一度しか使用しない”　スタイルが出てきます。

例：#wrapや#header、#footerなど

Web制作にてそこそこの規模になってくると、CSS周りもごちゃごちゃしてきてしまって、スタイルを修正する際に探し出すのが大変になってきます。

なので慣れてくるまでは統一でも大丈夫ですし、必ずしも使い分けなさいというわけでもないですが、classとidは使い分けた方が見やすく編集しやすいといった点があります。