XHTML+CSSコーディングガイドライン
XHTML1.1+CSSのコーディングガイドラインです。 
PetaCodeは以下のガイドラインに則り、コーディング作業を実施致します。

基本方針

対応保証ブラウザ

InternetExplorer7以上 
Safari最新版 
GoogleCrome最新版 
FireFox最新版 
Opera最新版

表示確認環境

Windows7:IE7(DeveloperTools使用) 
Windows7:IE8(DeveloperTools使用) 
Windows7:IE9 
Windows7:Firefox 
MacOSX MountainLion:Safari 
MacOSX MountainLion:GoogleCrome

ディレクトリの構造

  • SITE Directory
    • css
      • import.css [他CSSファイル読み込み用CSS]
      • base
        • reset.css [初期設定・リセット用CSS]
        • structure.css [レイアウト(大枠)用CSS]
        • textdecorations.css [文字制御用CSS]
        • header.css [ヘッダー用CSS]
        • footer.css [フッター用CSS]
        • globalnavi.css [グローバルナビ用CSS]
        • others.css [その他テンプレート用CSS]
      • parts
        • form.css [フォーム用CSS]
        • table.css [テーブル用CSS]
        • others.css [その他個別パーツ用CSS]
      • individual
        • home.css [トップページ用CSS]
        • other.css [下層ページ用CSS]
    • img
      • base [テンプレート部分に使用する画像]
      • common [サイト全体に共通する画像]
      • parts [個別パーツに使用する画像]
      • home [トップページの画像]
      • subdirectory [サブディレクトリの画像]
    • js
      • common.js [サイト共通用JavaScript]
      • others.js [パーツ用JavaScript]
      • jquery.js [jquery]
    • include [SSIテンプレートファイル用]
    • index.html [トップページ]
    • subdirectory1
      • index.html
    • subdirectory2
      • index.html
    • subdirectory3
      • index.html

画像ファイルの形式・命名規則

画像の内容に応じてファイル形式を変更。基本は透過pngを使用し、写真等の画像はjpgを使用する。下記の命名規則により画像の意味に応じて画像名を設定する。

【 画像ファイル命名規則:▽▽▽_▼▼▼_△△.拡張子 】

▽▽▽ = ページ名or部品名 
▼▼▼ = 画像の種類 
 △△ = 番号

[ ページ名・部品名 ]
form 
service 
header 
footer 
glovalnavi ・・・等
[ 画像の種類 ] 
tit : タイトル 
img : イメージ 
btn : ボタン 
bg : 背景 
bnr : バナー 
logo : サイトロゴ 
line : ライン用画像
[ 画像の命名例 ] 
service_tit_01.png 
footer_bg_03.png 
home_bnr_01.jpg 
globalnavi_btn_01.png

SSIを利用したテンプレート化

サーバ上でSSIの使用が許可されておりSSIでのサイト構築が可能であれば、共通項目は基本的にSSIでテンプレート化を行う。 
その場合は、パスは絶対パスで指定し「部品名.inc」としてincludeフォルダに格納する。

[ SSI指定例 ]
<!-- #INCLUDE VIRTUAL = "/include/部品名.inc" -->

HTML関連ルール

DOCTYPE宣言

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ブラウザバグ回避のため、基本的にはxml宣言は記載しません。

META情報の設定

基本的にmeta情報はページ毎に設定する。指示がない場合は下記の通り設定する。

<title>
ページ名 | 会社名(サイト名)
<meta content>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="content-style-type" content="text/css; charset=utf-8" /> 
<meta http-equiv="content-script-type" content="text/javascript" />
<meta description>
指定の無い場合は空で挿入
<meta name="description" content="" />
<meta keywords>
指定の無い場合は空で挿入 
<meta name="keywords" content="" />

img要素の指定

img要素には、alt/width/heightを記述する。
画像タイトル等は使用されている文章をそのままaltに記述し、文字のないイメージ画像等はalt=””と記載する。 

例)<img src=”xxxxxxx” width=”xxx” height=”xxx” alt=”” />

その他

  • タグは全て小文字、インデントはtabキーを使用して記述。
  • 閉じタグのコメントは、閉じタグの前に挿入。
  • サイト内のリンクは相対アドレスとし、外部リンクはtarget="_blank" を指定。
  • 特殊文字は文字実態参照や数値実態参照を用いて記述。
  • 英数字は半角

CSS関連ルール

ファイルのimport指定

メンテナンス作業効率化の為、CSSを機能別にモジュール化し、import.cssにて一括読み込みを行います。

[ import.cssの例 ]

@charset "utf-8";

/* Base
========================================== */
@import "base/reset.css";
@import "base/structure.css";
@import "base/header.css";
@import "base/footer.css";
@import "base/navigation.css";
@import "base/textdecorations.css";

/* Parts
========================================== */
@import "parts/table.css";
@import "parts/form.css";

/* Individual
========================================== */
@import "individual/home.css";

id・class指定

body要素には、プレフィックスとしてidとclassを設定する。 
設定名は半角小文字で統一し、キャメルケースは使用しない。 
divやspanを必要以上に多用せず、基本的には要素名にclassを設定する。

[ classの指定方法 ]

<ul class="filelist">
<li>file1</li>
<li>file2</li>
<li>file3</li>
<li>file4</li>
<li>file5</li>
<!-- end filelist --></ul>

ブラウザスタイルのリセット

Yahoo! UI LibraryのReset CSSを利用し、各種ブラウザスタイルを初期化した上で、コーディングを行います。

[ Yahoo! UI Library:Reset CSS ]

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/

html{
    color:#000;background:#FFF;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;padding:0;
}

table{
    border-collapse:collapse;border-spacing:0;
}

fieldset,img{ border:0; }

address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;font-weight:normal;
}

li { list-style:none; } caption,th{ text-align:left; }

h1,h2,h3,h4,h5,h6{
    font-size:100%;font-weight:normal;
}

q:before,q:after{ content:''; }

abbr,acronym{ border:0;font-variant:normal; }

sup{ vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

input,textarea,select{ font-family:inherit;font-size:inherit;font-weight:inherit; }

input,textarea,select{ *font-size:100%; }

legend{ color:#000; }

フォント設定

Yahoo! UI LibraryのFonts CSSを利用し、文字の大きさは13pxを基準として%で指定する。

[ 基本フォント ]
font-family: "メイリオ","Meiryo","MS Pゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
[ 英数フォント ]
font-family: Verdana, Helvetica, sans-serif;
topへ