CSS(スタイルシート)の書き方
CSSは次の3つのパーツで構成されています。
- セレクタ
- 宣言ブロック
- プロパティ
セレクタ
セレクタはCSSをどこに適用するかを指定します。
次のコードの赤い部分がセレクタです。
セレクタの例
/* 要素名で指定 */p { font-size: 150%; font-style: italic; color: #333;}
/* クラス名を指定 */.class_name { color: #333;}
/* IDを指定 */#id_name { font-weight:bold;}
/* 要素名 + クラス名で指定 */p.class_name { color: #c00;}
/* 要素名 + IDで指定 */p#id_name { background-color: #f7f7f7;}
/* コンマ(,)で区切って複数のセレクタを指定 */h1,h2,h3 { font-weight: normal;}宣言ブロック
宣言ブロックは、プロパティを囲む括弧「{」と「}」です。
このブロックで適用するプロパティを囲みます。
宣言ブロックの例
p { font-size: 150%; font-style: italic; color: #333;}プロパティ
プロパティは「プロパティ名」と「値」のペアを、コロン(:)で区切って指定します。
プロパティの最後にはセミコロン(;)が必要です。
プロパティの例
p { color: #333;}こちらのコードの場合、colorがプロパティ名、#333が値となります。
プロパティによっては、半角スペースで区切って複数の値を指定できるものもあります。
複数の値を指定するプロパティの例
p { padding: 10px 20px 10px; color: #333;}