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;}

子孫セレクタ

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