スタイルリンクでは案件に最適なコーディングガイドラインを策定し、作業工数の削減・効率化を図り、品質の確保、スキルの均一化、ノウハウの体系化を行っております。
現状サイトにWebガイドラインやご要望があれば、柔軟に対応いたしますのでお気軽にご相談ください。
目次
- ディレクトリ構成について
- HTMLコーディング ガイドライン
- CSSコーディング ガイドライン
- 命名規則 （ディレクトリ名）
- 命名規則 （HTMLファイル）
- 命名規則 （画像ファイル）
- 命名規則 （CSSファイル）
- 対象ブラウザ
- コーディング料金
ディレクトリ構成について
共通ファイル
共通するファイル（パーツ）は、/common/ の中に格納します。
| CSSファイル | /common/css/ |
|---|---|
| 画像ファイル | /common/img/ |
| Javascriptファイル | /common/js/ |
| インクルードファイル | /common/inc/ |
例）
HTMLファイル
カテゴリー毎にフォルダを作成し、その中にHTMLファイルを格納します。
例）
画像ファイル
使用する画像ファイルは、HTMLファイルと同階層に imgフォルダ を作り、その中に格納します。
例）
CSSファイル
基本的には、
/common/css/ の中に格納します。
独立したコンテンツの場合は、
コンテンツの最上位ディレクトリに cssディレクトリを設置し格納します。
HTMLコーディング ガイドライン
基本ルール
- 文字コードは、UTF-8（BOMなし）とします。
- 改行コードは、CR+LF とします。
- タグおよび属性は、全て小文字で記述します。
- 属性値はダブルコーテーションで囲みます。
例） <a href="http://stylelink.net"> - テキストや画像は必ずブロックレベル要素に含まれるようにマークアップします。
例） <p><img src="header.gif" alt=""></p>
インデント（字下げ）
HTMLは基本的にインデントは行いません。
JavascriptやPHP等は、適宜インデントを行います。
その際は、タブ（半角スペース4つ）を使用します。
例） HTMLの場合
<ul> <li>商品1</li> <li>商品2</li> </ul>
コメントの挿入
必要に応じ終了タグの後にコメントを挿入します。
レイアウト関連のブロック要素には必須とします。
例） idの場合
<div id="header"> <p>ヘッダー内容が入ります</p> </div><!-- /#header -->
例） classの場合
<ul class="nav"> <li>ナビゲーション1</li> <li>ナビゲーション2</li> <li>ナビゲーション3</li> </ul><!-- /.nav -->
XML宣言
XML宣言を記述する事により、
一部のブラウザが「互換モード」で表示するバグがあります。
文字コードが「UTF-8」の場合はXML宣言自体を省略することが可能なので、
上記バグを考慮しXML宣言は記述いたしません。
DOCTYPE
XHTML 1.0 Transitional DTD、もしくは、HTML5を用います。
HTML5の場合、
IE8等の未対応ブラウザを考慮し、html5.jsを読み込みます。
※マークアップは、XHTMLに準拠します。（HTML5も）
終了タグを省略しない。alt属性は省略しない。属性値のダブルクォートは省略しない。など
例） XHTML 1.0 Transitional DTDの場合
<!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-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title></title> </head> <body> </body> </html>
例） HTML5の場合
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html>
title要素
トップページ、セカンドトップ、個別ページ、では次のように指定します。
例） トップページ
<title>サイト名 ｜ キャッチコピーなど</title>
例） セカンドトップ
<title>カテゴリー名 ｜ サイト名</title>
例） 個別ページ
<title>ページタイトル | カテゴリー名 | サイト名</title>
meta要素
<meta name="description">の場合
検索結果での表示文字数を踏まえて、全角150文字程度の内容を指定する。
<meta name="keywords">の場合
ページのキーワードを半角カンマ区切りで複数列挙する。
キーワード数は5～10個程度。
パスの記述
サイト内リンクや画像は原則として相対パス、もしくは、ルート相対パスで記述します。
例）相対パス
起点となるフォルダを「./」、上位フォルダを「../」で記述します。
<a href="../company/index.html">
例）ルート相対パス
<a href="/company/img/company.gif">
ロゴのマークアップ
トップページでは、<h1>タグでマークアップ。
下層ページでは、<p>タグでマークアップします。
メールアドレス
メールアドレスのマークアップは、エンティティ化したものを記述します。
例） info@stylelink.netの場合
info@stylelink.net
参考） HTMLエンティティ化サイト
http://hp.vector.co.jp/authors/VA022023/javascript/make_html_entity-ja.htm
CSSコーディング ガイドライン
基本ルール
- 文字コードは、HTMLに合わせます。（基本的にはUTF-8）
- CSS 2.1 に対応します。
- CSSの記述は、HTMLファイルに直接記述せず、外部CSSファイルに記述し読み込みます。
CSSファイルのの読み込み
HTMLには import.css のみを読み込み、
import.cssには、@importで複数のCSSファイルを読み込みます。
例） import.css
@import "default.css"; @import "layout.css"; @import "utility.css"; @import "contents.css";
セットフォーマットルール
1行1プロパティとし、プロパティにはインデントを付けます。
プロパティが1つの場合は、1行で記述しても可とします。
- セレクタ名のあと、半角英数のスペースを1つあけて { を入力します。
- 各プロパティの前にはタブ（半角4つ）をつけます。
- プロパティが1つの場合は、一行で記述しても可とします。
- 値の後には ; を付けます。
- } の前には、タブをつけません。
例） 複数プロパティの場合
.example {
margin: 0 auto;
padding: 0;
}
例） プロパティが1つの場合
.example { margin: 0 auto; }
命名規則 （ディレクトリ名）
ディレクトリ名は、小文字を使用します。
複数単語の場合は、「"_"（アンダースコア）」でつなぎます。（スネークケース）
特別な理由がない限り「"-"（ハイフン）」は使用しません。
例）
○ company_info
× company-info ← ハイフンつなぎ（チェインケース）は NG
× conpanyInfo ← キャメルケースは NG
ディレクトリ名が長くなる場合、可能であれば短くします。
例）
corporate social responsibility
↓
csr
命名規則 （HTMLファイル）
HTMLファイル名に大文字は使用せず、下記規則で命名します。
[カテゴリー名] + [連番（2桁）] + [拡張子]
例）
命名規則 （画像ファイル）
画像ファイル名に大文字は使用せず、下記規則で命名します。
[HTMLファイル名] + ["_"] + [識別名] + [連番（2桁）] + [拡張子]
| 見出し | h1、h2、h3、h4、h5、h6 |
|---|---|
| 写真・図 | img |
| データ （PDF・ワード・エクセル） | data |
○ src="company01_img01.gif"
× src="compamy01-img01.gif" ← ハイフンつなぎ（チェインケース）は NG
× src="company01Img01.gif" ← キャメルケースは NG
例）
命名規則（CSSクラス名）
ディレクトリ名は、小文字を使用します。
複数単語の場合は、「"_"（アンダースコア）」でつなぎます。（スネークケース）
WordPressの場合は、WordPressのガイドラインに合わせ、「"-"（ハイフン）」でつなぎます。
○ class="ul_square01"
× class="ul-square01" ← ハイフンつなぎ（チェインケース）は NG
× class="slSquare01" ← キャメルケースは NG
例）
対象ブラウザ
下記ブラウザをターゲットブラウザとし、コーディング後は検証します。
Windows
- Intenet Explorer 8.0～9.0
- Chorome （制作時の最新版）
- Firefox （制作時の最新版）
Macintosh
- Safari （制作時の最新版）
- Firefox （制作時の最新版）
コーディング料金
大手企業のコーディング実績もあり、品質には自信を持っていますので是非ご検討ください。
※10ページ前後の小規模の場合
| 項 目 | 単 価 |
|---|---|
| CSS設計、ガイドライン策定 | 20,000円～ |
| HTML テンプレート （トップページ） | 15,000円～ |
| HTML テンプレート （下層ベース） | 15,000円～ |
| HTML ページ制作 標準 （縦1500px程度） | 7,000円～ |
| HTML ページ制作 簡易 | 3,000円～ |
| Javascript （jQuery等による機能拡張） | 5,000円～ |
| WordPressの導入・カスタマイズ | 150,000円～ |
