CCG

セットの記述方法 {

• インデントは半角スペースを4つ。
• 閉じ カッコ のインデントは書き出し位置に合わせる。
• 1プロパティは1行で管理する。行の終わり必ずセミコロン ( ; )

}

セレクタの記述方法 {

• 各IDとclassが適用されているタグを必ず明記。
• 継承を見やすく、かぶりが起こるのを防ぐために親セレクタも記述する。
• 自然とピラミッド型になるようにマークアップを行う。

}

プロパティの記述順序 {

1. ボックスモデル (Box model)
2. 視覚整形モデル (Visual formatting model)
3. 視覚整形モデル詳細 (Visual formatting model details)
4. 視覚効果 (Visual effects)
5. 生成 内容, 自動番号付け及びリスト (Generated content, automatic numbering, and lists)
6. ページ関連メディア (Paged media)
7. カラー及び背景 (Colors and Backgrounds)
8. フォント (Fonts)
9. テキスト (Text)
10. 表 (Tables)
11. ユーザインターフェイス (User interface)
12. 聴覚スタイルシート (Aural style sheets)

}

CSSの分割管理方法 {

分割管理

• XHTML が読み込む順番は上から下です。気をつけましょう。
• import.css では reset.css と base.css をインポートします。
• base.css では全ページ共通の指定を行います。グローバルメニューやヘッダー、フッターなどが全ページ共通ならば base.css で指定します。
• 各ページに合わせた レイアウトCSS を読み込みます。ファイル名はわかりやすい名前をつける。
• ページ独自の CSS を必要に応じて用意します。例では AAA フォルダには AAA.css が格納されている。
• layout.css: コンテンツのボックスボデルの指定を行います。one_column.css, two_column_left.css, three_column_right.css のように意味をもった名前をつけます。
• thema.css: ページ独自の配色や装飾の指定を行います。thema_A.css, thema_B.css のように名前をつけます。

}

その他の細かいルール {

記述順序

border: [タイプ] [値] [カラー];
list-style: [タイプ] [位置] [イメージ];
background: [カラー] [イメージ] [繰り返し] [スクロール指定] [位置];

記述例

border: solid 1px #000;
list-style: none outside url("images/list.png");
background: transparent url("images/bg.png") no-repeat fixed 0 0;

構成の例です、基本はこの形で行います。

#headwrapper (ヘッダー枠)
├#header (ヘッダー)
└#globalnav (グローバルナビゲーション)

#middlearea (中間エリア枠)
└#hierarchy (階層)
  └.breadcumb (パンクズ)

#container (メイン: 2ｶﾗﾑの場合)
├#maincontent (メイン)
└#sidecontent (サイド)

#footwrapper (フッター枠)
└#footer (フッター)

}