サービス内容

Service

HTML・CSSガイドライン

kanvasで使用しているHTML・CSSのガイドラインをご紹介します。
コードのマークアップを、このガイドラインに準拠して制作を行います。

※制作サイトの仕様や、利用するプラグインによって内容が追加される場合があります。
※WordPressでの制作をベースにルールを記載しています。

1.基本ルール

エンコーディングやインデントなど、マークアップに関する基本的なルールです。

1-1.エンコーディング

UTF-8(BOMなし)を使用します。

1-2.インデント

半角スペース4つのインデントを使用します。

1-3.大文字・小文字

基本的にキャメルケースは使用せず、すべて小文字でマークアップします。

2.HTMLのガイドライン

HTMLをマークアップする際に使用するガイドラインです。

2-1.HTMLのバージョン

html5を使用します。

2-2.DOCTYPE宣言

文書の先頭でDOCTYPE宣言を記述します。

<!DOCTYPE html>

2-3.セマンティック

目的に沿ったHTML要素を使用します。

2-4.文字参照

HTMLとして意味を持つ文字以外で文字参照は使いません。

3.CSSのガイドライン

CSSをマークアップする際に使用するガイドラインです。

3-1.CSS設計

CSS設計にSMACSSを使用します。

3-2.SMACSSについて

SMACSSはCSSを5つのルールにカテゴライズして記述します。5つのルールとは「ベースルール」「レイアウトルール」「モジュールルール」「ステートルール」「テーマルール」です。

id・classの命名規則についての詳細は命名規則を御覧ください。

3-3.ベースルール

レイアウトルールには、ページを分割するレイアウトのスタイルを記述します。プレフィックス「l-」を先頭に付与します。

.l-header {
}
.l-footer {
}
.l-main {
}
.l-side {
}

3-4.モジュールルール

モジュールルールには、再利用できるパーツのスタイルを記述します。プレフィックス「m-」を先頭に付与します。

.m-logo {
}
.m-date {
}
.m-tel {
}

※親要素の命名で分岐させると、モジュールとして機能しないので注意します。

3-5.ステートルール

ステートルールには、特定の状態でスタイルを変化させる内容を記述します。プレフィックス「is-」を先頭に付与します。

.is-active {
}
.is-on {
}
.is-off {
}

※スタイルの競合を避けるために、ステートルールは特定のモジュールとセットで記述します。

3-6.テーマルール

テーマルールには、見た目に関するスタイルを記述します。プレフィックス「t-」を先頭に付与します。

.t-ttl {
    color: #333;
}
.t-ttl-bg {
    background-color: #ccc;
}

サービス内容

以下のリンクより、サービス内容のメニューページへ戻ります。