コーディング ガイドライン

ver. html 5

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 nav ul li a,
    							div#header nav ul li a:link,
    							div#header 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, "MS Pゴシック", sans-serif; }
    						

ページの先頭へ

CSSファイルの構成

基本のCSSファイル構成は下記の通りとする。

図:CSSファイルの構成

図:CSSファイルの構成

ページの先頭へ

セレクタ

セレクタはできるだけ詳しく記述する。
					    div#header li.current,
					    div#header 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; }
    							

ページの先頭へ