CSSのセレクタの基本はHTMLタグ(h2とかpタグとか)だけど、同じタグのデザインが全て同じだと困る。
ということでオリジナルのセレクタがCSSには用意されていて、それが
- classセレクタ
- IDセレクタ
の2つだ。
classセレクタ
classセレクタは、
<div class="skill">~~</div>
って記述されている部分だ。
めちゃくちゃよく出てくるやつね。
ページの中で何度でも使える。
classセレクタの記述方法は、
【HTML】
<div class="skill">~~</div>
【CSS】
.skill{
margin-top:20px;
}
HTMLには適用したいタグの中に
class="~~"
=の後に"~~"を囲む。~には半角英数字でskillとか好きな単語とかを入れればいい。
CSSには、その”~”で指定した半角英数字の文字列を
.(ピリオド)を先頭に打って上記のように記述する。
プロパティとバリューのルールは一緒だから
.skill{プロパティ:バリュー;}
って感じでプロパティの間に:(コロン)、バリューの後に;(セミコロン)を入れるのだ。
IDセレクタ
IDセレクタは、classセレクタと違い、1ページの中で1回しか使えない。
HTMLへの記述の仕方は
<div id="wrapper">~</div>
って感じで id="~"をHTMLのタグ内に記述する。
CSSへの書き方はclassセレクタとほぼ一緒だ。
違うのは、classセレクタが.(ピリオド)から始まっているのに対し、IDセレクタは#(ハッシュ)から始まる点だ。
CSS
#wrapper{
~
}
って感じで記述する。
classセレクタとIDセレクタどっちを使うか迷ったら、まずclassセレクタを使っておいた方がプログラミング小僧と同レベルの初心者の人は間違いない。