5カラム(5-column)のCSSレイアウトを作ってみた

5_column_thumbnail.jpg

 いまだに、VicunaとMT4の使い勝手に戸惑っているので、習得するためにデザインを一から作り直してみようと決意してみた。理想形としてはこーいうサイトを考えている。

 ただ土台となるCSSレイアウトは、色んなテンプレートが公開されているけど、僕の理想にはちょっと足りない。僕が欲しいのは、左図のような5カラムのレイアウトである。

 無いなら作ってしまおう、ということで作ってみた。

DEMO

そのCSSとhtmlはこちらからダウンロードください。

Download

 ちなみに、「side-top」と「side-bottom」はいくらでも置くことができます。<div id=”side-top”>、あるいは<div id=”side-bottom”>をそれぞれコピーして、既存のside-topやside-bottomの下に追加してください。

 逆に、「side-top」と「side-bottom」を使わないって人は、htmlからその箇所を削除してください。

 WindowsのIE6、IE7、Firefox2で確認はしましたが、何分、CSSに関しては素人もいいところなので、おかしい箇所があってもおかしくありません。気が付いたことがあればコメントでお教えください。

Valid HTML 4.01 Strict

 

  1. コメントはまだありません。

  1. トラックバックはまだありません。