はじめに

01月13日（土）01:05

category: CSSビギナー向け

このカテゴリでは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ですので、それ以前のバージョンだと正常に読み込めないと思われます。）

個別データも一応置いておきます。

あと、アップロードするテスト環境っぽい場所があると実際の表示を確認出来るので尚よいです。