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 レイアウト部位