サービス内容
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;
}