ここでは商品ページのコーディングを例に取って、CSSでコーディングする場合の「流れ」を説明したいと思います。詳しいCSSの構文解説は行いません。あくまでも流れだけを考えて下さい。

CSSではまず、デザインと文章構造を分離して考えます。
1：どんなページにするか、完成図を考える。(ラフデザインの作成)
2：HTMLファイルに文章を書く。
3：文章の構造を考え、タグをつける。
4：CSSで装飾する。

この順番で、作業を進めます。

1：どんなページにするか、完成図を考える。(ラフデザインの作成)

今回は、コーヒーカップの商品ページを作成します。
画像を左側に、商品説明を右側に置き、あまり装飾はせず、シンプルなページにしたいと思います。
そこでFireworksでこんな完成図を作りました。

2：HTMLファイルに文章を書く。

まず文章を書きます。ここでは、デザインの事は完全に忘れて、伝えたい内容だけを書きます。

3：文章の構造を考え、タグをつける。

次に、文章の構造を考えます。この文章の場合は主に、「タイトル」と「説明文」とに分かれそうですね。
IEなどのブラウザに正しく文章構造を理解させるため、ブラウザ用に「ここはタイトル部分」、「ここは説明文」と教えてあげる必要があります。これをタグ付け(マークアップ)と言います。
ここでもデザインのことは全く考えず、正しくタグ付けする事に集中して下さい。

「タイトル」をタグで考えると、「見出し」が適当です。
見出しを表すタグはh1からh6の6種類。「heading」の頭文字をとってh○で表します。
h1はSEO的に最重要キーワードを埋め込む事が多いので、すでに使用している前提で、今回はh2タグとh3タグを使用します。
説明文部分はタグで考えると「段落」に当たります。段落を表すのはpタグ。
スペックは「表」で表す事が出来ますので、tableタグを使います。

これで文章の構造は出来ました。非常にシンプルな文章なので、どんなブラウザでも解釈出来ます。検索ロボットにも解り易いHTMLファイルになりました。

4：CSSで装飾する。

CSSでのコーディングに入る前に、少し、下準備が必要です。

まずは、HTMLファイル側に文章しかありませんので、写真の画像を追加しておきましょう。

次にh2タグ。
ここも画像を使用しているので、HTML側で、画像に変更しておきます。テキストはaltにし、imgタグに変更しておきましょう。

いよいよCSSです。一つずつ、完成図に近づけていくステップです。
さて、CSSでは文章構造と装飾を切り離して考えると言いました。せっかくですので、ファイルも別々にしておく想定にします。(同じHTML内にも書くことが出来ます。)その方が、運用上も解りやすくなります。ここでは、style.cssという専用ファイルを作り、CSSをまとめてここに書くことにします。

ここからは、いよいよ装飾部です。

まず、見出しであるh3です。この部分は、文字を太文字にして、ハートのアイコン画像をつけます。その上で、ハートアイコンの横幅分、左側に余白を入れます。
style.cssへの記述はこうなります。

この要領で、他のタグも、文字の大きさや、レイアウトなど、ひとつひとつ装飾をしていきます。
今回は、流れの説明ですので、コーディングはここまで。一般的なCSSコーディングの流れは、

完成図作成 ⇒ HTMLファイルに文章を入力 ⇒ 適切なタグ付け ⇒ 画像を追加 ⇒ ＣＳＳコーディング

といった形になります。

いかがだったでしょうか。ホームページビルダーなどのプレビューモードで行う手順とは全く違う道順だったかと思います。
まず、レイアウトはどうしよう・・とコーディングしながら検討するというよりは、初めに完成図をしっかり決めてからコーディングに入る所で、「二度手間！」と思われるかもしれません。
勿論、CSSでコーディングしながらレイアウトを考えることも出来ますが、CSSに慣れるまでは混乱する元ですので、止めておいた方が無難です。

しかし、ひとたびコーディングの段階に入ってしまえばそのメリットが見えてきます！
上のh3タグも、やっぱりハート画像の名前はico_heartにしよう！と思えば、CSS一行の変更で済みます。所が、今までのやり方通り、HTMLファイルに直接ファイル名を書き込んでいた場合は、変更の度に全てのh3を探し出し、名前の変更をしなければいけません。

やっぱり画像の部分は文章の右側にしようといったレイアウト変更も、CSSではたった一行を変えるだけです。
テーブルでのコーディングでも、trの場所を変更するだけでは？と思いましたか？しかし、そのテーブルが100個あったら、どうしますか？
100ページで同じテーブルを使っていたら？また左に戻したくなったらうんざりしませんか？

一発置換で大丈夫！・・と言われそうですが、操作のステップ数から見ても、変更するファイルの数から見ても、数が圧倒的に少ないのはCSSです。置換が終わるのを待つ必要もありません。

大体の流れをわかって頂けた所で、次回から実際にCSSコーディングをしていきたいと思います。