スプレッドワークス コーディングガイドライン Version 1.0β

HTML

HTMLバージョン

HTML5

CSSバージョン

CSS3
指定ブラウザで正常に動作する仕様を利用すること。

文字コード/改行コード

UTF8 / CRLF

指定ブラウザ

バージョンを指定していないブラウザは制作着手時の最新ブラウザを対象とする。

ディレクトリ構造

• docroot
  • img・・・サイト内で使用する画像はすべてこのディレクトリに集約すること。
  • css
  • js

命名規則

ファイル名、ディレクトリ名、CSSクラス、ID名の命名を規定します。

使用可能文字列

• 以下の半角英数字記号のみを使用すること。
  abcdefghijklmnopqrstuvwxyz-_
  .#

HTMLファイル名

• 拡張子は.htmlにすること。
• 単語の区切りはハイフンでつなぐこと。
  カテゴリー名をファイル名に含める場合はアンダーバーでつなぐこと
  service_web-site.html
• ファイル名に番号をつける場合はアンダーバーでつなぎ 01 または 001 など 0 でパディングすること。
  web-site_001.html

CSSセレクタ

• 単語の区切りはハイフンでつなぐこと
  .title-service {}

画像ファイル名

• JPEG の拡張子は jpg にすること。
• 単語の区切りはハイフンでつなぐこと。
  カテゴリー名をファイル名に含める場合はアンダーバーでつなぐこと。
  service_web-site.html
• 画像の種類毎に接頭詞をつけること。

  ボタン	b_
  アイコン	i_
  背景	bg_
  タイトル画像	t_

• ファイル名に番号をつける場合はアンダーバーでつなぎ 01 または 001 など 0 でパディングすること。
  b_button_001.png

コーディング

HTML

• タグは字下げ(インデント)をすること。ただし、<p>や<hr>、<img>などの空要素は字下げをする必要はない。
• 字下げはスペースではなくタブで記述すること。
• 開始タグと終了タグが離れている場合は、終了タグの後に id 、class名を入れたコメントを適宜いれること。
  <div id=”wrap”>
  </div><!– /#wrap>

CSS

• 開始要素の中括弧の後に改行を入れ、字下げ(インデント)をすること。
• 字下げはスペースではなくタブで記述すること。
• 同じような要素がつづく場合、可読性が上がるのであれば字下げをしなくてもよい。
  .style {
      color: #000000;
  }
  
  .button-01 { color: #ff0000; }
  .button-02 { color: #00ff00; }
  .button-03 { color: #0000ff; }
  

コーディングチェック

HTML LINT でチェックすること。
http://www.htmllint.net/html-lint/htmllint.html

Severity が 5 以上ののものは修正すること。ただし、コンバージョンタグ,HTML・CSSハックなどで発生したエラーは修正しなくて良い。

Bootstrapを利用したコーディングについて

• バージョン3で作成すること。
• Bootstrapのコンポーネントでは実現できないレイアウト、パーツの場合に限り、Classを定義し使用すること。
• 独自に追加したClassはBootstrapで定義されたClassと区別するため、セレクタ名の接頭詞に「sw-」をつけること。
  .sw-menu , .sw-title