弊社では、特に取り決めがない限り、以下のような方針で構築していきます。

コーディング使用基本方針

タスクランナー

タスクランナーGulpを利用する。

テンプレートエンジン

HTML作成については、テンプレートエンジンEJSを利用する。

SASS

CSSの作成は、SCSSを利用する。

バージョン管理

データのバージョン管理は、Gitを利用する。

品質管理

以下のツールを利用してチェックを行う。
W3C Markup Validation Service
http://validator.w3.org/

HTMLについて

ファイル名

全て小文字とする。
単語は複数形は使用せず、単数形とする。

DOCTYPE

特に取り決めがない限り、HTML5を使用する。

文字コード

特に取り決めがない限り、utf-8とする。

titleについて

下位ディレクトリのページタイトルから記述し、連結は ‘ | ‘ を使用する。

タグ及び属性記述

小文字を使用する。

属性値の囲み

ダブルクォーテーションを使用する。

インデント

インデントは「タブ」を使用する。

メールアドレスの記述

メールアドレスのマークアップは、エンティティ化したものを記述する。

画像の命名規則

小文字を使用する。
単語の連結は ‘_’ (アンダースコア)を使用する。
ファイル名_識別名_2桁の連番(00)

対象ブラウザー

特に取り決めがない限り以下のブラウザーを対象とする。

Windows

  • Internet Explorere 11(大きな崩れがない限り許容するものとする)
  • Edge(最新版)
  • Chrome(最新版)
  • Firefox(最新版)

Mac

  • Safari(最新版)

iOS

  • iOS (主要なバージョン)

機種依存文字

機種依存文字は、下記のように実体参照として記述する。

文字・記号意味実体参照
_半角スペース 
<小なり不等号&lt;
>大なり不等号&gt;
&アンパサンド&amp;
ダブルクオーテーション&quot;
&yen;
① など丸数字&#9312;
Ⅰ などローマ数字&#8544;
®登録商標&reg;
©著作権&copy;
トレードマーク&trade;

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公式テーマに倣い、以下のフォーマットで記述する。

/**
 * コメント
 * コメント
 */

2020年5月1日改定