Skip to content
This repository has been archived by the owner on Jul 10, 2023. It is now read-only.

基本事項

Jump to bottom
Takazudo edited this page Apr 25, 2011 · 2 revisions

共通

  • ハードタブを使用。スペースを使用しない。
  • 特別な理由が無い限り、文字コードはUTF-8。
    これ以外だとAjaxで文字化けする。
  • 基本的に、ディレクトリ・ファイル名には半角英数字（小文字）、アンダースコア、ハイフンを使用する。
    ただし、配布されているライブラリを逐一これに合わせる必要はない。

連番のルール

いくつか連続する画像、CSS内で使用するクラス名などの命名規則は次のとおりにする。

  • １つ目の物には連番をつけない
  • ２つ目以降単純に2から振っていく
  • 桁数の制限が起らないよう、01などのように頭に0を追加しない

ただしこのルールは絶対的なものでない。1つ目の物に1を振らないのは、あらゆるファイルやモジュールは、未来永劫ユニークであるか否かをその時点で判別することが不可能なためである。

例

bg.gifという名前のgifファイルを例にすると以下のようになる。

bg.gif, bg2.gif, bg3.gif, ....

始めはbg.gifを作成したが、後からbg2.gifを追加したいという場合がある。このような場合、bg1.gifとリネームするのは無駄なのでこのようなルールとする。これは、モジュールの名称においても同様。(モジュール組み)

サイト共通ファイルの構成

サイト全体で使う共通ファイルは/commonフォルダに納める。
ページやカテゴリ固有のCSS、JavaScript、画像ファイルは、適宜ディレクトリを作り格納する。

/common/css/ : サイト共通CSS
/common/js/ : サイト共通JS
/common/img/ : 画像ディレクトリ

htmlのファイル名

これは状況により必ず守るべきものではないが、基本的に全てのhtmlのファイル名はindex.html にする。
そして、下位階層のページは、その中にディレクトリを作り、階層構造を表現する。

例

×
/product/index.html
/product/ABC-1234.html
/product/ABC-1235.html
/product/ABC-1236.html
/product/ABC-1237.html

○
/product/index.html
/product/ABC-1234/index.html
/product/ABC-1235/index.html
/product/ABC-1236/index.html
/product/ABC-1237/index.html

この方がカテゴリ・ページ固有の画像・CSS・JSファイルの管理に便利である。

公開しないディレクトリ

JavaScriptのテストケースを収めたフォルダ、ダミーのjsonデータといった最終的にサイトではサイト訪問ユーザーによって使われないファイルは_から始まる名前のフォルダに格納する。以下がその例。

/_test : JavaScriptによるテストケース、またそれを実行するためのファイル
/_data : ダミーのJSONデータ、XMLデータ
/_mock : モックで作成したJavaScriptの動作サンプル
/_template : HTMLテンプレートを格納するディレクトリ

HTML

  • 文書形式はHTML5
  • DOCTYPEは <!DOCTYPE html>
  • 拡張子は .html
  • 要素名はすべて小文字で書く

使用する要素について

HTML5を利用する。ただし、広い環境を対象とする場合、HTML5は策定中であり今後仕様が変わる可能性もあるため、無理のない範囲で新しい要素を組み込む。基本はHTML4.1に準拠した形であると考えてよい。具体的には、以下のような要素の積極的な利用をこのガイドラインでは特別推さない。

  • section要素
  • nav要素
  • article要素
  • aside要素
  • hgroup要素
  • header要素
  • footer要素

video要素、canvas要素といった表現に関わる要素、input要素の追加された属性など、その要素で無ければ実現できないものについては、対応環境を考慮し、採用を検討する。

img要素

必ずwidth, heightを指定する。
ただしCMSから書き出されるような、幅・高さが決定できないような状況はこれに該当しない。

altの付け方は以下を参考にする
http://www.html5.jp/tag/elements/img.html#alt

id, class属性

idは、JavaScriptもしくはページ内アンカーのためのものである。
スタイルを当てるためには使用しない。
モジュール組み を参照。

viewport指定

meta要素でviewportを以下の様に設定する。

デスクトップ

<meta name="viewport" content="width=1024>

画面幅に合わせた数値をwidthとして指定する。

モバイル / 320 and up

<meta name="viewport" content="width=device-width, initial-scale=1.0">

この指定で、殆どのスマートフォンは、portrait時320px、landscape時480px～になる。
iOSで回転時にズーム率が変わってしまうバグがあるが、これはJSで回避する。MBP.scaleFix();
また、メディアクエリーでデスクトップ・モバイルを同一ページで表現する場合にもこの指定を行う。

CSS

/common/css/style.css にサイト共通のスタイルを書く。
モジュール組み を参照。
特別ファイルを分ける必要はないが、例えば特定のカテゴリに属するページのみに適用させたいスタイル群などがあれば、ファイルを分割する。

コメントのルールは以下。

/**
 * 大きいコメントブロック
 */

/* 小さいコメントブロック2行～
   小さいコメントブロック2行～ */

/* 小さいコメントブロック */

JavaScript

サイト共通JavaScriptファイル、ディレクトリの構成

/common/js/ : サイト共通JS格納ディレクトリ
/common/js/libs/ : 外部JSライブラリ(jQuery, Modernizr, jQuery validation...)
/common/js/mylibs/ : 独自JSライブラリ

/common/js/common.js : 全ページ共通のスクリプト

基本ライブラリ

画像

形式

  • 写真などの色数の多いもの : JPEG (.jpg)
  • アルファチャンネルを持つもの : PNG24 (.png)
  • アニメーションGIF : gif (.gif)
  • それ以外 : PNG8 (.png)

共通ディレクトリの構成

/common/img/_dummy/ : ダミー画像
/common/img/mod-* : モジュールのコンポーネントとなる画像(モジュール組みを参照)

モジュール単位でディレクトリを作成し、CSSやhtmlから参照する画像を格納する。その他、モジュールをまたいで使用される画像は、以下の例のように適宜ディレクトリを作成し、格納する。

/common/img/arrows/ : 矢印
/common/img/buttons/ : ボタン
/common/img/icons/ : アイコン
/common/img/misc/ : その他諸々画像

Clone this wiki locally