devmemo

コーディングを最速で行うための備忘録

コーディング規約

   

ディレクトリ構造

・index.html TOP
・img TOPで使う画像
・CSS   TOPで使うCSS

・under  各下層ページ (下層ページひとつに対して、ひとつのディレクトリを用意)
 ├・js 下層ページのみで使うJavaScriptファイルを格納(ある場合のみ)
 │ └・under.js 必要に応じたJSファイル。
 │
 ├・css この下層ページのみで使うcssファイルを格納
 │ └・under.css 下層ページ適用のCSS(必要であれば)
 │
 └・img サイト内共通で使う画像を格納

・shared サイト内共通ファイルを格納
 ├・js サイト内で使う全JavaScriptファイルを格納
 │ ├・common.js 全ページ共通で読ませるJS。
 │ └・◯◯.js 必要に応じたJSファイル。
 │
 ├・css cssファイルを格納
 │ ├・general.css クラス名で簡易的にCSSを読ませるもの(テンプレート参照)
 │ └・global.css  全ページ共通のCSS
 │
 └・img サイト内共通で使う画像を格納

命名規則

・省略できる単語は省略し、わかりやすい名前をつける。
 button → btn
 navigation → nav
 image → img

 【命名例】
 お問い合わせ送信のボタン画像
 submmit_btn.png

 【画像のファイル種別】
 jpg → 風景写真・人物写真など、色数が多いものに使う
 png → 基本的に「透過させる必要がある画像」に使う

・ナンバリングする際は、_ (アンダースコア) をつける
 【命名例】
  side_img_01.png

HTMLの原則

・文字コードはUTF-8。(指定がある場合を除く)

・適宜コメントアウトを用意する

・インデントは深くならない様に注意する

・id・class名の記入例
id → Main (初めの文字を大文字にする)
class → content_box (2語以上になる場合は、スネークケースを使用する)

・floatを使った要素の親要素には必ずclearfixをつける。
 
・style属性は使わない。

・meta情報、OGP情報については別途確認するまで空にする

・全角英数、全角スペースは原則的に禁止。

HTML・CSSのマークアップについて

基本的にはテンプレートファイルのマークアップに合わせ、記述する。

対応・確認ブラウザ

・ Windows・Mac / Google Chrome最新版
・ Windows・Mac /Firefox最新版
・ Windows / Internet Explorer9以上
・ Mac/Safari最新版
・ iPhone5
・ iPhone6
・ iPhone6plus
・ Android携帯(OS4.2以上)

 - 未分類