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

C-Labo.では下記のようなポリシーでコーディングをしています。

ディレクトリ構成

【お願い】下層コンテンツのディレクトリ名はご指示をいただくようお願いします。

特にご指定がなければ上記のような構成でサイトを制作します。
※CMSなどの種類によってはこの通りではない場合があります

ライブラリ、プラグインを利用する場合、別ファイルや別ディレクトリとします。必要があればサイトのスタイルで上書きをして利用する場合があります。
ライブラリ、プラグインは入れ替える可能性を考慮し、改変、リネームは原則行いません。

概ね以下のようなルールで命名しています。
その時々により、利用箇所やがわかりやすいようにしています。

利用箇所_固有名（ハイフンでつなぐ）.拡張子※大文字は使わない

例）
bg_page-header-about.jpg
btn_submit.png
icon_arrow-right.gif
nav_global01.png、nav_global02.png

原則最新ブラウザのみの対応です。
PCではMacOSのSafari（メイン）、Chrome（サブ）での動作確認をします。
スマホではiPhone6での確認が可能です。（Android端末は1台のみ検証可能です）
WindowsOSでの確認、IE11への対応は、追加費用がかかる場合があります。

以下のツールでチェックします

HTML https://validator.w3.org/
CSS https://jigsaw.w3.org/css-validator/

概ね以下のサンプルのようなコーディングをしています。

サンプルHTML
※CSSは仮のものです

Sass言語を用いて記述する場合があります。その際、scssファイルも一緒に納品します。cssはコンパイルされた状態の（人の目にはとても読みにくい、ただしファイル容量が軽い）ものになる場合がありますのでご了承ください。
Sassを利用して欲しくない場合はその旨事前にお伝えください。

単語は原則「-（ハイフン）」でつなぎます。

.site-header,
.site-contents,
.site-footer {}
.page-header .page-title {}
.entry-header .entry-title {}

以下のような時は、「_（アンダーバー）」を利用することがあります。

.is_active {} ステータスを示す意味の場合

以下のような時は、「__（アンダーバー2つ）」を利用することがあります。

.section {}
.section__header {} ある要素の内部で使うことを明確にする場合
.section__body {} 同上

以下のような場合に–（ハイフン2つ）を使う場合があります。

.button {}
.button.button--outline {} ある要素のバージョン違いが存在する場合
.button.button--sub-color {} 同上

この場合、ハイフン2つ付きの要素をモディファイアと呼び、多くはハイフンの前にあるクラス名の要素を一部上書きしています。

利用例
<a href="" class="button button--outline">ボタンのようなリンク</a>

サイトの機能についてはあらかじめ要件を定めていただきますよう、お願いいたします。
コーディングのお見積もり・実作業には、以下の資料が必要となります。順序は概ね制作する順番になっております。

要件定義について、どんなことを定めるべきかわからない場合は、こちらが参考になるかもしれません。
要件定義ヘルパー（β版）

サイト内にあるページの一覧は早い段階（サイトマップが出来ていてワイヤーフレームを進めている間）で確認をご依頼いただけると、不足などの確認ができるかもしれません。また、この資料の制作自体をご依頼いただくことの可能です（費用はかかります）。
ページ一覧表の雛形（参考程度）

対応できる形式は以下のものです。
・Adobe AI
・Adobe Ps
・Adobe XD
（Adobe CCを利用し、原則最新版で作業が可能です。FireWorksについては対応できません）