はじめに
学習したことを自分用の参考書のようにまとめていきます。
classとは
- classは複数の要素に共通のスタイルや振る舞いを与えるために使います。
- 同じクラス名を複数の要素に付けることができ、再利用性が高いです。
- CSSではクラスを指定するために、ドット（.）を使います。
下記の例では、class="test" を持つ2つの要素にスタイルが適用されます。
html
<body>
<p class="test">スタイルあり</p>
<p>スタイルなし</p>
<p class="test">スタイルあり</p>
</body>
css
.test {
background-color: yellow;
color: red;
}
idとは
- idはページ内で一意である必要があり、同じidを持つ要素は一つしか存在できません。
- 特定の1つの要素に対してユニークなスタイルやスクリプトを適用するために使用します。
- CSSではIDを指定するためにシャープ（#）を使います。
下記の例では、id="unique"を持つ1つの要素にのみスタイルが適用されます。
html
<body>
<p id="test">このテキストは白色で青色の背景です。</p>
<p>このテキストはスタイルがありません。</p>
</body>
css
#test {
background-color: blue;
color: white;
}
classとidの使い分け
- class は複数の要素に同じスタイルやスクリプトを適用したい場合に使用します。多くの要素に同じクラス名を使えるので、再利用が可能です。
- id はユニークな要素に対して特定のスタイルやスクリプトを適用したい場合に使用します。1つのページに同じidを複数使ってはいけません。
| 特徴 | class | id |
|---|---|---|
| 使用回数 | 複数の要素に使用可能 | ページ内で1つの要素だけが持つ |
| CSSでの指定 | ドット (.) を使用 | シャープ (#) を使用 |
| JavaScriptでの利用 | getElementsByClassNameで取得可能 | getElementByIdで1つだけ取得可能 |
さいごに
いかがだったでしょうか。
他にもいろいろな記事を書いているのでぜひ読んでいただけたら嬉しいです。