制作環境

基本

SASS(SCSS)、ejsを使用して制作を行う事を推奨する。

フォントファミリー

フォントファミリーは以下の順序で記述する

1) "游ゴシック","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ
",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif !default;
2) "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HG明朝E","ＭＳ Ｐ
明朝","MS PMincho",serif !default;

WEBフォント

原則としてGoogle Fontを使用する。 Google Fontに無い場合、画像対応または別フォントへ変更対応するか検討。

CSS命名の統一（class)

class名は原則、FLOCSS + BEM を採用。

【接頭辞】

.l-	layout（大枠のレイアウト）レイアウトを構成する要素
.c-	component（最小単位のパーツ） 再利用できるパターンとして、小さな単位のモジュールを定義
.p-	project（ページごとのモジュール） プロジェクト固有のパターン。いくつかのComponentと、それに該当しない 要素によって構成されるものを定義
.page-	page（ページごとのスタイル）
.u-	utility（調整用） 汎用クラスなどを定義

【Block Element Modifier】

.block	Block：大きな括り • ブロックは一つ一つが独立したパーツとして設計する。 • ブロックの中にブロックを作成してもよい • ブロック名が重複することはない
.block__element	Element：ブロックの中の要素 • 必ずブロックの中に存在する • エレメント名の重複はOK • BlockとElementはアンダーバー2つで管理する 例) 接頭辞 – Block __ Element 例) 接頭辞 – Block __ Element __ Element
.-modifier	Modifier：ブロックやエレメントの変化 • パーツの構成は同じだが、見た目や動作が異なるものに設定する。 • Modifierはハイフン2つで管理する。 例) —Modifier