CODING GIDELINE

本ページにて記載する以下文書（ガイドライン）は、CELEBRATESがHTML・CSS・JavaScriptを用いた受託WEBサイト制作を行う際、工数削減と効率化、クオリティー確保のために策定した記述ルールとなります。ただし、受託WEBサイト制作において既存のガイドライン・ルール・規則がある場合は、既存ガイドラインを優先してコーディングを実施します。

【改版履歴】 * ver 0.00 [2015/05/19] 初版

DTD（文書型定義）	HTML5
CSS	CSS3
Charset	UTF-8(BOMなし)
対象ブラウザ	バージョン9以降のInternet Explorer 最新版のGoogle Chrome 最新版のMozilla Firefox 最新版のSafari

命名規則（共通）

HTMLファイル、イメージファイル、CSSのID及びCLASSセレクタは以下のルールに従い名前を設定します。

半角英数字のみ使用可能とし、機種依存文字やスペースの使用は禁止とする。

始めの文字はアルファベットを使用し、数字は用いない。

HTMLファイルの命名規則

原則としてHTMLファイルのファイル名は、ページタイトルを英語表記したものを設定する。

種類と個性、数字による命名規則

イメージファイル、CSSのID及びCLASSセレクタの命令規則として種類と個性の概念を採用します。また、複数回使用が想定されるものには数字を設定します。



種類
h（ページタイトル）,background（背景画像）,button（ボタン）など


個性
main-title（メインタイトル）,event（イベント）,red（色）など


数字
01,02,03・・・


省略処置
background→「bg」
button→「btn」など

種類	h（ページタイトル）,background（背景画像）,button（ボタン）など
個性	main-title（メインタイトル）,event（イベント）,red（色）など
数字	01,02,03・・・
省略処置	background→「bg」 button→「btn」など

種類・個性は判断しやすい抽象的な英単語を使用する。

種類・個性は原則的に省略禁止とする。しかし、冗長となる単語は判断性を損なわない程度で省略形にて設定を行う。

複数の単語で構成されるような種類・個性は単語と単語の間に「 - 」（ハイフン）を挿入し、単語を分離させる。

数字は「01」をはじめの数値として設定し、以降「02」「03」と続く。また、3桁以上の数字使用が想定される場合には、はじめの数値を「001」と設定する。

BEMによる命名規則

設定した種類・個性は「BEM」により連結させる（個性と数字は続けて記載する）。BEMは、通常アンダーバー2つ（ __ ）による連結が定義されていますが、シンプルさを重視し、アンダーバー1つ（ _ ）による連結とします。



イメージファイルの設定例
btn_menu01.jpg 


CLASSセレクタの設定例
header_menu {
    clear: both;
}

イメージファイルの設定例	btn_menu01.jpg
CLASSセレクタの設定例	header_menu { clear: both; }

head要素内の記述

head要素内に含まれる要素は以下の順序で記述します。

<head>
<meta charset="UTF-8">
<title>タイトルを記述</title>
<meta name="keywords" content="keywords">
<meta name="description" content="description">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

転送量の削減とメンテナンス性の向上を考慮し、CSSファイルは外部ファイル化して読み込むことを原則とする（インラインでの使用を禁止）。

インデントと改行

インデント

インデントは「Google HTML/CSS Style Guide」にて推奨されている”半角2文字のスペース”を採用し、Tabや半角4文字スペースのインデントは使用しない。 HTMLにおけるインデントは入れ子階層を明確化するため、ブロックごとに行なう。並列のブロックはインデント不要。 JavaScriptに限り、インデントは半角スペース4文字で行う。

改行

W3CのWEB標準仕様に準拠し、ブロック要素の終了タグの後には改行を挿入。head要素内の子要素については、各要素ごとに改行を行う。

HTML基本ルール

<div class="container">
  <p>テキスト１<br>テキスト２</p>
  <ul>
    <li>リスト</li>
  </ul>
  <div id="js-hoge">
    内容
  </div>
</div><!-- /.container -->

HTMLの各要素、属性、属性値の記述には小文字を使用する。

JavaScriptからアクセスする場合はブロック名の前に「js-」を付加する。また、js-を付ける場合はクラスでなくIDを用いる。

セレクタ（class名）はローワーキャメル方式にて設定する。

引用符はシングルクォートではなく、「ダブルクォート」を使用する。

エンプティ要素の閉じタグは「なし」で統一する。

親要素となるdivタグの閉じ部分は入れ子になる際の対策のとして、コメントアウトでの表示を必須とする。

HTML内イメージ要素の基本ルール

<img class="test" src="http://xxx.jp/images/sample.jpg" alt="" width="" height="">

処理速度向上・高速化を徹底するため、原則としてimg要素のwidth・heightは指定する。

alt属性には画像を置換可能な詳細な代替テキストを指定する。適切な文言がない場合は空の属性値（alt=""）を指定する。

属性の記載順序

属性は可読性を重視し、以下の順序で記述します。

・class
・id, name
・data-*
・src, href, value
・alt
・width, height

CSS基本ルール

body {
  background: #fff url(images/sample.jpg) no-repeat left top;
  color: #333;
  font-family: 'ヒラギノ角ゴ Pro W3', arial, sans-serif;
  font-size: 0.8em;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

h1,h2,h3 { font-weight: normal; }

/*----------------------------------------------------
  .header (大見出し)
----------------------------------------------------*/
/* グローバルナビ (小見出し)*/ 
.header { width: 1000px; }

CharsetはHTML同様「UTF-8」を設定する。

可読性を確保するため、コメントアウトは上記のように大見出しと小見出しを必要に応じて記述する。

IDへのスタイル記述は行わない（CSSの再利用性を低下させるため）。

CSSのプロパティ名、プロパティ値はそれぞれ小文字で記述を行う。

値が0の場合、単位は省略する。

line-heightに単位は不要とする。

URLの指定にはクォートは使用しない。セレクタとプロパティの値にダブルクォートではなくシングルクォートを使用する。

CSSハックの利用は最小限に抑える。

CSSフォーマット記述ルール

プロパティが１つだけの場合、単一行で表す。

最後のセレクタと宣言ブロックの間に半角1文字のスペースを挿入し、中括弧はセレクタと同じ行に記述する。

プロパティ名のコロンの後に半角1文字のスペースを挿入する。

宣言ごとに一行の行間を設置する。

CSSプロパティ指定順序

プロパティ指定順序はアルファベット順とする。

JavaScript基本ルール

原則としてJavaScriptは外部ファイル化して読み込みを行う。また、その際は<head>内で読み込まず、</body>直前に<script>タグを設置し、読み込みを行います。

変数宣言には常に var を付加する。

常にセミコロンを使用する。

シングルクォートを原則として使い、改行（\n）などが必要な場合はダブルクォートを使用する。

変数名、関数名はローワーキャメル方式にて設定する。