コーディングガイドライン｜XHTML+CSSコーディング代行サービス「Speed-ONE(スピードワン)」

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

はじめに

本コーディングガイドラインは、WEBFACTORY JoyArtの提供するXHTML+CSSコーディング代行サービス「Speed-ONE(スピードワン)」の品質、および作業効率の向上を目的とし、コーディング作業において、本コーディングガイドラインに基づき、作業を行うものとする。

コーディング作業に関して、クライアントからの要望がある場合は、クライアントからの要望が優先となる。

最終更新日：2011年6月13日

1.基本事項

- ターゲットブラウザ

下記ブラウザを標準ターゲットブラウザとし、コーディング完了時に各種チェックを行うものとする。

Windows	Macintosh
Intenet Explorer 6.0～9.0 FireFox Chrome Safari	Safari FireFox

※FireFox、Safari等のブラウザは最新のバージョンのみの対応とする。

- 画像命名規則

画像ファイル名は、英単語による命名を基本とし、必要に応じて連番をつけるものとする。
連番の前には_（アンダーバー）を付ける。

複数の単語により構成される場合は2つ目以降の頭文字を大文字にしてつなげる。

ロゴ
- logo.gif
背景画像
- bodyBg.gif
- headerBg.gif
グローバルナビゲーション
- navi_01.jpg
- navi_02.jpg
その他の画像
- img_01.jpg
- img_02.jpg
- txt_01.gif
- btn_01.gif

■下記の英単語は略語を使用する。

back → bg
image → img
button → btn
banner → bnr
text → txt

■オンマウス画像には「-on」を画像ファイル名の最後に付与する。

- ディレクトリ構成

ページ毎にディレクトリを作成し、その直下に画像用のディレクトリを作成するものとする。
尚、共通の画像、css、javascriptを格納するディレクトリはcommon内に作成する。

ディレクトリ構成図

※尚、上記を基本構成とし、クライアント提示の仕様がある場合、それを優先する

2.XHTML

- ドキュメントタイプ

『XHTML 1.0 Transitional DTD』を標準とし、XML宣言は案件の仕様により省略可能とする。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

- 文字コード

『UTF-8』を標準とし、headタグ内で必ず宣言を行うものとする。

- タブインデント

headタグ内ではタブインデントは使用しないものとし、bodyタグ内でのみタブインデントを使用する。
以下、記述例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<meta name="description" content="description" />
<meta name="keywords" content="keyword,keyword,keyword,keyword" />
<link rel="stylesheet" type="text/css" href="../common/css/import.css" media="all" />
</head>
<body>
<div id="wrapper">
	<!--ヘッダー開始-->
	<div id="header">
		<h1><a href="/"><img src="../common/img/logo.gif" width="236" height="116" alt="k
eyword" /></a></h1>
		<!--ナビゲーション開始-->
		<div id="navigation">
			<ul>
				<li><a href="#">keyword</a></li>
				<li><a href="#">keyword</a></li>
				<li><a href="#">keyword</a></li>
				<li><a href="#">keyword</a></li>
				<li><a href="#">keyword</a></li>
			</ul>
		</div>
		<!--ナビゲーション終了-->
	</div>
	<!--ヘッダー終了-->
</div>
</body>
</html>

- コメントの記述

コメントはレイアウトやパーツなどの開始の1行前、終了の1行後にコメントを記述するものとし、開始タグと終了タグの位置が明確な場合は省略可能とする。

例：

<div id="header">　←ヘッダー開始
　～中略～
</div>　←ヘッダー終了

<div id="navigation">　←ナビゲーション開始
<ul>
　～中略～
</ul>
</div>　←ナビゲーション終了

3.CSS

- ファイル構成

下記を基本構成とし、commonディレクトリ内にcssディレクトリを作成し、格納するものとする。

import.css　←　各CSSファイルインポート用
base.css　←　リセット、再定義、汎用スタイルシート用
style.css　←　レイアウト、各コンテンツ用

- クラス、ID命名規則

レイアウトやコンテンツ毎の命名はそのパーツに適した命名をローワキャメルケースにて行い、必要に応じてアンダーバー区切りの連番を付与する。
尚、汎用的なスタイルシートに関しては、略語を可能とする。

ヘッダー
- header
ナビゲーション
- navigation
コンテンツ
- content
- leftContent
- rightContent
フッター
- footer
その他
- link , btn , img_01 , img_02

- 文字コード

『UTF-8』を標準とし、各cssファイル冒頭に必ず宣言を行うものとする。

@charset "UTF-8";

- コメントの記述

CSSファイルの冒頭に利用目的に応じたコメント、及びパーツ名を記述し、レイアウト、ページ毎のスタイルシートの開始前に記述するものとする。

/*-
*レイアウト、コンテンツ用
*/
/*-
*ヘッダー
*/
#wrapper #header{
}

- 記述方法

プロパティが複数ある場合は、プロパティ毎に改行を行い、タブインデントを使用するプロパティが１つの場合は、セレクタの記述から”}”までを改行を行わずに記述するものとする。

プロパティが複数の場合
#wrapper #header{
	margin:0 auto;
	width:900px;
	height:120px;
}

プロパティが1つの場合
#wrapper #header{　margin:0 auto; }

- プロパティ

プロパティの値が0の場合、単位は省略する。

margin:0;

font-size、line-heightはパーセントで指定する。

font-size:75%;
line-height:140%;

- ハック

ハックは可能な限り使用せず、ブラウザ間の調整を行うものとする。
デザインレイアウト上必要な場合は、適用するスタイルシートの直下に記述し、”}”の後ろに半角スペースを空け、どのブラウザに対しての処理かコメント付ける。

※IE6にのみハックを使用する場合
#wrapper .box{
	padding:0 10px;
	width:880px;
	height:120px;
}
* html #wrapper .box{ width:900px; } /* ie6 */