2.命名規則
2−1 基本
ユーザにわかりやすい名前をつける 原則英単語を使用する(× koushin → ○ update) 同義の単語はサイト内で統一する(product≒manufacture≒goods≒commodity→goods) 下記の略語対応表にある単語については、略語表記で統一する 基本的に、下記の略語対応表以外の略語を使用しない。
単語の略語対応表 英単語 統一する表記 background bg banner bnr button btn footer f header h Icon ico image img source src text txt
2−2 ディレクトリ
ディレクトリ名は略さない コンテンツを包括するディレクトリの場合は、最も適した英単語を用いる 同一のディレクトリ名が複数存在してはいけない ディレクトリ名に大文字は使用しない
2−3 HTML/CSSファイル
ファイル名に大文字は使用しない コンテンツのトップページである場合は、「index.html」とする 上位階層の単語は重複になるため使用しない 原則として、同一のファイル名が複数存在してはいけない(「index.html」を除く)
2−4 レイアウトの部位
id/classにアンダーバーは使用しない 複数の単語が連なる場合、2つ目以降の単語の頭文字を大文字にする(例userCenterdDesign) 上位階層の単語は重複になるため使用しない
2−5 画像ファイル
画像ファイルに大文字を使用しない 画像ファイル名は使われている箇所がわかるように、画像用途、レイアウトの部位名(id/classなど)、名前、で構成する。 レイアウトの部位名に大文字が使われている場合は、「アンダーバー+小文字」に変換する 命名にあたっては、5.7の略語と以下の表を参考にする。
用途 参考表記 背景画像 bg_ バナー bnr_ ボタン btn_ アイコン ico_ 基本画像 img_ 大見出し bh_ 中見出し mh_ 小見出し sh_ 小見出し以降 ssh_…(sを追加していく) or sh_を使用
例 「bh_service.jpg」 「mh_solution.jpg」 「sh_solution.jpg」 「bg_service_commodity.jpg」 「gnav_about_o.gif」 「ico_pdf.gif」
- 1.制作ガイドライン
- 1−1 基本
- 1−1−1 目的
- 1−1−2 閲覧環境
- 1−1−3 HTML/CSS基本
- 1−1−4 制作環境
- 1−2 Webサイトの構成
- 1−2−1 ディレクトリ構造
- 1−2−2 ディレクトリ役割
- 1−2−3 ディレクトリ/ファイル名の例
- 1−2−4 ユーザビリティ
- 1−2−5 注意事項
- 1−2−6 JavaScriptの利用
- 2.命名規則
- 2−1 基本
- 2−1−1 共通
- 2−1−2 略語表記
- 2−2 ファイル名/ディレクトリ名
- 2−2−1 ディレクトリ
- 2−2−2 HTML/CSSファイル
- 2−2−3 画像ファイル
- 2−3 id/class名
- 2−3−1 レイアウト部位