コーディングガイドライン 2015.0725作成
1.HTMLファイル制作ルー ル
1-1 文字コード
指定がない場合は原則UTF-8を使用する。
システム要件/言語/サーバによるリクエストなどからShift-JISやEUC-JPなどとする場合もある。
1-2 改行コード
指定がない場合は原則CR+LF（Windows）とする。
1-3 DOCTYPE
PCサイトの場合はXHTML 1.0 Transitionalで制作を行う。
スマートフォンサイト、レスポンシブウェブデザイン、タブレット向けサイトはHTML5を用いる。
phpファイルの場合は、XML宣言はphpで行う。
XHTML 1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>ページタイトル｜サイト名</title>
<meta name="keywords" content="キーワード名" />
<meta name="description" content="サイト説明文" />
<link rel="stylesheet" type="text/css" href="common/css/base.css" media="all" />
<link rel="stylesheet" type="text/css" href="common/css/style.css" media="all" />
</head>
<body>
内容
</body>
</html>
HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="サイト説明文">
<meta name="keywords" content="キーワード名">
<title>ページタイトル｜サイト名</title>
<link rel="stylesheet" href=" common/css/base.css">
<link rel="stylesheet" href=" common/css/style.css">
</head>
<body>
内容
</body>
</html>
PHPファイルの場合のXML宣言
<?php echo '<?xml version="1.0" encoding="UTF-8"?>'."\n" ?>
1-4 改行とインデント
ソースの改行は、ブロック要素の終了タグの後等、適宜行う。
インデントにはtab（半角スペース4つ分）を使用し、全角・半角スペースを使用しない。
1-5 パス
サイト内リンク/画像のリンク共に、指定がない場合は原則として相対パス(ドキュメント)とする。
SSIやCMSの都合上、ルート相対パス（サイトルート）で記述する必要がある場合は、
絶対パスを使用可とする。
1-6 タグ
<title>タグ
・ページ名、親カテゴリ名、サイト名の順に、「｜」（全角縦棒）で区切る。
親カテゴリがない場合: ページ名｜サイト名
親カテゴリにあたるカテゴリが多い場合 : ページ名｜カテゴリ名｜サイト名
<hx>タグ
■<h1>は、特に指定がなければ、TOPページではサイトタイトル・ロゴなどに使用し、その他
のページではページ固有のタイトルにあたるテキスト、もしくはimg要素に対して使用する。
・ページ内では文書の論理構造に合わせて、必ず見出し要素を使用すること。
<img>タグ
■imgタグには画像サイズ属性と属性値を指定すること。
■CMS,レスポンシブウェブデザインのなど構造上で不要な場合は、指定なしとする
■alt属性にて画像の代替となるテキストを設定する。
※装飾用の画像など、相応しい代替テキストが存在しない画像の場合には、「alt=""」と設定
する。
<div>タグ
■ソース内容が把握しやすいよう、class、id付きの閉じ</div>の前に必ずコメントを入れる。
<!-- /contents --></div>
1-7 その他
■英数字は半角で統一とする。
誤：２０１１年１０月３１日
正：2011年10月31日
■要素名および属性名はすべて小文字で記述する。
要素：div、p、input、img
属性：id、class、type、src
■終了タグは省略しない。
</p>、</div>、</tr>、</li>、</option>
■CSSでの再現が困難な場合を除き、必然性のない（レイアウトを目的とした）tableコーディ
ングは行わない。
■機種依存文字の記述には、下記のようなエンティティ文字を使用する。
http://dev.w3.org/html5/html-author/charref
■Google Analytics(グーグル・アナリティクス)タグは、原則として</head>(閉じヘッド)の直
前に記述する。
2.CSSファイル制作ルール
2-1 文字コード
HTMLの文字コードに合わせる
2-2 フォントファミリー
フォントファミリーは以下の順序で記述する。
"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS
PGothic", Arial, Helvetica, Verdana, sans-serif;
2-3 CSS記述の統一
■グローバルナビゲーションは<ul>タグにはidを付与し、そのid名は"gNavi"とする。
■レンダリングのスピードを考慮し、原則CSS Spritesで組む。
■ローカルナビゲーションは<ul>で組み、<ul>タグにはidを付与し、そのid名は"subNavi"とする。
2-4 命名規則 id
■id名は以下のルールに沿って命名する。
■文書構造上、意味のある名前にすること。
■ローワーキャメル方式で命名すること。
wrapper
header
headerInner
headerUtility
gNavi
contents
mainContent
subNavi
footer
footerInner
2-5 命名規則 class
class名は原則、以下のルールに沿って命名する。
■文書構造上、意味のある名前にすること。
■2語以上のローワーキャメル方式で命名すること。
■末尾に2桁の連番を付けること。
categoryList01
secTutorial01
btnTweet01
2-6 一般CSS記述
■セレクタについて
・1行1プロパティとし、各プロパティはタブインデントを付ける。
・コードヒントを利用するため、プロパティの値の前には、必ず半角スペースを入れる。
・継承させる場合はセレクタにインデントを付ける。
例）
.example {
display: block;
margin: 0 auto:
width: 900px;
}
.example01 a { margin-left: -100px;}
.example02 a { margin-left: -200px;}
■ショートハンドプロパティについて
・一括指定可能なプロパティ(margin等)の個別指定(margin-top等)は、1つまでとする。
・2つ以上の個別指定は一括指定にまとめる。
誤）
margin-top: 4px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 20px;
正）
margin: 4px 10px 8px 20px;
2-7 ファイル構成と内容
■base.cssについて
・base.cssはスタイルのリセット、汎用クラス、共通パーツの内容を記述する
以下、汎用クラスの例
Class name
Description
fwX
font-weightの設定
fzX
font-sizeの設定
taX
text-alignの設定
vaX
vertical-alignの設定
wX
幅の設定
floatL,floatR
float指定
over,opa
JavaScript呼び出し用class
tXbX
天地マージンの設定
mlX
マージンレフトの設定
mrX
マージンライトの設定
pXbX
パディングの設定
line
行間の設定
3.JavaScriptファイル制作ルール
3-1 前提
特に指定がない場合jQueryを利用する。
jQueryはCDN版を利用する。
原則、複数ページで共通に使用するスクリプトは外部ファイル化する。
3-2 文字コード
HTMLに合わせる。
ただし、ダウンロードしてくるものは原則変更しない。
3-3 初期設定JavaScript
■ロールオーバー
・<img>要素にclass="over"を付与すると、
「_no」のファイル名をマウスオーバー時「_on」に切り替える。
・<img>要素にclass="opa"を付与すると、
マウスオーバー時に半透明にする
■スムーズスクロール
<a>要素を内包するブロック要素にclass="pageTop"を付与すると、
ページ最上部までスムーズスクロールする。
4.ディレクトリ制作ルール
4-1 前提
■サイト作成開始時にディレクトリリストを必ず作成し、それに沿って運用を行う。
■作業中にディレクトリの増減、リネーム等を行う場合は、担当者間で取り決めること。
■先頭には「-（ハイフン）」「_（アンダースコア）」を使用しない。
■スペースは使用しない。
■単語が複数連続する場合、単語間に「_（アンダースコア）」を使用する。
■ディレクトリ名は半角31文字以内で収めるようにすること。
■基本的に英単語表記にし、なるべく内容が分かるような命名をすること。
4-2 前提ディレクトリの命名規則
ディレクトリ名に使用できる文字は以下のとおり。
■「a」∼「z」までの小文字のアルファベット（1バイト）
■「0」∼「9」までの英数字（1バイト）
■「-（ハイフン）」と「_（アンダースコア）」（いずれも1バイト）
■先頭には「-（ハイフン）」「_（アンダースコア）」を使用しない。
■スペースは使用しない。
■単語が複数連続する場合、単語間に「_（アンダースコア）」を使用する。
ディレクトリ文字数
ディレクトリ名は半角31文字以内で収めるようにすること。
4-3 基本的なディレクトリ構成
root/
├index.html(index.php)
├common
¦ ├ css
¦ ¦ ├ bace.css(リセット,共通パーツ,汎用クラス)
¦ ¦ ├ style.css(コンテンツ)
¦ ¦ └ 適宜追加
¦ ¦
¦ ├ js
¦ ¦ ├ jquery.js
¦ ¦ ├ common.js
¦ ¦ └ 適宜追加
¦ ¦
¦ └ img
¦
├ header
¦
├ gNavi
¦
├ subNavi
¦
├ footer
¦
├ other
¦
├ icon
¦
└ btn
¦
├ img/(page)
¦
├ category
¦
└ category
¦
└ category
└ index.html(index.php)
5.ファイル・画像ファイル作成ルール
5 -1 ファイル名の命名規則
ファイル名に使用できる文字は以下のとおり。（ファイル名には拡張子必須）
■「a」∼「z」までの小文字のアルファベット（1バイト）
■「0」∼「9」までの英数字（1バイト）
■「-（ハイフン）」と「_（アンダースコア）」（いずれも1バイト）
■先頭には「-（ハイフン）」「_（アンダースコア）」を使用しない。
※ファイル名に2バイト文字とスペースは不可
ファイル名文字数
■拡張子を含む半角小文字31文字以内とする。
5 -2 画像ファイル命名規則
[識別名] + ["_"] ＋ [ページ名・カテゴリ名]（+ ["_"]+ [詳細] ）+ [連番2桁].拡張子
※[ページ名・カテゴリ名]、[詳細]は不要だと判断される場合は省略可。
※同種の画像が他にない場合でも、必ず2桁の連番をつける。
例)
tit_top01.gif
bg_lineup_form01.gif
5 -2 識別名
識別名
用途
命名
bg
背景や、ボーダー用にリピートさせて使われる画 bg_top01.png,bg_sitemap.pn
g
像
btn
ボタンとして使われる画像
btn_category01.png
icon
アイコンとして使われる画像
ico_arrow01.png
bnr
バナーとして使われる画像
bnr_subNavi01.jpg
h1〜h6
<h1>タグなどの論理タグで囲まれる見出し画像
h1_business.png
tit
h1～h6等に用途が限られない見出し画像
tit_top01.png
txt
デザイン上、画像化するテキストの画像
txt_top01.png
pic
写真画像
pic_top01.jpg
thumb
サムネイル（小さい）画像
thumb_category01.jpg
img
写真以外のイラストや図表などの画像
img_top02.png
logo
ロゴ
logo_top.png
mainimg
ページのメイン画像
mainimg_top01.jpg
6.対応ブラウザとチェック方法
6 -1 対応ブラウザ
【Windows】
Internet Explorer8（純正）
Internet Explorer9（純正）
Internet Explorer10（純正）
Internet Explorer11（純正）
Google Chrome 最新版
Firefox 最新版
【Mac】
Safari 最新版
6 ‒ 2 ブラウザ目視チェック
表示のズレ、リンク先のチェック等、目視でのチェックが必要な項目をブラウザごとに検証する。
【Windows】
chrome 発注時の最新
windows 8 IE11(純正)
windows 8 IE10(開発ツール)
windows 8 IE9(開発ツール)
windows 8 IE8(開発ツール)
windows 7 IE10(純正)
windows 7 IE9(開発ツール)
windows 7 IE8(開発ツール)
【Mac】
Mac OS X
chrome,safari 発注時の最新
【スマートフォン】
iPhone IOS 6
5以前はシュミレーター
android xperia A
galaxy S5（docomo GALAXY S5 SC-04F）
© Copyright 2024 Paperzz
