Development Document

基本仕様 対応ブラウザ ディレクトリ構造・ファイルの命名規則 CSSに関して ブレイクポイント JavaScriptに関して Webフォントに関して 開発環境について

基本仕様

対応ブラウザ

ディレクトリ構造・ファイルの命名規則

ディレクトリについて

xxxxx.co.jp
│
├─ xxx … 各HTML用ディレクトリ。
│
└─ assets … 画像やCSSなどのリソースをまとめます
   ├─ css
   │  ├─ styles.css … サイトで共通で使われるCSSファイル
   │  └─ xxxxx.css … 特定のページやカテゴリだけで使用されるcss
   │
   ├─ js
   │  ├─ lib … jQueryなどのライブラリ・プラグインはここに入れる
   │  ├─ common.js … サイトで共通で使われるJSファイル
   │  └─ xxxxx.js … 特定のページやカテゴリだけで使用されるjs(多い場合はフォルダにする)
   │
   ├─ images
   │  ├─ common … サイトで共通で使われる画像ファイルを格納
   │  └─ xxxxx … 特定のページやカテゴリだけで使用される画像を格納
   │
   └─ fonts … アイコンフォント

サイトで利用されるリソースはルート直下の 「assets」 ディレクトリ内に格納します。
ただし、CMSやツールで生成・アップロードされるリソースに関しては別とします。

記述規則

ファイル名、ディレクトリ名には半角英数字を使用。
全角文字、大文字の使用は原則禁止。

CSSに関して

命名規則

設計について

モジュール(BEMでいうBlock)にはmarginやpositionなどの位置を指定するプロパティは出来るだけ記述しない。 モジュールは、どの場所にもおけることを前提としているので、想定外のところで干渉して問題が起こらないように、モジュールとレイアウト用のクラスを組み合わせて、ページを組んでいくようにする。

ただ、やりすぎるとHTMLにスタイル書いてるのと変わらないので、マルチクラスで4個も5個もクラス指定が入るようなら、別のモジュールに出来ないか、デザイン上の設計に問題がないかなどを考える。

レイアウトやモジュールの参考

ブレイクポイント

ブレイクポイント

基本的に以下の値で設定していますが、必要な場合は他の値も使用する。

用意しているSass変数

メディアクエリ記述サンプル

メディアクエリの記述順序はモバイルファーストとする。

min-widthで指定をする場合は、印刷対策としてprintも設定。印刷するのは、PCで見てる場合などの大きいサイズが想定されるため。
逆にmax-widthで指定をする場合は、printを設定しない。

通常の書き方

// xsサイズ ( スマートフォン縦 ) 用の記述
.sample { ... }

@media print, screen and (min-width: 480px) {
  // smサイズ ( スマートフォン横・小さいタブレットの縦 ) 用の記述
  .sample { ... }
}

@media print, screen and (min-width: 768px) {
  // mdサイズ （ タブレット・ノートPCなど ） 用の記述
  .sample { ... }
}

@media print, screen and (min-width: 1024px) {
  // lgサイズ（ ワイドスクリーンのPC ）用の記述
  .sample { ... }
}

@media screen and (max-width: 479px) {
  // mdサイズより小さいサイズ用の記述
  .sample { ... }
}

SassのMixinと変数を使用

// xsサイズ ( スマートフォン縦 ) 用の記述
.sample { ... }

@include mq(smMin) {
  // smサイズ ( スマートフォン横・小さいタブレットの縦 ) 用の記述
  .sample { ... }
}

@include mq(mdMin) {
  // mdサイズ （ タブレット・ノートPCなど ） 用の記述
  .sample { ... }
}

@include mq(lgMin) {
  // lgサイズ（ ワイドスクリーンのPC ）用の記述
  .sample { ... }
}

@include mq(smMax) {
  // mdサイズより小さいサイズ用の記述
  .sample { ... }
}

JavaScriptに関して

使用ライブラリ

使用プラグイン

記述規則

Webフォントに関して

アイコンフォントを作成して使用。

アイコンフォント一覧

開発環境について

ビルドツールはGulpを使用。

詳細はリポジトリ直下のREADMEを参照。