スタイルシート［CSS］/CSSの基本/書式の基本

セレクタ・プロパティ・値

p { color: red }

スタイルの指定内容は { } 内に記述します。

上記の例では、文字色を設定する color プロパティに red を指定して、そのスタイルをp要素に適用させています。

スタイルの指定は、プロパティと値のセットで行われます。

color: red

上記のように、プロパティと値をコロン（ : ）で区切って記述します。（左がプロパティ、右が値）

また、1つのセレクタに対して複数のスタイルを設定することもできます。

h1 { padding: 3px; background-color: #f9f9f9; color: #ff0000 }

p {
margin: 0 0 1em;
color: #808080;
line-height: 140%;
}

複数のスタイルを設定する場合は、上記のように各スタイルをセミコロン（ ; ）で区切って記述します。（一番最後の（ ; ）は省略しても構いません）

セレクタは、カンマ（ , ）で区切って複数指定することもできます。

h1, h2, h3 { color: red }

上記の例では、h1、h2、h3、それぞれの要素に対して同じスタイル（color: red）を指定しています。

/* と */ で囲まれた内容は、コメントとして扱われます。

/* この部分がコメント */

/*
この部分がコメント
*/

次のような感じで、作者の覚え書きとして使用すると便利です。

h1 { color: red } /* 見出しのスタイル */
p { line-height: 120% } /* 段落のスタイル */

セレクタとセレクタを半角スペースで区切って記述すると、Aセレクタの範囲内にあるBセレクタにのみ、スタイルを適用させることができます。

p strong { color: red; }

［子孫セレクタのイメージ］

上記の例では、p要素内のstrong要素にのみ、color: red が適用されます。それ以外のstrong要素には、このスタイルは適用されません。

セレクタとセレクタを > で区切って記述すると、Aセレクタの直下にあるBセレクタにのみ、スタイルを適用させることができます。

p > strong { color: red; }

［子供セレクタのイメージ］

上記の例では、p要素の直下にあるstrong要素にのみ、color: red が適用されます。それ以外のstrong要素には、このスタイルは適用されません。

セレクタとセレクタを + で区切って記述すると、両方のセレクタが同じ親要素を持ち、Aセレクタの直後にあるBセレクタにのみ、スタイルを適用させることができます。

h2 + p { color: red; }

［隣接セレクタのイメージ］

上記の例では、h2要素と同じ親要素（body要素）を持ち、かつh2要素の直後にあるp要素にのみ、color: red が適用されます。それ以外のp要素には、このスタイルは適用されません。