タグ：procss逆引きcss
ProfessionalCSSとは2006年10月30日にベータ版がリリースされ、
2006年10月31日に正式リリースされたGeeklog Japaneses推奨テーマです。
Phize氏が制作し多くのテーマが開発されました。
ProfessionalCSSの詳細についてはGeeklog Wiki ThemeProfessionalCSS
もしくはテーマファイルProfessionalCSSに同梱されているＲＥＡＤＭＥを参照。
ProfessionalCSS逆引きCSS（以後ProCSS逆引きCSS）とはテーマを作成する際に
「こうしたい時はどこを見ればいい」の疑問を簡単に解決するものです。
ここでは私がProfessionalCSSを使ってテーマを制作する際の注意点を書いております。
１）CSSの組み込む順番
ProfessionalCSSは複数のCSSファイルをstyle.cssに集約し表示する。
基本スタイルシート
css/default.css--------- デフォルトスタイル
css/common.css------ 共通スタイル
css/layout.css---------- 基本レイアウトスタイル
css/block.css----------- ブロックスタイル
css/option.css---------- オプションメニュースタイル
css/form.css------------ フォームスタイル
css/story.css------------ 記事スタイル
css/article/article.css-------------------- 個別記事ページスタイル
css/comment/comment.css----------- コメントスタイル
css/navbar/navbar.css------------------ ナビゲーションスタイル
css/preferences/preferences.css---- 設定ページスタイル
css/search/search.css------------------ 検索ページスタイル
css/stats/stats.css------------------------ アクセス情報ページスタイル
css/submit/submit.css------------------ 投稿ページスタイル
css/trackback/trackback.css----------- トラックバックスタイル
css/users/users.css--------------------- アカウント情報ページスタイル
管理者ページスタイルシート
css/admin.css------------------ インポート用スタイルシート(管理者ページ)
プラグインスタイルシート
css/plugin.css------------------ インポート用スタイルシート(プラグイン) */
Professional互換スタイルシート
css/compatible.css
custom.css----------------------- カスタムテーマスタイルシート
このうちテーマを制作する際、主に使用しcustom.cssに書き込むCSSファイルの順番は
１．css/default.css ------------------ サイト全体の基本スタイルを設定。
２．css/layout.css ------------------- サイトレイアウトデザインを設定。
３．css/block.css -------------------- レイアウトデザインに則り各ブロックデザインを設定。
４．css/form.css --------------------- （検索ブロックが含まれてるのでblock.cssと同時設定）
５．css/story.css --------------------- 記事まわりの設定をする。
上記の順番の理由の一つとして
layout.cssで指定するmarginとpaddingを先に設定しとかないと
block.cssで指定するmarginとpaddingとのバランスが取り難くなる。
同様にblock.cssで指定するmarginとpaddingを先に指定しとかないと
story.cssで指定するmarginとpaddingとのバランスが取り難くなる。
基本的にcustom.cssに書き込むCSSの順番は大枠外側からと考えればよい。
２）プロパティ記述順序
賛否両論がありますがCSSコーディングで行き詰った際に解決する事が多かったので
記述順番はできるだけこの序列を推奨します。
*display *visibility *overflow *list-style *position *float *clear *top right bottom left *width *height *margin *padding *border *background color image repeat position attachement *color *font style variant weight size line-height family *text-decoration *text-align *vertical-align *white-space *other text *quotes *content
備考：ProfessionalCSS Ver.1.01(2008-09-15)を元に記述しております。
