爆速でHTMLコーディングするためのtips

More than 5 years have passed since last update.

心構え

 ・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コーディングくらい超速で終わらせよう。