(X)HTML+CSSコーディングのスピードアップ～７つの手順

ちょっと今会社でコーディングについていろいろやっているので、その中で思ったコーディングのスピードを上げる方法を個人的見解のもと書いてみる。
参考になれば・・・ということで。

１．まず紙の上で全体像をみて、ワイヤーフレームをつくる
個人的にだが、モニター上で色々を判断するのが苦手。デザイナーが上げてきたデザインデータ（PSDなど）を一度プリントアウトしてワイヤーフレームを作る。直接線が引けるので、個人的にいいと思ってる。

２．ワイヤーフレームは外から攻める。
ワイヤーフレームを作る際に、細かい部分はさておき、大枠から狭めていく手法がいい。
この段階も紙の上

３．とにかくXHMTLのマークアップを正確に行う（自分なりに）
途中でCSSにいくことなく、とにかくXHTMLを完成させる。まずはきれいなXHTML文書を作り出す

４．XHTMLが出来上がったら、枠のCSSコーディングを行っていく。
細かい部分はあとで。divタグのレイアウトをCSSコーディングで・・といってもいいくらいのコーディングを行って、レイアウトを作り上げる。

５．CSSコーディングはとにかくXHMTLの上からせめていく。
枠が出来上がったら、できるところからやるのではなく、XHTML文書の上からどんどんコーディングしていく。ちょくちょく確認をしながらやるのは面倒だが、地道にそれが必要と思われ・・・。

６．確認は、firefoxのみでまず行う。
ひとまずfirefoxで完璧に表示できる形を作り出す。firebugなどのプラグインを使いながら・・・。

７．他のブラウザへの対応を行う。
firebugを使い、どの要素がおかしいかをみて、それぞれのハックをかけていく。


以上こんな感じが早いかな～と思っている。
俺が特に重要かなと思うのが、１，２，３。
個人的見解からいうと、XHTMLがそれなりにできていれば、ブラウザごとのエラーの修正（ハック）も比較的楽な感じがしている。
以前別のブログで、「マークアップエンジニアは大工みたいなもん」的なエントリーをみたことがあるが、結局そうなんだと思う。XHTMLマークアップがきちんとしていると、そのCSSもスムーズにいく。土台がそれなりにきちんとしていると、装飾は意外とすんなり・・・ってことだろう。

ということで、おれは意外とCSSコーディングよりもXHTMLのマークアップのほうを重要視してるのです。
にゃは。