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

• このサイトは随時、内容の追加、修正をおこないます。
• サンプルファイルとしてテンプレートHTMLをダウンロードできるようにしてありますので、適宜ご活用ください。
  

• 原則としてXTHML1.0 Transitionalに準拠する。ただし案件・要件に応じて、適宜THML4.01 Transitionalを用いる。
• CSS2.1に対応する。
• 文字コードは原則としてUTF-8を採用する。

• 共通要素はcommonフォルダに格納する。
• 各ディレクトリ毎にイメージフォルダを作成する。

xxx_yyy_zzz.拡張子
xxx = ページ名・パーツ名
yyy = 画像の種類
zzz = 連番・役割

• 下記ブラウザでの表示がほぼ同じになるようにすること。
• フォントやフォーム系はできる限り差異が無くなるよう努めること。

• Internet Explorer 6以降
• Firefox 最新版
• Safari 最新版
• Google Chrome 最新版
  

• すべての検証対象ブラウザで表示確認をすること。
• XHTMLの文法をチェックすること。（The W3C Markup Validation Serviceを使用）
• CSSの文法をチェックする。（W3C CSS 検証サービスを使用）
  

• XHTML1.0 Transitionalへの準拠すること。
• 構造指定と表示指定の分割を徹底すること。
• ソースのインデントは行わないこと。
  

1. meta要素
2. title要素
3. link要素
4. script要素
5. style要素
6. その他
   

• 基本的にはすべて小文字で記述。複合語の場合は「-」ハイフンで文字をつなぐこと。
• ファイル内で個別の名前にはidを、ファイル内で別の要素と共有する名前にはclassを用いる。
• id、class名は基本的に構造や機能を表すものにする。
  例： nav-global、sub-title、category-name
• divブロックのid、class名は、HTML5に順次対応出来るよう次の名前を用いること。

• 全ての要素の開始、終了タグの後に改行を入れること。ただし、内容が短い場合は開始タグの後で改行しないこと(h、p、liタグなど)。
• body要素にはid (ディレクトリ名) をつけること。
• 複数行のブロック要素の上下には適宜改行スペースを入れること。
• 終了タグの前にコメントを挿入すること。idの閉じコメントは「/#」classは「/.」とする。
• 文字や内容のないイメージ画像のalt要素には空白(alt="")を挿入すること。
  

• 不必要なdivブロックを作らないこと。子孫セレクタ、隣接セレクタなどを活用する。
• 図やグラフの場合には「図：組織図」「グラフ：○○の統計」などのように画像の種類も入れ読み上げても分かるようにすること。
• 外部リンクには target="_blank"を使用すること。
• 英数字は半角とすること。
• HTML4.0及び4.01で非推奨とされている要素は使用しないこと。
• HTML5において、削除予定である要素は使用を控えること。

• ファイルの先頭で文字コード宣言 ("@charset") を行うこと。
• CSSの適用は、読み込み専用の "common.css" を準備し、@import命令で各CSSファイルを読み込むこと。
• head要素内での記述やインラインでの記述は、なるべく使用しないようにすること。
  

• セレクタは原則1行に記述し、文字数が多い場合は、"," 区切りで改行すること。
• プロパティの前にはタブ1つでインデントを挿入すること。
• backgroundや、marginなど、まとめられるプロパティはまとめること。
• 値の後ろには必ず ";" と改行を挿入すること。
• 値が0の場合は単位をつけないこと。
• line-heightは単位をつけないで指定すること。
• 文字サイズは13pxを基準とし、相対単位 (%) で指定すること。
  

• CSSハックは極力使用しないようにすること。
• 使用する場合は、"何に対するハックか"を必ずコメントで記述すること。
  

• JSの適用は、読み込み専用の "common.js" を準備し、document.write命令で各JSファイルを読み込むこと。
• moag標準のJSライブラリは「jQuery」とします。なお、テンプレートHTMLで使用しているバージョンは1.4.2となります。
• 各種エフェクトは「jquery-effects.js」内にまとめて記述すること。なお、記述する場合は"どんな内容のエフェクトなのか"を必ずコメントで記述すること。
• jQueryプラグインを使用する場合は、検証対象ブラウザでの動作確認を必ず行うこと。
  

• テンプレートHTMLは、サイトトップとカテゴリー第一階層トップのページサンプルで構成されています。
• テンプレートHTML内のパス表記はすべて「ルート相対パス」で記述してあります。
• テンプレートHTMLの動作検証は、最新アップデート時点でのmoag社検証対象ブラウザのみを対象としています。moag社検証対象ブラウザに関しては「基本仕様‐ブラウザ対応」の項目をご確認ください。