HTML5+CSS3コーディングガイドライン
HTML5+CSS3のコーディングガイドラインです。 
PetaCodeは以下のガイドラインに則り、コーディング作業を実施致します。 
 
コーディングの考え方として、基本的に「プログレッシブ・エンハンスメント」を採用します。
古いブラウザに合わせた実装を行いつつ、最新のブラウザに対しては最新のコンテンツを提供します。
また、古いブラウザ環境用にJavaScriptライブラリ等を適用させ、可能な部分については擬似的にHTML5+CSS3の機能を提供します。

基本方針

対応保証ブラウザ

IE8以前のIEブラウザ等は、基本的にHTML5+CSS3独自の新要素に対応していません。JavaScriptライブラリ等で擬似的に対応し、閲覧に支障のないレベルでコーディングします 
 
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
        • normalize.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]
      • vendor
        • modernizr.js [旧ブラウザでhtml5+CSS3対応させる為]
        • respond.js [メディアクエリを使用する場合]
        • 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" -->

レスポンシブサイトについて

スマートフォンやタブレット端末等のスマートデバイス用にサイト表示を対応させる場合は、CSS3のMediaQueriesを利用し、夫々のデバイスの画面サイズで適用するCSSを切り替えて実装する。 
MediaQueriesが動作しない環境については、ライブラリを利用した対応を実施する。 
画像容量や通信速度に注意し、必要に応じて画像切替え等の処置を実施する。

HTML関連ルール

DOCTYPE宣言

<!DOCTYPE html>

META情報の設定

指示がない場合は下記の通り設定する。

<title>
ページ名 | 会社名(サイト名)
<meta content>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width”>

*”X-UA-Compatible” content=”IE=edge,chrome=1″は、現在、Validationチェックでエラーが検出されますが、正常の指定です。
<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/normalize.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>

ブラウザスタイルの標準化

normalize.css等を利用し、各種ブラウザスタイルをノーマライズ(プロパティ標準化)した上で、コーディングを行います。

フォント設定

文字の大きさは、旧ブラウザと最新ブラウザを差異を吸収する為、pxとremの両方で指定する。
又、ご要望が無ければ、下記の通りフォントを指定する。

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