２．命名規則

２−１　基本

ユーザにわかりやすい名前をつける 原則英単語を使用する（× 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

２−２　ディレクトリ

ディレクトリ名は略さない コンテンツを包括するディレクトリの場合は、最も適した英単語を用いる 同一のディレクトリ名が複数存在してはいけない ディレクトリ名に大文字は使用しない

２−３　HTML/CSSファイル

ファイル名に大文字は使用しない コンテンツのトップページである場合は、「index.html」とする 上位階層の単語は重複になるため使用しない 原則として、同一のファイル名が複数存在してはいけない（「index.html」を除く）

２−４　レイアウトの部位

id/classにアンダーバーは使用しない 複数の単語が連なる場合、2つ目以降の単語の頭文字を大文字にする（例userCenterdDesign） 上位階層の単語は重複になるため使用しない

２−５　画像ファイル

画像ファイルに大文字を使用しない 画像ファイル名は使われている箇所がわかるように、画像用途、レイアウトの部位名（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」

  • １．制作ガイドライン
  • １−１ 基本
  • １−１−１ 目的
  • １−１−２ 閲覧環境
  • １−１−３ HTML／CSS基本
  • １−１−４ 制作環境
  • １−２ Webサイトの構成
  • １−２−１ ディレクトリ構造
  • １−２−２ ディレクトリ役割
  • １−２−３ ディレクトリ/ファイル名の例
  • １−２−４ ユーザビリティ
  • １−２−５ 注意事項
  • １−２−６ JavaScriptの利用
  • ２．命名規則
  • ２−１ 基本
  • ２−１−１ 共通
  • ２−１−２ 略語表記
  • ２−２ ファイル名／ディレクトリ名
  • ２−２−１ ディレクトリ
  • ２−２−２ HTML/CSSファイル
  • ２−２−３ 画像ファイル
  • ２−３ id／class名
  • ２−３−１ レイアウト部位