4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CSSのidとclassの使い分け

Last updated at Posted at 2020-09-23

プログラミング勉強日記

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

id属性とclass属性とは

 CSSのセレクタ(h1, p)などでスタイルを指定することはできるが、h1p要素は多く利用されるので、同じ要素でも別のスタイルを使用したいときに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;
}

0923.png

id属性とclass属性の違い

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

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

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

id属性とclass属性の使い分け

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

参考文献

idとclassをわかりやすく説明!ゼロから始めるHTML/CSS講座Vol13
classとidの使い方

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?