CSSの書式

基本ルール
基本的にCSSは以下の書式で記述します。
セレクタ{プロパティ:値;}
セレクタ(selector)とはスタイルを適用する対象の事で、主に(X)HTML文書の「p」や「h1」などの要素名が該当します。
また、class名やid名をあわせて指定して適用対象を絞り込んだり、特定の属性を持つ要素に適用するなどきめ細かな設定も可能です。
プロパティ(property)とは、そのセレクタに付与するスタイルの種類です。
その種類はCSSの仕様書で定義されていて、プロパティごとに指定できる値(value)が決まっています。
セレクタから始まる内容全てを規則集合(rule set)と呼び、セレクタ以降の「{」から「}」までを宣言ブロック(declaration block)と呼び、その中のプロパティと値のセットを宣言(declaration)と呼びます。
冒頭で述べた規則集合と規則集合の画像で値の次に「;」(セミコロン)の違いがあります。
本来「値」の次には「;」は必要ありません。
プロパティを複数指定する場合、「;」区切りで指定します。
しかし、編集や追加を繰り返す内に「;」を書き忘れてしまう事が必ずあります。
プロパティが単体の場合、必要ないものですが、付ける事をお勧めします。
なお、本コンテンツでも「;」を付けて紹介します。
記述例
body{color:#fff;background-color:#00f;}h1{color:#000;background-color:#fff;}h2{color:#000;background-color:#fff;}h3{color:#000;background-color:#fff;}
body要素に対してフォントカラーを#fff(白色)、背景色を#00f(青色)に指定しています。
h1要素にはフォントカラーを#000(黒色)、背景色を#fff(白色)に指定しています。
しかし、このような記述方法では次回編集する際に規則集合体などが分かりにくく、ストレスが溜まってしまいそうです。
body{
color:#fff;background-color:#00f;
}
h1{
color:#000;background-color:#fff;
}
h2{
color:#000;background-color:#fff;
}
h3{
color:#000;background-color:#fff;
}
いかがでしょうか、編集時にセレクタを見つけ出しやすくはなりましたね。もう少し改善してみましょう。
body{
    color:#fff;
    background-color:#00f;
    }
h1{
    color:#000;
    background-color:#fff;
    }
h2{
    color:#000;
    background-color:#fff;
    }
h3{
    color:#000;
    background-color:#fff;
    }
編集時にセレクタ及び、プロパティも見つけ出しやすくはなりましたね。
※ 携帯での見え方を考慮して半角スペースを乱用しています。実際にはtabスペースを使ってみて下さい。


TOPへ おタグるーむ