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

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, "ＭＳ Ｐゴシック", 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; }

ページの先頭へ