書式の基本


書式の基本と、セレクタ・プロパティ・値に関する説明です。


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

p { color: red }

p セレクタ
color プロパティ
red

上記の例の場合、p要素に対してスタイルを設定しています。(セレクタの部分には、要素名の他にIDやクラス名などが使用できます)

スタイルの指定内容は { } 内に記述しますが、この例では文字色を指定するプロパティ(color)と、その値に赤(red)を指定しています。

プロパティと値

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

color: red

上記の例のように、プロパティと値はコロン( : )で区切って記述します。(左側がプロパティ、右側が

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

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

p {
margin: 10px;
color: green;
line-height: 120%;
}

複数のスタイルを設定する場合は、上記の例のようにセミコロン( ; )で区切って記述していきます。一番最後の( ; )は、入れても入れなくてもどちらでも構いません。

複数のセレクタ

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

h1, h2, h3 { color: red }

上記の例の場合、h1h2h3、それぞれの要素に対して color: red を指定しています。

セレクタの組み合わせ

Aセレクタ BセレクタInternet ExplorerNetscape6FirefoxOpera

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

p strong { color: red; }

セレクタ適用図

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

サンプル画面へ


Aセレクタ > BセレクタNetscape6FirefoxOpera

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

※「直下」とは位置的な「下」ではなく、階層的な「下」のことです。(直接の子要素という意味)

p > strong { color: red; }

セレクタ適用図

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

※この指定方法はIEでは対応していません。

サンプル画面へ


Aセレクタ + BセレクタNetscape6FirefoxOpera

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

h2 + p { color: red; }

セレクタ適用図

上記の例の場合、同じ親要素(body要素)を持つh2要素の直後にあるp要素にのみ、color: red を適用させています。それ以外のp要素には、このスタイルは適用されません。

※この指定方法はIEでは対応していません。

サンプル画面へ

コメント

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

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

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

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



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント
[統計] HTMLからXHTMLへの移行を進めていますか?