CSS・XHTML/tips/初期段階のXHTML+CSS設計 - 意匠部@wiki BETA

初期段階でやってること

1. デザインデータにざっくり目を通す。
2. 主要ページをプリントアウト。
3. タグ＋ID/classを書き込む。
   ・レイアウトの大枠から決める。
   ・ソースの再利用ができそうなところもメモ。
4. 疑問点なども書き込む。
5. ディレクトリマップがあれば、それを見つつ各カテゴリCSSファイル構成を考える。
   CSSシグネチャもつけていってもいい。

　※ディレクトリマップが無い、命名規則を一度PGと相談したほうが良い。　（例）「お問合わせ」→「contact」で作っていたが、PGは「inquiry」で作っていた

気をつけてること

他人が見ても把握しやすいソース（ID/class）

• 命名規則を守る（一貫した命名規則を保つ）。
• ID/classは省略しすぎないように気をつける。
• 安直なclass名をつけない。
  参考：「 スタイルシートの基本 -- ごく簡単なHTMLの説明 」
• 共通のスタイルを記述した後、局所的なスタイルを記述する。
  ⇒トレース時に把握しやすい。
• コメントアウトで目次や見出しを記述する。
  ちょっとでもいいので書いておくと後でまとめやすい。

より柔軟なXHTML

• 動的に追加される部分、後から別要素の追加がきそうな部分も考慮する。
  ⇒リストのアイテム数が増えてもいいようにとか、セール価格掲載がきたときにも対応できるようにとか。

重いサイト＋軽いサイト

軽いサイト

開発時は各ページ用のCSSファイルを作ってもいい。
記述量によっては公開前にcontent.cssにまとめる。

重いサイト

開発時は各カテゴリでCSSファイルを分割する。
各ページでの読み込みはcommon.cssとそのカテゴリのCSSだけを読み込ませる。
全CSSを全ページで読み込ませないようにする。

共通して言えること

httpアクセスを減らすために、CSSファイルをまとめる。
reset.cssやlayout.cssなどは公開時にcommon.cssにまとめる。

mansion100% では下記ファイルなどが、 common.css にまとめられている。

• reset.css
• layout.css
• general.css
• module.css
• form.css
• header.css
• footer.css
• clearfix.css

ただ、開発時は分割されていたほうがやりやすいので、まとめるのは公開前でいい。
まとめる時には目次と見出しを記述すること。

トップページがフラッシュだけの場合はスタイルの再利用性が低いので、head内にCSSを記述してもいいと思う。