Last Update：2010.01.31

CSSガイドライン

基本ルール

CSSファイルの適用方法

  • head要素内での記述やstyle属性は使用しない。
  • XHTMLファイルへのCSSの適用は、読み込み専用の "import.css" を準備し、@import命令で各CSSファイルを読み込む。 
    /* CSSの読み込み
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* \*/
@import "common/reset.css";
@import "common/default.css";
@import "common/base.css";
@import "common/nav.css";
@import "common/text.css";
/* */


/* ページCSSの読み込み
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* \*/
@import "each/guideline.css";
/* */


/* 拡張CSSの読み込み
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* \*/
@import "../js/syntaxhighlighter/styles/shCore.css";
@import "../js/syntaxhighlighter/styles/shThemeDefault.css";
/* */

その他特記事項

  • ファイルの先頭で文字コード宣言 ("@charset") を行う。
  • 文字コード宣言のあと1行改行を置き、CSS内のはじめに目次を記述する。
    パーツひとまとまり毎に見出しをつけインデントをとり、それぞれ連番をつける。
  • 見出しはコメントで装飾し、わかりやすくする。大見出し前は改行3つ。
  • 中小の見出しはインデントをタブ1〜2つ取る。 
    @charset "utf-8";

/*
============================ Base CSS ==============================

			基本設定
				1.要素設定
				2.枠組み
					2-1.ヘッダー
					2-2.メイン
					2-3.フッター
				3.リンク
					3-1.アイコンリンク
				99.共通クラス

====================================================================
*/


/* 1.大見出し
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ▽ */



/* 2.大見出し
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ▽ */

	/* 2-1.中見出し
	──────────────────── */

ページの先頭へ

書式 (改行、インデント、コメント)

  • セレクタは原則1行に記述し、文字数が多い場合は、"," 区切りで改行する。
  • 最後のセレクタの後にスペース、その後ろに "{" を記述する。
  • "{"、"} " の後で改行する。
  • プロパティの前にはタブ1つでインデントを挿入する。
  • プロパティと値の間にスペースを挿入する。
  • プロパティが1〜2つの場合は1行で記述する。
  • backgroundや、marginなど、まとまられるプロパティはまとめる
  • 値の後ろには必ず ";" と改行を挿入する。
  • 値が0の場合は単位をつけない。
  • マージンやパディングは bottom で取るようにし、top には基本指定しない。 
    body { propaty: value; propaty: value; }

div#header div#nav ul li a,
div#header div#nav ul li a:link,
div#header div#nav ul li a:visited {
	propaty: value;
	propaty: value;
	propaty: value;
}
.hoge {
	background: #fff url(../img/common/btn01.png) no-repeat 0 2px;
	margin: 0 0 20px 15px;
}

ページの先頭へ

フォント

  • line-heightは単位をつけないで指定する。
  • 文字サイズは13pxを基準とし、相対単位 (%) で下記のように指定する。
  • フォントは優先的にMacのフォントを先に読み込むようにする。 
    /* 1.フォントサイズの基準
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ▽

参考：Yahoo! UI Library: Fonts CSS
　　　http://developer.yahoo.com/yui/fonts/

26px : 197%
24px : 182%
22px : 167%
20px : 153.9%
18px : 139%
16px : 123.1%
15px : 116%
14px : 108%
13px : 100%
12px : 93%
11px : 85%
10px : 77%

*/

body { font: 13px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; }

ページの先頭へ

CSSファイルの構成

図：CSSファイルの構成

ページの先頭へ

セレクタ

  • セレクタはできるだけ詳しく記述する。 
    div#header li.current,
div#header div#nav ul li a { }

ページの先頭へ

プロパティ

プロパティは以下の順番で記述し、下記以外はアルファベット順とする。

  1. clear
  2. border
  3. background
  4. color
  5. display
  6. font
  7. list-style
  8. float
  9. margin
  10. padding
  11. width
  12. height
  13. position
  14. text-decoration
  15. text-align
  16. vertical-align
  17. white-space
  18. other text
  19. content

ページの先頭へ

ハック

  • CSSハックは極力使用しない。
  • 使用する場合は、"何に対するハックか"をコメントで記述する。 
    /*star html hack for IE 6 */
* html selector {
	propaty: value;
}

clearfix

  • clearfixハックには次のコードを用い、各セレクタごとに設定する。 
    セレクタ { }
セレクタ:after { /* clearfix */ clear: both; content: "."; display: block; height: 0; visibility: hidden; }

ページの先頭へ