プログラミング勉強日記

2020年9月23日
よくCSSでclassを使うが、classの方が複数指定できるし便利なのでは？idを使う必要はないのでは？と思った。なので、idとの使い分けについてまとめる。

id属性とclass属性とは

　CSSのセレクタ(h1, p)などでスタイルを指定することはできるが、h1やp要素は多く利用されるので、同じ要素でも別のスタイルを使用したいときにHTMLのid属性やclass属性を使う。

　CSSはHTMLのどこの部分のなにをどのようにするか指定することができ、書き方は以下のようになる。

どこの(セレクタ) {
  なにを(プロパティ): どうする(値);
}

　このセレクタをid属性とclass属性の属性値(名前)を指定することができ、自由にスタイルを変えることができる。class属性の場合は名前の前に.を、id属性は名前の前に#をつける。

HTML

<h1>こんにちは</h1>
<p class="red">私の名前は田中太郎です</p>
<h1>こんにちは</h1>
<p class="blue">私の名前は田中次郎です</p>
<p id="green">よろしくお願いします</p>

CSS

h1 {
  color: orange;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
#green {
  color: green;
}

　上で述べたようにid属性とclass属性を指定することで自由にスタイルを変えることができる。どちらでスタイルを呼びだしても結果は変わらないし、読み込み速度も変わらない。

　ただ、class属性は1ページに何度でも使用できるのに対し、id属性は1ページに1度しか使ってはいけない。
　一見id属性は不便なように思うが、規模の大きいホームページになるとCSSが複雑になっていくので、id属性とclass属性を使い分けたほうが編集や修正に便利になる。

　※id属性を複数使っても正しくスタイルが反映される場合があるが、文法的には間違えてるので注意する。

　ここで本題になります。
　class属性は何度でも使用することができるので、頻繁に呼び出すCSSはclassで定義して、一度しか使わないCSSはidで定義する。
　特にid属性は一度しか使わないヘッダーやフッターで使われることが多い。