CSSの基本を理解する #1
まずはCSSの基本文法について学習。
CSSの基本文法
セレクタの書き方
セレクタの書き方はいくつかある。
1.タグ名を書く
p {
color: orange
}
<p>これは段落です。</p>
2.id名を書く
id名の場合は#クラス名のように"#"+クラス名。
#headline {
color: orange
}
<div id="headline">
<p>これは段落です。</p>
</div>
3.class名を書く
クラス名の場合は.クラス名のようにピリオド+クラス名。*1
.main {
color: orange
}
<div class="main">
<h1>これは段落です。</h1>
</div>
4.適用先は複数指定できる
カンマで区切って複数を指定することもできる。
#headline,.main {
color: orange
}
<div class="main">
<h1>これは段落です。</h1>
</div>
<div id="headline">
<p>これは段落です。</p>
</div>
idとclassの使い分け
idとclassの使い分けにはルールがある。どっちでもいいというわけではない。
- class：種別名を割り当てる。同じclass名を1ページ中に何度でも使える。
- id：固有の名前を割り当てる。同じid名は、1ページ中に1度しか使えない。
idは対象に対して固有の名前をつけて一意に表すために使用する。例えるとclassは「学校のクラス」、idは「学籍番号」のようなイメージ。
後述するように、全てclassを使用しても良いのだが、idとclassを使い分けることによって、ページの中でどこかの１箇所のみに限定したスタイルなのか、汎用的なスタイルなのかをソースから読み解くことができる。 （ちなみにidはclassよりも優先される）。
id
例えばdiv要素を用いて、ページを「上部領域(ヘッダ)」「サイドバー」「本文領域」「下部領域(フッタ)」の4ブロックに分割する場合、１ページ内にそれぞれ１度しか登場しないものなので、idを使用する。
上部領域： <div id="header">～</div> サイドバー： <div id="sidebar">～</div> 本文領域： <div id="main">～</div> 下部領域： <div id="footer">～</div>```
class
ページによってはサイドバーが２つになる場合もある。そのような場合はclassを使用する。 「同じclass名を1ページ中に何度でも使える。」ということを考えた場合、1度しか使用しないものにもclassを使用してもかまわないという考え方もできるので、全てclassで実装するという方法もある。
サイドバー1： <div class="sidebar">～</div> サイドバー2： <div class="sidebar">～</div>
ただし、サイドバー1とサイドバー2を明確に分けたい場合は、以下のようにidを使用する方法もある。
サイドバー1： <div id="sidebar1">～</div> サイドバー2： <div id="sidebar2">～</div>
