CSS: 書式

CSSの書式

セレクタ { プロパティ:値; }

「プロパティ:値;」は 宣言と呼ばれます。セレクタはスタイルを適用する対象、プロパティは設定するスタイルの性質、値はプロパティの値です。HTMLとの対応を考えると、セレクタ＝要素、プロパティ＝属性名、値＝属性値と考えるとわかりやすいと思います。

宣言は「；」で区切って複数指定することができます。また、途中で改行しても構いません。

セレクタ {
    プロパティ1:値1;
    プロパティ2:値2;
    プロパティ3:値3;
    プロパティ4:値4;
    　　　：
}

なお、「}」の直前のセミコロンは省略可能です。

複数のプロパティはどの順番に記述しても構いません。「ボックスの外側の物から書く」とか自分なりの流儀を決めると良いでしょう。

また、この書式も複数記述できます。どの順番に記述しても構いません。これも自分なりの流儀を決めると良いでしょう。

重複した場合の優先度にはカスケードというルールがあるのですが、ここでは細かくは解説しませんが、ある要素の同じプロパティに対して複数個所で記述した場合には、後で記述したものが優先されることは覚えておきましょう。

例　後で記述したものが優先

セレクタ1 {
    プロパティ1:値1;
    プロパティ1:値2; /* プロパティ1の値は値2で上書きされる */
}

同じセレクタに対する宣言を複数個所に記述しても構いませんが、一つにまとめた方がわかりやすくなります。

セレクタ1 {
    プロパティ1:値1;
}
セレクタ1 {
    プロパティ2:値2; 
}
/* 特に離れた箇所に記述すると他方を見落として間違えやすいため、 
   下記のようにまとめて書く習慣をつけましょう。*/
セレクタ1 {
    プロパティ1:値1;
    プロパティ2:値2; 
}

* { } /* 全ての要素 */

h1 { } /* h1要素 */

p a { } /* p要素中で使用されるa要素 */

p * { } /* p要素中で使用される全ての要素 */

h2, h3 { } /* h2要素とh3要素 */

div.clearfix { } /* class名clearfixが指定されたdiv要素 */

*.clearfix { } /* class名clearfixが指定された全ての要素 */
/* ↑*は省略可能 */

div#contents { } /* ID名contentsが指定されたdiv要素 */
/* ↑IDは文書中に一ヶ所なのでdivは省略可能 */

a:hover { } /* マウスがロールオーバーしているa要素 */

p:first-letter { } /* p要素の最初の1文字 */

#contents p a , #menu a { } 
/* 「ID名がcontentsである要素中のp要素中のa要素」
   と「ID名がmenuである要素中のa要素」 */

コメント

「/*」と「*/」で囲った範囲をコメントと呼びます。囲まれた範囲は意味を持ちません。

/* コメント */

コメントで説明がついていると、他の人が読んだり、後で自分が読んだりする時にわかりやすくなります。

また、CSSの一部を「/*」と「*/」で一時的に囲って、機能しなくすることができます。このようなコメントの使い方をコメントアウトと呼びます。

例　コメントアウト

/*
セレクタ {
    プロパティ: 値;
}
*/

セレクタ {
    プロパティ1: 値;
/*  プロパティ2: 値; */
}