基本事項 - growgroup/grow-template GitHub Wiki

4. 基本事項

4.1 基本スタイル

4.1.1 プロトコルについて

imageやmedia、scriptなどを指定するときに、http:,https:は省略すること。

<!-- 非推奨 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- 推奨 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 非推奨 */
.example {
  background: url(http://www.google.com/images/example);
}

/* 推奨 */
.example {
  background: url(//www.google.com/images/example);
}

4.2 フォーマットルール

基本的には GrowGroupで策定している editorconfig の設定ファイルに準じる。

また、エディターも上記 editorconfig を利用できるエディタのみ利用すること。

4.2.1 インデント

インデントはスペース2つとする。タブでのインデントは行わないこと。

<ul>
  <li>Fantastic
  <li>Great
</ul>
.example {
  color: blue;
}

4.2.2 大文字を使用しない

すべてのコードは小文字 にて記述すること。

<!-- 非推奨 -->
<A HREF="/">Home</A>

<!-- 推奨 -->
<img src="google.png" alt="Google">
/* 非推奨 */
color: #E5E5E5;

/* 推奨 */
color: #e5e5e5;

4.2.3 行末の余分な空白を無くす

行末のスペースは削除すること。

why? : 余分なスペースによりHTMにて解釈される恐れがあるため。

<!-- 非推奨 -->
<p>What?_

<!-- 推奨 -->
<p>Yes please.

4.3 一般的なMetaルール

4.3.1 エンコード

エンコードはUTF-8(no BOM)を使用する。

4.3.2 コメント

必要に応じてコメントを記述する。 ただし、特にコメントをしなければならないケース定義しない。

4.3.3 TODOコメント

実装・調整の必要があるなど、タスクをコード上に記載する際は@todo の形式にてコメントを行うこと。

<!-- @todo リファクタリング -->
<h1>テスト見出し</h1 >

PHPStorm の todo 機能にて閲覧が可能。

4.3.4 LSEP文字コードについての対応

Windows Chrome にて、e280a8 という文字コードが｢L SEP｣として表示されてしまう。

通常のエディタ上では確認できないため、PHPStorm にてコーディングを行う場合は以下のプラグインをインストールすること。

https://plugins.jetbrains.com/plugin/7448-zero-width-characters-locator

参考記事: https://usortblog.com/lsep_problem/

⚠️ **GitHub.com Fallback** ⚠️