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

本ガイドラインについて

この文書（以下ガイドライン）は、株式会社cbicがgamilaWEBサイト関連の制作を行う際の記述ルールなどを定めたものです。
新規ページの作成や既存ページの修正・更新作業の際に、クオリティーの確保とメンテナンス性の向上を目的に作成しています。
また本ガイドラインは、新たなルールが必要な際に検討をし、随時更新を行います。

ガイド欄が定める仕様

DTD(文章型定義) HTML5
CSS css2.1~
Charset UTF-8
OS Windows,Mac
対象環境 Windows
  • IE8以上
  • Chrome
  • Firefox
  • Microsoft Edge
Mac
  • Safari
  • Chrome
  • Firefox
Android4.1以上
  • 標準ブラウザ
  • Chrome
  • Firefox
ios7.x以上
  • Safari

※バージョン番号の記載がないブラウザは構築時の最新バージョンを対象とします。

DTD(文章型定義)

原則HTML5で記述する。 (指定があった場合にはそれに従う)

CSS

css2.1を基本仕様とする。
※css3を利用する場合は、非対応ブラウザの対応を行う。

Charset

特に指定のない限りHTML及びCSSのCharsetはUTF-8とする。

対象環境

OSはWindows及びMacとし、対応ブラウザはIE8以上と最新版のChrome,Firefox,Edge,Safariとする。

命名規則

HTMLファイル、ディレクトリ、画像ファイル及びCSS（id及びclassセレクタ）の名前の付け方は以下を基本ルールとします。

HTML

HTMLの命名規則を以下のように定めます。

  • 基本的にそのファイルのページタイトルを英語化し、ファイル名にする。

CSS

CSSの命名規則を以下のように定めます。

  • class名はスネークケースで命名。
    例）hoge_container
  • class名は汎用的ではないクラス名を指定する。
    例）【誤：.inner】 【正：.hoge_inner】
  • 先頭を数字にしないようにする。

画像

HTMLの命名規則を以下のように定めます。

  • png形式：イラストやアイコンなど色の境目がはっきりしているようなもの、透過部分があるもの
  • jpg形式：写真などの色の境目が曖昧なもの
  • gif形式：gifアニメが必要なもの
  • 汎用画像はプレフィックス（接頭辞）をつける
    例）btn_hoge

禁止事項

  • text-indent: -9999px; 等でテキストを画面外に追いやってユーザーが読めない状態にしない
  • font-size: 0; 等で文字サイズが小さすぎてユーザーが読めない状態
  • 汎height: 0; 等で高さを消しユーザーが読めない状態

基本ルール

HTML

HTMLの基本ルルールとします。

  • 必ずテンプレートを使用する。
  • HTMLタグは必ず小文字で記述する。
  • 終了タグは必ず記述する。
  • 機種依存文字などの特殊文字を記述する際はコードを利用する。
    例）& → &
  • Alt属性は必ず記述する。
    (装飾などについては空とする)
  • img要素のwidth・heightはできる限り指定する。
  • HTMLファイル内では基本的にHTMLのみのマークアップを行い、装飾やアニメーションは外部ファイル化したCSS、JavaScriptで行う。
  • HTMLは可能な限り正しく記述する。
    validator.w3.org/などの検証ツールを利用し検証する。
  • pc,spと別ページで作成する。
  • ページ全体を任意のクラス名でWrapしてからコーディングを行う。
    例）.hoge_wrapの中にコンテンツを記述。
  • スマホページでカルーセルを設置する場合にはスワイプ対応させる。
    プラグインを利用する場合はslickなどIE8対応しているものを利用する。

CSS

cssの基本ルールとします。

  • HTML内に直接記述することは原則禁止します。
  • reset.cssを利用する場合は打ち消さないよう、作成ページ内のみ指定。
  • 圧縮しない。
  • ベンダープレフィックスは必要なもののみ記入
    （余分なものは削除する）
  • 使用していないclassは削除する。
  • css3を利用する際には非対応ブラウザへの対応を行う。

禁止事項

  • ハックは原則使用しない
  • importantは原則使用しない
  • 画像置換、隠しテキスト（text-indent: -9999px;とか）は原則使用しない

js

JavaScriptの基本ルールを下記の様に定めます。

  • HTML内に直接記述することは原則禁止します。
    (HTML内に記述する必要のあるものはこの限りではない)
  • HEAD内では読み込まずに< /body >タグの直前で読み込ませる。
    (ただし、 外部サービスなどの指定されたJavaScriptを利用する際に、読み込みの方法に指定がある場合はそれに従います。)
  • 圧縮しない。
  • アンカーリンク設置の際はサイト内で使用しているjsと衝突してしまうためSmoothScrollの指定はしない。

画像

画像の基本ルールを以下のように定めます。

  • 利用していない画像,ディレクトリは削除する。
  • 利用した画像は最適化してなるべく圧縮する。