今回はclassセレクタとIDセレクタの違いについて。
Contents
classセレクタ
classセレクタはHTMLコードにおいて、下記のように指定されているものだ。
1 | <div <span style="color: #ff0000;">class="skill"</span>>~</div></code>。 |
classセレクタの記述方法はHTMLではクラス名を指定。
【HTML】
1 | <div <span style="color: #ff0000;">class="skill"</span>>~</div> |
上記の場合、skill がクラス名となる
CSS側では、そのクラスに対して、具体的なスタイルを指定する。
【CSS】
1 2 3 | .skill｛ margin-top:20px; } |
上記の場合、skillクラスにmargin-top:20pxを指定している。
このclassセレクタはページの中で何度でも使用可能である点が後述するIDセレクタとの違いだ。
IDセレクタ
IDセレクタは、classセレクタと違い、1ページの中で1回しか使えない。
HTMLへの記述の仕方は下記のように、id="~"をHTMLのタグ内に記述する。
【HTML】
1 | <div id="wrapper">~</div> |
上記の場合、idはwrapperとなる。
CSSへの書き方はclassセレクタとほぼ一緒だ。
異なる点は、classセレクタが.(ピリオド）から始まっているのに対し、IDセレクタは＃（ハッシュ）から始まる点だ。
【CSS】
1 2 3 | #wrapper{ ～ } |
まとめ
classセレクタとIDセレクタの違いは下記の通りだ。
- classセレクタはページの中で何度でも利用可能。一方でIDセレクタはページの中で1回のみ。
- CSSにおいてclassセレクタ名は .(ドット)から始まるのに対し、IDセレクタは＃（シャープから始まる）
