弊社では、特に取り決めがない限り、以下のような方針で構築していきます。
コーディング使用基本方針
タスクランナー
タスクランナーGulpを利用する。
テンプレートエンジン
HTML作成については、テンプレートエンジンEJSを利用する。
SASS
CSSの作成は、SCSSを利用する。
バージョン管理
データのバージョン管理は、Gitを利用する。
品質管理
以下のツールを利用してチェックを行う。
W3C Markup Validation Service
http://validator.w3.org/
HTMLについて
ファイル名
全て小文字とする。
単語は複数形は使用せず、単数形とする。
DOCTYPE
特に取り決めがない限り、HTML5を使用する。
文字コード
特に取り決めがない限り、utf-8とする。
titleについて
下位ディレクトリのページタイトルから記述し、連結は ‘ | ‘ を使用する。
タグ及び属性記述
小文字を使用する。
属性値の囲み
ダブルクォーテーションを使用する。
インデント
インデントは「タブ」を使用する。
メールアドレスの記述
メールアドレスのマークアップは、エンティティ化したものを記述する。
画像の命名規則
小文字を使用する。
単語の連結は ‘_’ （アンダースコア）を使用する。
ファイル名_識別名_2桁の連番（00）
対象ブラウザー
特に取り決めがない限り以下のブラウザーを対象とする。
Windows
- Edge（最新版）
- Chrome（最新版）
- Firefox（最新版）
Mac
- Safari（最新版）
iOS
- iOS （主要なバージョン）
機種依存文字
機種依存文字は、下記のように実体参照として記述する。
| 文字・記号 | 意味 | 実体参照 |
|---|---|---|
| _ | 半角スペース | |
| < | 小なり不等号 | < |
| > | 大なり不等号 | > |
| & | アンパサンド | & |
| “ | ダブルクオーテーション | " |
| ￥ | 円 | ¥ |
| ① など | 丸数字 | ① |
| Ⅰ など | ローマ数字 | Ⅰ |
| ® | 登録商標 | ® |
| © | 著作権 | © |
| ™ | トレードマーク | ™ |
CSSについて
文字コード
特に取り決めがない限り、文字コードはUTF-8とする。
ID
装飾用のIDは極力使用しない。
ページ内リンクのみに使用する。
メタ言語SASS
SCSS記法を使用する。
コメントの記述
コメントでの大見出し、小見出しおよび注釈は、以下のフォーマットで記述する。
/*--------------------------------------------------------------
大見出し
--------------------------------------------------------------*/
/*
中見出し
--------------------------------------------------------------*/
/* 小見出し、または注釈 */インデント
インデントは半角スペース二つ分を使用する。
セレクタ
セレクタの記述はインデントを使用せず、セレクタの後にスペースを1つ入れ { を記述する。
複数セレクタの指定
セレクタを複数指定する場合、末尾に , で区切り改行する。
最後のセレクタの後にスペースを1つ入れ { を記述する。
ブレースの記述
{ } の後で改行する。
プロパティの記述
プロパティ後の : （コロン）の後にスペースを入れる。
selector1,
selector1 {
property: value;
}単位
値が0の場合、line-heightの場合は単位を省略する。
命名規則
BEMスタイルを採用する。
http://getbem.com/
単語の連結は ‘-‘（ハイフン）を使用する。
Block と Element の連結は ‘__’ （ハンダースコア二つ）を使用する。
Element と Modifire の連結は ‘–‘（ハイフン二つ）を使用する。
z-indexの値
画面固定で常に手前に表示させて利用する場合は 1000 から始める。
細かなレイヤー調整は10単位間隔で使用する。
device width
/* タブレット / ポートレート表示のみ */
@media screen and ( min-width: 768px ) and ( max-width: 1023px ) {
/* スマートフォン表示 */
@media screen and ( max-width: 767px ) {
/* スマートフォンSE表示 */
@media screen and ( max-width: 320px ) {
ブレークポイントの記述場所
ブレークポイントの記述は、クラス単位で記述する。
プロパティ順序
プロパティ順序については「CSSプロパティ記述順について」で紹介している記述順とする。
JavaScriptについて
WordPress JavaScript コーディング規約に準拠する
https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/javascript/
HTML内のクラス名
JavaScript用のクラス名には [ js- ] プレフィックスをつける。
WordPressについて
WordPress PHP コーディング規約に準拠する
https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/php/
コメントフォーマット
PHP内のコメントはWordPress公式テーマに倣い、以下のフォーマットで記述する。
/**
* コメント
* コメント
*/2021年9月7日改定