私がサイト構築によく使う、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％で設定していたのですが、たしか特定環境下でカラム落ち(……だったかな？)とかの不具合があったためこのように変更しました。
このテンプレートを使用して運営中のサイトです。
以下、HTMLソース
<body>
<div id="container">
<!– ヘッダー –>
<div id="header">
<div id="inner">
</div><!– header_inner –>
</div><!– header –>
<!– ヘッダーナビゲーション –>
<div id="head_menu">
<div id="inner">
</div><!– headmenu_inner –>
</div><!– head_menu –>
<div id="contents">
<!– メインコンテンツ –>
<div id="main">
<div id="inner">
</div><!– main_inner –>
</div><!– main –>
<!– 左サイドバー –>
<div id="leftbar">
<div id="inner">
</div><!– leftbar_inner –>
</div><!– leftbar –>
</div><!– contents –>
<!– 右サイドバー –>
<div id="rightbar">
<div id="inner">
</div><!– rightbar_inner –>
</div><!– rightbar –>
<!– フッター –>
<div id="footer">
<div id="inner">
</div><!– footer_inner –>
</div><!– footer –>
</div><!– container –>
</body>
以下 CSS
新規で作成する場合は、HTMLに合わせたcharsetの指定をお忘れなく。
例 ： (UTF-8の場合) @charset "utf-8"; をCSSの頭に表記
#container {
width: auto;
margin-right: 25px;
margin-left: 25px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10pt;
letter-spacing: 0.1em;
}
#container #header {
height: 90px;
}
#container #head_menu {
float: left;
clear: both;
width: 100%;
height: 35px;
}
#container #contents {
width: 80%;
float: left;
}
#container #contents #main {
float: right;
width: 75%;
overflow: hidden;
}
#container #contents #leftbar {
width: 24%;
float: left;
overflow: hidden;
}
#container #rightbar {
float: right;
width: 20%;
overflow: hidden;
}
#container #footer {
clear: both;
}
One thought on “3カラムリキッドレイアウトのテンプレート”