CSSレイアウト
複雑な応用型レイアウト
複雑な・・・とか書きましたが、考え方がわかれば、難しいレイアウトも単純なことの積み重ねで作成することが出来ます。
例えば・・・誰でも知っているYahoo!のトップページをCSSで書いてみましょうか。ちょっと縮小してありますが、Yahoo!のトップページはこんな感じになっています。
ちょっと昔のYahoo! Japanのトップページについての解説です。（一部を除いて、現在のYahoo!もほとんどほとんど変わっていません。）
まずは大まかな構造をつかんでおく必要があります。
そんなことは見た瞬間に気がついた、と感じるかもしれませんが、Yahoo!のトップページのレイアウトは２カラム＋ヘッダー＋フッターの発展形です。２カラム＋ヘッダー＋フッターについては、応用レイアウトでやりましたよね。
変わった事といえば、左右のカラム内にも複雑（？）なレイアウトが構成されていること＋αぐらいです。
- base
- header
- left-column
- search
- services
- business, premium
- categories
- right-column
- tool
- tips
- city, world, more
- footer
