このカテゴリではCSSビギナーの方向けに、ボクなりな説明でCSSで組むサイトを分かりやすいように書いていきたいと思ってます。
結構実践型でやろーと思ってますんで、ちゃんと覚えようって方のみお願いします。
対象者
htmlをある程度理解していて、チョットだけでもいいのでタグ打ちが出来るよ。って人や今までテーブルレイアウトで組んできたけどいい加減CSSを覚えなければ...って人、CSS始めたばっかりって人を主な対象として書いております。
非対象者
全くホームページとか作った事ありません。って人やソースを一度も見たことがない人は、まずは基本的なhtmlに関して扱っているサイトさまや書籍などでお勉強してから読むようにしてください。
このカテゴリでの最終目標
CSSって美味しいの？っていう人が、取り合えず基本的な2段組レイアウト（左記のサンプル）が組めるようになる。
んでは、追記で取り合えず必要なモノとかの説明をしたいと思います。
用意するもの
テキストエディタもしくはオーサリングソフト
テキストエディタに関しては秀丸がオススメです。
ボクの作った秀丸用の強調定義ファイルとかもありますので、あわせて使用するとチョットだけ便利かも。
秀丸はシェアウェアですが、取りあえずは期限切れまでお金払わなくても使えます。
コレを機に使ってみて、気に入ったら購入しましょ。（秀丸の営業じゃないよ？）
他には、TeraPadやサクラエディタ辺りが良さそうです。（使ったこと無いのでよう分かりませんが...）
オーサリングソフトに関しては、Dreamweaver 8以外ちょっと分かりませんが、取り合えずビルダーはあまりCSSを得てとしていない（と思う）ので、使わない方向でお願いします。
練習用フォルダ
ボクの説明に沿って、同じように作っていって欲しいので以下の練習用フォルダをDLして使って頂けると良さ毛です。（1か2お好きな方をDLしてください）
解凍すると、practice-01フォルダができます。
中身は、index.html（タグや内容など記述済み）、CSSフォルダにstyle.css、imgフォルダにサンプルで使用したカット済みの画像、デザイン元データ（psd）です。
ウチはCSSをメインにしているのでid名やclass名以外は全てマークアップしております。
id名やclass名に関しては自分で付けていく感じになります。
デザイン元データは、このカテゴリでは使う事はないですが、たまにMixiとか何かしらで何から始めたらいいか分からないと言った事も聞くので、psdでデータを渡された状態からコーディングしてみるってのをやってみるのもいいと思い入れてあります。（PhotoShopのバージョンはCSですので、それ以前のバージョンだと正常に読み込めないと思われます。）
個別データも一応置いておきます。
あと、アップロードするテスト環境っぽい場所があると実際の表示を確認出来るので尚よいです。
やる気
コレが一番大事だと思う。CSS覚えてやるんだっ！っつー心意気を持って取り組みましょう。
留意事項
一応堅苦しいかも知れませんが以下の事を守り、理解した上でお願いします。
- サンプルはテンプレートとしての仕様のみ許可します。配布はしないでください。
- html、CSSともにボクなりの方法ですので、絶対的に正しいとは限りません。一例として覚えて下さい。
- 今回のサンプルは、IE6、Firefox2、Opera9で動作確認しております。他ブラウザでの崩れ等の責任は一切負いません。
- 分かり難い点、良かった点とかそういう類いのご連絡は歓迎いたします。
次のエントリーでは、CSSに関する基本的なことをやります。
（最低限書ける人は読む必要なさそうな感じですが...）