CSSの書き方（書式）について

CSSの基本書式

CSSの内容は、以下の書式で記述します。

中カッコで囲まれた部分を「宣言ブロック」、宣言ブロック内のプロパティと値の組み合わせを「宣言」と言います。

セレクタ(selecter)には「スタイルを適応する対象」を記します。「,（カンマ）」で繋げることにより、複数のセレクタに対して同時にプロパティを適用することも可能です。以下の例はh1,h2,h3要素に対して同時にプロパティを設定しています。

CSS

h1 { font-weight: bold; }
h2 { font-weight: bold; }
h3 { font-weight: bold; }
/* 上記3行は以下のようにグループ化が可能 */
h1, h2, h3 {
    font-weight: bold;
}

プロパティ(proparty)は、「セレクタにどのような視覚的特性を付加するのか」を示します。

プロパティと値の間は「：（コロン）」で区切ります。

同時に複数宣言を行うことも可能です。以下の例ではclass名propを持つHTML要素に複数プロパティを設定しています。複数のプロパティを設定するには宣言を「;（セミコロン）」で区切る必要があります。宣言の後ろには「;(セミコロン)」を付ける癖を付けておくとよいでしょう。

CSS

.prop {
    margin: 15px;
    padding: 15px;
    border: 1px solid #999;
    background-color: #ccc;
}

値(value)には、視覚的効果を付加するプロパティの値を記述します。

値の取りうる範囲、単位、形式はプロパティによって異なります。

セレクタ、プロパティ、値の記述には大文字を使わず、小文字で記述しましょう。

CSSでは「/*」と「*/」で囲まれた部分がコメントとなります。

以下の例において、padding宣言はコメント化されているため視覚的効果に影響を与えません。

CSS

.prop {
    margin: 15px;
/*    padding: 15px;*/
    background-color: #ccc;
}

外部CSSを利用する場合、CSSファイルの先頭（1行目）に使用する文字コードを記述しましょう。そのためには＠charset規則を使用します。

HTML

@charset "UTF-8";
/* 必ず1行目に記述すること。@charset以前に文字があってはいけない */
h1 { color: #ff0000; }