読者です 読者をやめる 読者になる 読者になる

いろいろ試行錯誤

調べものしたときの覚書きや、仕事でコーディングした時のメモ などなど…

CSSガイドライン

CSSガイドラインの構成例

CSSのバージョン/文字コード
CSSの整形ルール
CSSファイルの内容構成
  • CSSファイル内の「ファイル構成」記述例
@charset "UTF-8";
/* ---------------------------------------- 目次 */
/* ファイル情報 */
/* ブラウザ初期化スタイル */
/* 汎用クラススタイル */
/* 領域定義スタイル */
/* 領域別スタイル */

/* ---------------------------------------- ファイル情報 */
/* Page Layout CSS v1.02 */
/* ファイル名:page-layout.css */
/* 作成日:2008年8月23日 */
/* 更新日:2008年12月24日 */
/* 作者: Maya Uegaki */

/* ---------------------------------------- ブラウザ初期化スタイル*/
body {
  margin:0;
  padding:0;
}
/* ~以下略~ */
CSSファイルの管理方法
ワンシートアプローチメリット:一元管理/デメリット:コードが長くなりすぎる
マルチシートアプローチブラウザの振り分けに使用する「フィルタ用CSS」や、ブラウザのデフォルトスタイルをリセットする「リセットCSS」、「ハック用CSS」など、役割ごとにファイルを分割して管理
セレクタのルール
body
│
└div#wrapper /* 全体を囲む */
  │
  ├div#header /* ヘッダ */
  | └hl / div /* トップページはh1、それ以外はdiv */
  |  |  └a
  |  └───┴img /* ロゴ画像 */
  ├div#globalnavi /* グローバルナビ */
  | └ul
  |  └li
  |   └a
  ├div#content /* コンテンツ */
  | ├ul#topicpath /* パンくずリスト */
  │ │└li
  │ │ └a
  │ ├h1/h2/h3
  │ ├p
  │ │└a/img/em/strong/span
  │ └p.pagetop /* ページトップへのナビ */
  └div#footer /* フッタ */
    ├ul /* サイト内共通リンク */
    │└li
    │ └a
    └address /* コピーライト */
プロパティのルール
  • 記述順序
/* Suggested order:
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 */
値のルール
  • 単位についてのルールの例
サイズを可変にするため、font-sizeやline-height指定する場合は、emまたは「%値」を使う
CSSハックのルール
  • 使わないで済むのであれば、極力使用しない方が望ましい
  • CSSガイドライン」に明記
    • CSSの書式上、妥当なものを使用する」「他のブラウザに影響を与えない」など
    • どのブラウザのどのような不具合に対してどのようなCSSハックを適用しているのか
    • どのCSSファイルのどこで、そのCSSハックを記述しているのか