フロントコーディングガイドライン

このガイドラインは、株式会社エスアイアソシエイツがウェブサイトを制作する時に使用するHTML・CSSのコーディングルールを定めたものです。

このコーディング規約は新規でウェブサイトを作成するときに適応します。
保守・運用案件の場合は、そのウェブサイトのガイドラインを適用してください。

本ルールは改変が必要な際、随時更新いたします。

目次

仕様書がある場合は、そちらを優先してください。

DTD（文章型定義） HTML5
( 仕様で指定されているブラウザで見たときに、レイアウトが崩れないように調整する。 )
Charset UTF-8
対象OS Windows、Macintosh

レイアウトや装飾に関するものについては全てclassを使用する。
idは内部リンクを使用する場合に使用する。

id・class名は基本「ページ名」「部位」「要素」「詳細」「説明」「番号」の順で記述。詳しくはこちら
各単語はハイフンでつなげる。
「状態（opened、disabled、current、hover など）」の記述は単体で表す。
見た目を反映したものや、一目で役割が分からないものはさける。 

.header-logo {}
.btn-submit {}
.aside-menu {}
 
 /* 意味が分からない */
.yee-1901 {}
 
/* 見た目を反映している */
.button-green {}
.clear {}

名前についての解説

ページ名 どのページで使われているかを表 す。
headerやfooterなどの共通項目では不要です。
例：company、service、contact など
部位 どの部分で使用しているかを表す。
どこにも該当しない場合は不要。
例：header、footer、nav、article、section、aside、menu、icon など。
要素（必須） どのような種類の要素なのかを表す。
box、tit、img、photo、item、text、bg、bnr、btn、trans、table、list、note、notice、inner、utility など。
説明 「要素」に対して説明が必要な場合に付ける。
例：汎用的なボタン → btn-default
決定ボタン → btn-submit など
番号 同じ用途の画像がある場合に付ける。
00〜99まで。
三桁になることがあらかじめわかっている場合は、000〜999。

略称について

略しすぎると意味が分からなくなってしまう可能性があるため、基本的には使用しない。
ただし、以下の汎用的なものについては使用してよい。（随時更新）

タグやスタイルなどの記述は全て小文字で行う

<a href="hoge.html">リンクテキスト</a>
 
body{
	color: #333;
	background: #fff;
}
 
<A HREF="hoge.html">リンクテキスト</A>
 
BODY{
	COLOR: #333;
	BACKGROUND: #fff;
}

「http:」や「https:」は省略して記述する。

<script src="//siaj.co.jp/js/hoge.js"></script>
 
