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

ver. html 5

基本ガイドライン

仕様

  • 原則としてXHTML1.0 Strictに準拠する。
    要件に応じて、適宜XTHML1.0 Transitionalを用いる。
  • CSS2.1に対応する。
  • 文字コードは基本UTF-8を採用する。

ディレクトリ構造

基本のディレクトリ構成は下記の通りとする。

図:基本ディレクトリ構造

図:基本ディレクトリ構造

ページの先頭へ

画像の作成

画像作成について

  • 切り出しにはFireworksを使用する。Photoshop のデータは色の相違がないよう一度 BMP形式に書き出してから切り出す。
  • 使用するファイル形式は、指定がない場合は PNG (半透過無し) を推奨し、色数や内容など必要に応じて GIF (色数:8〜256)、JPG (品質:80〜100)を使用する。

ファイル名

  • 以下の命名規則に従って作成し、なるべく短くなるようにする。
  • 画像命名規則:○○○_△△△XXX.拡張子

    ○○○ = ページ名・パーツ名
    △△△ = 画像の種類
    XXX = 連番

    表1:画像の種類
    back 背景
    bnr バナー
    btn ボタン
    icon アイコン
    img イメージ
    line ライン
    logo ロゴ
    tit タイトル

    使用例
    home_img01.png
    about_tit01.png

ページの先頭へ

ブラウザ対応

ブラウザについて

  • 各種ブラウザよる表示がほぼ同じになるようにする。
  • フォントやフォーム系はできる限り差異が無くなるよう努める。
  • 下記ブラウザでの対応を保証し、万が一不具合を発見した場合は無償で対応する。

検証ブラウザ

  • Internet Explorer 6以降
  • Firefox 2以降
  • Safari 2以降
  • Opera 9以降
  • Google Chrome

これらのブラウザを考慮して、標準準拠モードを使用する( XHTMLガイドラインDOCTYPE宣言の項を参照)。

過去バージョンのブラウザへの対応

  • IE4、NN4、MacIE5 以前のバージョンには、以下のようにCSSを適用させない措置をとる。
  • 読み込み専用の "import.css" を準備し、本CSSファイルを読み込む @import命令を次のように記述する (IE4,NN4対策)。
    								@import "style.css";
    							
  • 上記の @import命令にCSSハックを施す (MacIE5対策)。
    								/* ¥*/
    								@import "style.css";
    								/* */
    							

ページの先頭へ

制作時の注意点

  • クロスブラウザで確認し、適宜、IE6, 7やOpera、Safari、FireFox などで表示をチェックする。
  • XHTMLの文法をチェックする。
    The W3C Markup Validation Service または Firefox の機能拡張 HTML Validator を使用する。
    HTML Validator を用いる場合、アルゴリズムは"併用"を選択する。
  • CSSの文法をチェックする。
    CSSの文法チェックは W3C CSS 検証サービスを使用する。

ページの先頭へ