SIDE_FLIP blog » レイアウト http://flip365.net PC-Tipsなど Sun, 29 Aug 2010 08:17:32 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 3カラムリキッドレイアウトのテンプレート http://flip365.net/2009/09/12/threeliquidlayout/ http://flip365.net/2009/09/12/threeliquidlayout/#comments Sat, 12 Sep 2009 08:46:04 +0000 FLIP http://blog.flip365.net/2009/09/12/threeliquidlayout/ [...]]]> 私がサイト構築によく使う、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％で設定していたのですが、たしか特定環境下でカラム落ち(……だったかな？)とかの不具合があったためこのように変更しました。

このテンプレートを使用して運営中のサイトです。

SIDE_FLIP あかずの書斎

 

 layout_view01 以下、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;
}

]]> http://flip365.net/2009/09/12/threeliquidlayout/feed/ 1