ステップ0〜はじめに〜
制作実習編LV3ではテーブルタグを一切使わないフルスタイルシートデザインに挑戦！
方法はいろいろありますが、今回は一番とっつきやすい手法でやります。
今回の実習では、レイアウトの組み方だけでなく、スタイルシートの効率的な書き方や、
ページを作っていく手順も合わせてものにしてください。
全６ステップです。頑張りましょう！
レイアウトの手法について
テーブルタグを使わずに複雑なレイアウトを組むには、LV2の後半で紹介したfloatを使う方法と、 position:absolute;を使って組む方法があります。今回はpositionをつかったやり方を紹介します。
position:absolute;は直感的に配置ができるので、初めてフルスタイルシートデザインに挑戦する人におすすめの方法です。 ただし、可変的なレイアウトを組むにはあまり向きません。
なるべくブラウザーによる違いが出ないように作成していきますが、古いブラウザー（IE5.5）では若干崩れてしまいます。 まぁスタイルシートの宿命だと思ってあきらめることも大切です。
今回の完成形
今回の完成形はこんな感じになります
ちなみに今回のレイアウトは図のように組んでいます。
一見複雑に見えますが、「情報のかたまり」を入れ子にしていくイメージで捉えるとそんなに難しくはないはずです。
むしろ注目して欲しいのは、800pxや150pxなど大きさです。
position:absolute;を使って組む方法はボックスを描画する位置を座標で指定するので、
あらかじめ高さや幅を決めておく必要があります。そうしないと重なり合ってしまうとことがあります。
もっとも重なったら数値を書き換えればいいだけなんですけどね。
じゃあ始めましょうか。実際にやってみたい人は素材をダウンロードしてください。
今回の素材 右クリック→対象をファイルに保存でDL