コーディングのサンプル
コーディングのデータは以下のページを参考にしてください。
/major01/course01/
メインビジュアルなどが異なるページについては、都度新しいレイアウトパーツを作成して構いません。
.e.g:
/includes/l-main-visual.php
/includes/l-main-visual-course.php
/includes/l-main-visual-simple.php
scssのコンパイラについて
scssのコンパイルには同梱のタスクランナーを使用してください。
タスクランナー立ち上げ手順
他のページで使い回すパーツはコンポーネント化する
他のページで使い回すパーツはコンポーネントを作成してください。
コンポーネントのスタイルは /assets/scss/_component.scss に記述してください。
コンポーネントのクラス名には c- の接頭辞をつけてください。
コンポーネントはコンポーネントリストに追加してください。
部分的なスタイルを複数のページで使いたいときはユーティリティ化する
この項目は必須ではありません。
すでに定義済みのユーティリティを必要に応じて使いながら、必要に応じて追加してください。
部分的なスタイルを複数のページで使いたいときはユーティリティを作成してください。
コンポーネントのスタイルは /assets/scss/_utility.scss に記述してください。
コンポーネントのクラス名には u- の接頭辞をつけてください。
共通化しないものはページ専用のCSSにする
共通化の必要がないスタイルは、ページ専用のスタイルシートに記述してください。
ページ専用のスタイルシートは /assets/scss/p-{ページ名}.scss として作成してください。
JSもCSSと同様の方針で分ける
JavaScriptもCSSと同じように、共通化するものとそうでないものに分けます。
共通化するものは /assets/js/common.js に、
共通化しないものは /assets/js/p-{ページ名}.js に記述してください。
:CSSの命名規則
BEM like なスタイルを採用しています。詳細は以下を参照してください。
・コンポーネントや何かの部品の一まとまりのパーツを Block とする。
・Block を構成する要素を Element とする。
・Block や Element の少し異なるものを Modifier とする。
・Block と Element はアンダースコア2つで繋ぐ。
・Modifier は別のクラスとして定義し、接頭辞にハイフン2つをつける。
・Modifier 単体にスタイルを書いてはならず、必ず Block か Element と組み合わせて指定する。
・例
GOOD
<ul class="c-list-1">
<li class="c-list-1__item">text</li>
<li class="c-list-1__item">text</li>
<li class="c-list-1__item --emphasis">text</li>
</ul>
.c-list-1 {
margin: 20px auto 0;
}
.c-list-1__item {
font-size: 16px;
&.--emphasis {
color: red;
font-weight: bold;
}
}
BAD
<ul class="c-list-1">
<li class="item">text</li>
<li class="c-list-1__item__emphasis">text</li>
<li class="c-list-1__item c-list-1__item--emphasis">text</li>
</ul>
.c-list-1 {
margin: 20px auto 0 !important;
.item {
font-size: 16px;
}
&--emphasis {
color: red;
font-weight: bold;
}
}
・使用して良い文字は小文字の英数字とハイフンとアンダースコア
・単語の区切りはハイフンを使う
・!importantを使わない
・IDセレクタを使わない
・可能な限り詳細度を低く保つ
チェックリストについて
コーディングの完了時に弊社でチェックを行います。
チェックリスト : https://docs.google.com/spreadsheets/d/1iT5IUG5sYK_wSZgfL6xQ1idOoZlsmvHq/edit?gid=1577727873#gid=1577727873
なおI列が「対象外」のものはチェックの対象としません。（フィルタをかけてあります）
各種資料
Bitbucket:
https://bitbucket.org/geocodecoltd/7938_yamadagakuen/src/main/
Sitemap:
https://docs.google.com/spreadsheets/d/1iT5IUG5sYK_wSZgfL6xQ1idOoZlsmvHq/edit?gid=1111198580#gid=1111198580
Checklist:
https://docs.google.com/spreadsheets/d/1iT5IUG5sYK_wSZgfL6xQ1idOoZlsmvHq/edit?gid=1577727873#gid=1577727873
ワイヤー・企画書
https://docs.google.com/presentation/d/1-josivdRaOAGGWcVgly2ykqYLwSMVzdX/edit#slide=id.p1