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