うか流HTML・CSSコーディング術

和田さんのレポートを見ますと、

• ［1日更新］トップページのHTML作成
• ［1日更新］トップページのスタイルシート作成

とあるように、まずはダーっとHTMLをコーディング、それが終わったらあらかじめ決めておいたセレクタに対応するCSSを設定していくという流れなのですが、私は「HTMLとCSSの平行作業」でコーディングしてます。

HTMLが終わってからCSSをコーディングした方が効率的ではあるんですが、CSSでレイアウトを組むときって意外とすんなりいかないんですよね。で、こーなっちゃった＾＾；ときにどこが悪くて崩れてるのかを上から1つずつチェックしてつぶしていかなきゃいけないわけで、逆に手間がかかるんです。

そこで私は、上から順にHTMLとCSSを同時にコーディングして、崩れが無いことを確認しながら作業を進めてます。

ヘッダー部分はヘッダー部分で崩れのないようにチェックしながら完成させる。2段組部分は2段組部分で崩れのないようにチェックしながら完成させる.....といった感じで作業を進めていくと、もし崩れが出てしまった場合でも、その原因は今作業している部分（ヘッダー部分の作業をしていればヘッダー部分）にあるわけで、余計なところをチェックしなくてすみます。

CSSによるレイアウトは、理論上CSSがしっかり組めてても、ブラウザによる認識の違いもあったりしてなかなかイメージどおりにいかないのが難しいところ。全部を一気に書いてしまうと、後で崩れが見つかったときに苦労して打ち込んだソースのどの部分がイケナイのか探さなければならず、精神的にもガックリきちゃうんですよね＾＾；

ということで、CSSでレイアウトを組む際は、部分部分を完成させながらHTMLとCSSを平行してコーディングしていくのがよろしいかと思います。

【私・うかのコーディング作業の進め方】

• 中身は後回しにして、しっかり2段組になるようアウトラインを先に作る。
• アウトラインが完成したら、ヘッダー部分を完成させる。
• ヘッダー部分が終わったら、メインスペースを完成させる。
• メインスペースが終わったら、サイドバーを完成させる。
• この時点で段組に崩れがないか再確認。
• 問題なければフッターを完成させる。
• 背景が下までちゃんと伸びているか、フッターが変なところに表示されていないか確認。

【CSSレイアウトの主なチェックポイント】

• margin、paddingは「問題なく」設定されているか。
• 指定した幅より大きい画像を掲載していないか。
• floatをしっかりclearしているか。

（この場合の「問題なく」とは、「CSSの教科書どおりに」ではなく「IE、Firefoxのどちらで見ても同じ状態に表示されるように」の意です。）