background: url(//siaj.co.jp/img/front/common/logo.png);
 
<script src="http://siaj.co.jp/js/hoge.js"></script>
 
background: url(http://siaj.co.jp/img/front/common/logo.png);

マークアップをするときは、文章内の意味や構造にあったタグを使用する。
適切な文法で書くこと。http://validator.w3.org/nu/などの検証ツールを利用する。

<header>
	<h1>タイトル01</h1>
	<p>テキストテキスト</p>
	<p>テキストテキスト</p>
	<h2>タイトル02</h2>
	<p>テキストテキスト</p>
</header>
 
/* 文章の意味がわからない */
<p>タイトル01</p>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
<p>タイトル02</p>
<p>テキストテキスト</p>
 
/* 文法が間違っている */
<ul>
	<a href="hoge01.html"><li>テキストテキスト</li></a>
	<a href="hoge02.html"><li>テキストテキスト</li></a>
</ul>

<img><br><hr>など閉じタグが必要ない要素は、括弧内のスラッシュを略す。 

<img src="img/front/photo.jpg" alt="">
 
<img src="img/front/photo.jpg" alt="" />

必ずalt属性を指定する。
特に説明が必要ない場合は「alt=""」と記述。

「text/css」「text/javascript」などのタイプを省略する。

<script src="example.js"></script>
 
<link rel="stylesheet" href="style.css"></script>
 
<script src="example.js" type="text/javascript"></script>
 
<link rel="stylesheet" href="style.css" type="text/css"></script>

ブロック要素・リスト要素・テーブル要素は改行し、その子要素にはインデントを入れる。
空白が多くなってしまう場合は、li要素を一行にしてもよい。

：改行   ：半角スペース   ：4スペースタブ
<header>
<h1>テキスト</h1>
<nav>
<ul>
<li>ナビ1</li>
<li>ナビ2</li>
</ul>
</nav>
<header>

タイプセレクタは保守性が著しく下がる場合にのみ使用する。
子孫セレクタが少なくなるようにする。 

.box li{
    float: left;
}
 
div.box ul li{
    float: left;
}

条件付きセレクタは仕様ブラウザに対応しているもののみ使ってもよいが、なるべく使用を控える。 

.input[type='submit'] {
    background: #ccc;
}
 
ul > li + .input[type='submit'] {
    background: #ccc;
}

なるべくショートハンドを使用する。

padding: 2em 1em 0;
 
padding-top: 2em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0;

単位

単位が0の場合はユニットをつけない。

margin: 0;
 
margin: 0px;

色の指定

ハッシュタグで始まる最高3桁または6桁の数字でしていする（例：#000）
色の指定は小文字表記にする。

仕様ブラウザがIE9以上+モダンブラウザの案件はrgbaでの指定も可

color: #e5e5e5;
 
color: #E5E5E5;

コードを短くできる場合はそちらを使用する。

color: #0f3;
 
color: #00ff33;

CSSハックは基本的に使用しない。
ブラウザごとに分岐が必要な場合は、新しいcssのファイルを作成し、htmlの条件付きコメントで分岐する。

基本的にパソコン用のデザインでプリントができるようにする。

sassなどを使用してcssを圧縮する場合以外は、以下のフォーマットを使用する。
全てのプロパティ値の最後には必ずセミコロンを付ける。

cssを圧縮する場合は、元の編集用のファイルを用意する。

：改行   ：半角スペース   ：4スペースタブ
.hoge{
color:#333;
font-size:90%;
}

サイト関するレイアウトや装飾など全ての指定は、このcssファイルで行う。
スタイルは部位やページなどによってカテゴリー分けし、コメントで区切る。

例：

/*=================================*/
/*  header
/*=================================*/
.header {
	・・・・・
}

/*=================================*/
/*  footer
/*=================================*/
.footer {
	・・・・・
}

/*=================================*/
/*  content
/*=================================*/
.main {
	・・・・・
}
.sub {
	・・・・・
}

/*=================================*/
/*  parts
/*=================================*/
.input {
	・・・・・
}
.button {
	・・・・・
}
.pagenation {
	・・・・・
}

/*=================================*/
/*  page-company
/*=================================*/
.company-photo {
	・・・・・
}
.company-massage {
	・・・・・
}

/*=================================*/
/*  page-service
/*=================================*/
.service-photo {
	・・・・・
}
.service-massage {
	・・・・・
}

ウェブデータ (任意)

拡張子

jpg 写真など色数が多い画像
png 色数が256色以下のもの、または透過する画像
gif アニメーションのみ

命名規則

アイコン・ボタンなどはスプライト画像にまとめ、容量を押さえる。
「状態（opened、disabled、current、hover など）」で画像を使い分ける場合は一つの画像にまとめる。

<h1>や<h2>に使用する画像を「h1_01.jpg」「h2_01.jpg」と命名するケースがあるが、後に変更になる場合があるので使用しない。

画像の名前も基本的にidやclassの命名規則に沿って用途がわかりやすいものにする。
「部位」「要素」「詳細」「説明」「番号」「拡張子」の順に名前をつけ、各単語をハイフンでつなぐ

例：
ヘッダーのロゴ 【ディレクトリ】img/front/common　【名前】header-logo.png
会社説明の画像 【ディレクトリ】img/front/company　【名前】photo-yamada.png