スタイルシートは、基本的に以下のような書式で記述します。

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

セレクタとは、どの要素に対してスタイルを適用させるか指定する部分です。
スタイルシートを適用させたいタグを書きます。

プロパティとは、セレクタで指定した要素に適用するスタイルの種類を示す部分です。
色を表す「color」やフォントサイズを表す「font-size」などを書きます。
これに続けて、「:」記号と値を書いてスタイルを設定します。

スタイルは「;」記号で区切っていくつでも書くことができます。

→ 記述例
H1要素のフォントサイズを20ピクセルに設定し、色を赤にする。
H1 { font-size: 20px; color: red }

→ 結果
指定前

これは指定前です。

指定後

これは指定後です。

スタイルを適用させる対象の指定

・異なる要素に対して同じスタイルを指定する

セレクタ1,セレクタ2,セレクタ3,… { プロパティ : 値 }

→ 記述例
H1,H2,H3 { font-size: 20px; color: red }

・特定の要素に含まれる要素に対してのみスタイルを適用する

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

→ 記述例
DIV SPAN { color: red }
上記の例では、DIV要素の中のSPAN要素の色を赤に設定します。

・特定のクラスを指定した要素にのみスタイルを適用する

.クラス { プロパティ : 値 }
セレクタ.クラス { プロパティ : 値 }

→ 記述例
.class1 { color: red }
上記の例では、class属性に「class1」が指定されている要素の色を赤に設定します。

H1.class2 { color: red }
上記の例では、H1要素を持つclass属性に「class2」が
指定されている要素の色を赤に設定します。

・特定のIDを指定した要素にのみスタイルを適用する
（クラスは複数の要素に対して指定できるが、IDはその１つの要素に対してのみできる）

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

→ 記述例
#id1 { color: red }
上記の例では、id属性に「id1」が指定されている要素の色を赤に設定します。

H1#id2 { color: red }
上記の例では、H1要素を持つid属性に「id2」が
指定されている要素の色を赤に設定します。

単位について

スタイルシートで大きさを指定する場合には、数値の次に単位を付けて示すことができます。

・絶対的な値を示す単位

in	：	インチ(1in = 2.54cm)
cm	：	センチメートル
mm	：	ミリメートル
pt	：	ポイント(1pt = 1/72in)
pc	：	パイカ(1pc = 12pt)

・相対的な値を示す単位

em	：	その範囲で有効なフォントの高さを１とする単位
ex	：	その範囲で有効なフォントの小文字の「x」の高さを１とする単位
px	：	１ピクセルを１とする単位
%	：	他の基準となる大きさに対する割合

← スタイルシートに戻る

eWeb