心構え
・HTMLは最小限にする
・JSも最小限。不要なら
・デザインとか全部決まってから手を付ける。
開発環境
・リアルタイム入力補完ができるエディタ
（プログラマならEcripseとかEmeditorとか、MacならCodaか）
・動作確認の InternetExplorer
＞Macで動いてWindowsでレイアウト崩れた！Windowsが悪い！ ←なに言ってんだ・・・？？
・おまけでDreamwaver。
下準備
・予め画像を切り出しておく。
HTMLコーディング開始
・画像切り出しは全部後回しにして、 ZencodingでHTMLを「一気に」組む。
HTML”だけ”組む。
IDやclass名もここでつけちゃう。
ブラウザで開くとめちゃくちゃだけど気にしない。
文字も入力しない。
画像やCSSパスを設定する。
・作ったHTMLをDreamwaverにコピペして、
Dreamwaver上から「画像パスと画像サイズ」を突っ込んでいく。
Dreamwaverはここだけ。
CSSセレクタを自動生成する。
・OneClickCSS（ http://css.miugle.info/ ）を利用して、CSSセレクタを自動生成する。
CSSを直接打たず、LESSやSASSを使う。
・CSSを直接打たないで、LessやSassを使ってCSSコーディングを行う。
http://lesscss.org/
http://sass-lang.com/
開発環境が準備できない人はLessの方が便利
・Class、ID名ベースのCSSは使わない。
子孫セレクタ、子セレクタベースのコーディングを心がける。
LessやSassは子孫セレクタベース。
文字入力、ALT、metaタグを入れていく。
・レイアウトが7割りできた段階で、文字やALTを入れていく。
いいねボタンやJSを入れて、最後の調整をする。
・JSはcoffee scriptを利用する。
賛否両論あるけど早い
完成！
○組む
○レイアウトする
○入れる
の3アクションで行けるからめちゃくちゃ早い。
HTMLコーディングくらい超速で終わらせよう。