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

  • 287
    Like
  • 2
    Comment
More than 1 year has 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コーディングくらい超速で終わらせよう。