CSSの基礎

理解するコツ

・CSSの大目的：ページ内容と、デザイン・レイアウトを分離する
・「セレクタ」（何に適用するか）「プロパティ」（定義）「要素」から成り立つ
・要素は、「タグ」「id」「class」により成り立つ
・要素は、「ブロックレベル要素」「インライン要素」の2種がある
・ブロックレベル要素は、上から順に縦に並ぶ。インライン要素は、左から順に横に並ぶ
・上記の流れに逆らうのが、「float」「display」「absoluete」
・レイアウトは、absolueteを使えるなら、使った方が崩れない
・要素の大きさは、「width」「height」に、「padding」「border」を足したもの
・margin:上px 右px 下px 左px; →上から時計回り
・センタリングする場合、外枠に「text-align:center;」、中身に「margin:上px auto 下px auto;」

セレクタの種類

単独セレクタ
・全称セレクタ
・タイプセレクタ
・クラスセレクタ
・IDセレクタ

複合セレクタ
・子孫セレクタ
・子セレクタ

擬似クラス

属性セレクタ

全称セレクタ

全ての要素に対して適用
（例） *{margin:0;padding:0;}

タイプセレクタ

指定した要素（タグ）のみに適用
（例） h1{font-size:18;}

クラスセレクタ

class属性に付与されるセレクタ。アルファベットで記述。大文字・小文字の区別あり
（例） .myStyle{font-weight:bold;}

子孫セレクタ

要素１の子孫要素である要素２に対して適用。要素と要素を半角スペースでつなぐ
（例） h1 en{coloer:#FF0000;}