【CSSとは (2)】 CSSの基本文法
カテゴリ : CSSとは, html/css, すべてのカテゴリCSSの基本文法
CSSはセレクタ ・プロパティ・値によって構成されます。
例えばHTMLで作成したh1要素に対して、文字の色を赤くすると言った指示をCSSから出す場合下記のような記述になります。
h1{color:#ff0000;}
上記の記述のそれぞれの名称は下記のように呼ばれます。
セレクタ{プロパティ:値；}
そしてこれを分かりやすい言葉に置き換えると
どこの{なにを:どうする；}
となります。
CSSの基本文法は「どこの」「なにを」「どうする」
上の命令で h1要素(セレクタ )の 文字の色(color / プロパティ)を 赤くする(#ff0000 / 値) ことができました。
つまりCSSは「どこの」「なにを」「どうする」かを指示することとなります。
基本的にこの考え方が理解できればCSSで指示を出せるようになります。
あとはプロパティや値の種類と役割りを覚えるだけです。
様々な種類のセレクタ
要素名セレクタ
セレクタ にh1やpなど要素名を指定するセレクタ です。もっとも基本的なセレクタ になります。
h1{
color:#f00}
結果：h1要素の文字色が赤くなる。
ユニバーサルセレクタ
全ての要素を指定するセレクタ です。
*{
font-size:12px}
結果：全ての要素の文字サイズが12pxになる。
子孫セレクタ
特定の親要素内に存在する子要素を指定するセレクタ です。
ul li{
color:#00f}
結果：ul要素内に存在するli要素の文字色が青になる。
idセレクタ
html内の要素に記述されているid名を指定するセレクタ です。
htmlの記述：
<p id="box">この段落のみ特別に扱う</p>
cssの記述：
#box{
background:#000;
color:#fff}
結果：id名boxの背景色が黒、文字色が白になる。
classセレクタ
html内の要素に記述されているclass名を指定するセレクタ です。
htmlの記述：
<div class="red">この段落のみ特別に扱う</div>
cssの記述：
.red{
background:#f00;
color:#ff0}
結果：class名redの背景色が赤、文字色が黄色になる。
リンク擬似クラス
リンクを設置している要素に対し、「通常時」「既読時」「マウスオーバー時」「クリック時」を指定するセレクタ です。
通常時の指定：
a:link{
color#000}
既読時の指定：
a:visited{
color#00f}
マウスオーバー時の指定：
a:hover{
color#f00}
クリック時の指定：
a:active{
color#ff0}
結果：a要素の文字色が通常時は黒、既読時は青、マウスオーバー時は赤、クリック時は黄色になる。
記述順は必ず「link」「visited」「hover」「active」としてください。（htmlのルールです）
セレクタ と獲得ポイント
CSSでセレクタ を指定する際、指定したセレクタ に獲得ポイントというものが与えられます。特に表示に影響するものではなく、CSSの優先順位を決定づけるものになります。
以下セレクタ の種類毎の獲得ポイントです。
- ユニバーサルセレクタ ：0ポイント
- 要素名セレクタ ：1ポイント
- 擬似要素：1ポイント
- class名セレクタ ：10ポイント
- id名セレクタ ：100ポイント
上の考え方で計算をするため、例えばid名testというp要素に命令を出すと以下のようになります。
p{color：#000}・・・1ポイント
#test{color：#f00}・・・100ポイント
同じ要素に異なるセレクタ で命令を出していますが、よりポイントの高いid名セレクタ の指定が優先されます。
