ファイル名命名規則 - growgroup/grow-template GitHub Wiki

7. ファイル名命名規則

7.1 画像

基本的に画像ファイル命名については以下の形式とする。

{接頭詞}-{ページスラッグ名}-{コンポーネント名}-ID.{拡張子}

7.1.1 接頭詞の選定

画像の種類によって、必ず以下の接頭詞を付与する。

  • img- : そのまま imgタグで利用する画像
  • icon- : アイコン
  • bg- : 背景画像

例外のファイル名

  • logo.png : メインのロゴ画像
  • ogp.png : OGP

7.1.2 コンポーネント名

各画像が所属するCSSコンポーネント(構成要素)に依存する。

7.1.3 IDの付与

画像の末尾にはスペースで分割したIDを必ず連番で割り振る。

例 :

<!-- Bad -->
bg-alert-box.png

<!-- Good -->

bg-alert-box-01.png

7.2 ファイル・ディレクトリ名

画像以外のファイル名の命名規則については以下に注意を行う。

7.2.3 HTML

7.2.3.1 ディレクトリ名

HTMLのファイル名は基本的にサイトマップに準じる。

サイトマップに記載がない場合は、以下のルールにて行う。

既存サイトが存在する場合

既存サイトの同一コンテンツに沿った命名とする。また、できるだけアクセスするためのURLが変更されないよう検討する。

既存サイトが存在しない場合

基本的にページ名を英訳したファイル名・ディレクトリ名を命名する。

また、複数形となる概念には注意すること。

例 : お客様の声ページ、かつ、詳細ページが存在しない場合
http://example.com/voice/
例 : お客様の声ページ、かつ、詳細ページが存在する場合
http://example.com/voices/ ← 一覧ページのURL
http://example.com/voices/01/ ← 詳細ページのURL

7.2.3.2 ファイル名

基本的にindex.html以外の命名は行わない。ディレクトリ名にてアクセスできるようにすること。

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