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

スタイルリンクでは案件に最適なコーディングガイドラインを策定し、作業工数の削減・効率化を図り、品質の確保、スキルの均一化、ノウハウの体系化を行っております。
現状サイトにWebガイドラインやご要望があれば、柔軟に対応いたしますのでお気軽にご相談ください。

目次

  1. ディレクトリ構成について
  2. HTMLコーディング ガイドライン
  3. CSSコーディング ガイドライン
  4. 命名規則 （ディレクトリ名）
  5. 命名規則 （HTMLファイル）
  6. 命名規則 （画像ファイル）
  7. 命名規則 （CSSファイル）
  8. 対象ブラウザ

ディレクトリ構成について

共通ファイル

共通するファイル（パーツ）は、/common/ の中に格納します。

  • CSSファイル　→　/common/css/
  • 画像ファイル　→　/common/img/
  • JavaScriptファイル　→　/common/js/
  • インクルードファイル　→　/common/inc/

例）
共通ファイル場所

HTMLファイル

カテゴリー毎にフォルダを作成し、その中に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は適宜インデントを行います。

例） HTMLの場合

<ul>
<li>商品1</li>
<li>商品2</li>
</ul>

コメントの挿入

必要に応じ終了タグの後にコメントを挿入します。
レイアウト関連のブロック要素には必須とします。

例）

<div id="header">
<p>ヘッダー内容が入ります</p>
</div><!-- /#header -->

XML宣言

XML宣言を記述する事により、
一部のブラウザが「互換モード」で表示するバグがあります。
文字コードが「UTF-8」の場合はXML宣言自体を省略することが出来ますので、
上記バグを考慮しXML宣言は記述いたしません。

DOCTYPE

XHTML 1.0 Transitional DTD、もしくは、HTML5を用います。
HTML5の場合、IE8等の未対応ブラウザを考慮し、html5.jsを読み込みます。

例） 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の例

&#105;&#110;&#102;&#111;&#64;&#115;&#116;yl&#101;&#108;&#105;nk.n&#101;t

参考） 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ファイル）

このページの先頭に戻る

命名規則 （画像ファイル）

画像ファイル名に大文字は使用せず、下記規則で命名します。

[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

例）
命名規則 （CSSクラス）

このページの先頭に戻る

対象ブラウザ

下記ブラウザをターゲットブラウザとし、コーディング後は検証します。

Windows

  • Intenet Explorer 8 以降
  • Chorome（制作時の最新版）
  • Firefox（制作時の最新版）

Macintosh

  • Safari（制作時の最新版）

このページの先頭に戻る