私がサイト構築によく使う、3カラム・リキッドレイアウトのテンプレートを掲載。
あくまでもレイアウト構成用の最低部分ですので、あとは頑張ってください。
使い方
- 下記のHTMLをbodyタグ内に配置します。
- 下記CSSは基本的に外部スタイルシートとして記述します。
- コンテンツはinner内に記述します。(色々CSSの設定が便利かつわかりやすいので)
- 各innerのCSSは「#container #contents #main .inner 」というかたちで指定します。
- 細かいCSS指定はinner部分に指定する方が、後々分かり易いし、いじりやすいです。innerの外側の各divボックスに対するCSS指定はレイアウト用だと思ってください。
- CSSにはゴミがあるかもしれませんが、問題なく動作していますのでご勘弁を。
Tips
- ヘッダー下の上部ナビゲーション用のスペースが不要なら「head_menu」部分を内側の「inner」と一緒に消してください。
- 左右のサイドバーとメインコンテンツ部分は2：6：2の比率になっています。
- 「contents」内の左サイドバーとメイン部分は、サイズが「contents」の幅に対して24％と75％に設定しています。当初は25％と75％で設定していたのですが、たしか特定環境下でカラム落ち(……だったかな？)とかの不具合があったためこのように変更しました。
このテンプレートを使用して運営中のサイトです。