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

ちょっと今会社でコーディングについていろいろやっているので、その中で思ったコーデ...

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

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

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

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

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

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

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

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


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

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

この記事の周辺情報

著者

稲本[せぶん]浩介
福岡の企業に在籍し、Webを中心に活動中。Webディレクター、IA(インフォメーション アーキテクト)、マークアップエンジニア、CSSコーダーetc。
Twitterボタン

amazonさんがこのサイトを見て、書籍を紹介してくれています。