[ CSS ] 3カラムレイアウト固定幅と可変幅のサンプル

このブログのデザインを変えようと思って、何とか手探りで、3カラム固定幅のレイアウトの CSS を書いてみた。

3カラム固定幅のレイアウト

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>CSS Layout</title>
<style type="text/css">
<!--
body {
    padding:0;
    margin:0;
    }
#frame {
    width:960px;
    margin:0 auto 0 auto;
    }
#header {
    background-color: #536DA3;
    height: 20px;
    }
#wrap {
    float:left;
    width:680px;
    }
#c-col {
    float:right;
    width:498px;
    background-color: #FFFFFF;
    }
#l-col {
    float:left;
    width:182px;
    background-color: #EEEEEE;
    }
#r-col {
    float:left;
    width:280px;
    background-color: #EEEEEE;
    }
#footer {
    clear:left;
    background-color: #536DA3;
    }
#c-col-inn { margin: 15px; }
#l-col-inn { margin: 15px; }
#r-col-inn { margin: 15px; }
-->
</style>
</head>
<body>
<div id="frame">
<div id="header">header</div>
<div id="wrap">
  <div id="c-col"><div id="c-col-inn">
    <p>c-col</p>
    <ul>
      <li>OK - Mac Firefox 1.5</li>
      <li>OK - Mac Safari 2.0.3</li>
      <li>OK - Mac Opera 8.01</li>
      <li>OK - Win Firefox 1.5</li>
      <li>OK - Win Internet Explorer 6.0</li>
      <li>OK - Win Netscape 7.2</li>
    </ul>
  </div></div><!-- /c-col -->
  <div id="l-col"><div id="l-col-inn">l-col</div></div>
</div>
<div id="r-col"><div id="r-col-inn">r-col</div></div>
<br style="clear:both;"/>
<div id="footer">footer</div>
</div>
</body>
</html>

実際の動作サンプル

3カラム可変幅のレイアウト

それから、3カラム可変幅のレイアウトもやってみたのだけれど、サイドバーの背景色を一番下まで伸ばすのはどうやるんだろう? 固定幅なら、BODY に背景画像を指定するんだが。

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>CSS Layout</title>
<style type="text/css">
<!--
body {
    padding:0;
    margin:0;
    }
#frame {
    width:100%;
    }
#header {
  color: #CCCCCC;
  background-color: #000000;
  border-bottom: 1px solid #999999;
    }
#wrap {
    float:left;
    width:70%;
    }
#c-col {
    float:right;
    width: 70%;
  color: #CCCCCC;
  font-size: 12px;
  background-color: #444444;
    }
#l-col {
    float:left;
    width:30%;
  background-color: #222222;
    }
#r-col {
    float:left;
    width: 30%;
  background-color: #222222;
    }
#footer {
    clear:left;
  color: #CCCCCC;
  background-color: #000000;
  border-top: 1px solid #999999;
    }
#c-col-inn { margin: 15px; }
#l-col-inn { margin: 15px; }
#r-col-inn { margin: 15px; }
-->
</style>
</head>
<body>
<div id="frame">
<div id="header">header</div>
<div id="wrap">
  <div id="c-col"><div id="c-col-inn">
    <p>c-col</p>
    <ul>
      <li>OK - Mac Firefox 1.5</li>
      <li>OK - Mac Safari 2.0.3</li>
      <li>OK - Mac Opera 8.01</li>
      <li>OK - Win Firefox 1.5</li>
      <li>OK - Win Internet Explorer 6.0</li>
      <li>OK - Win Netscape 7.2</li>
    </ul>
  </div></div><!-- /c-col -->
  <div id="l-col"><div id="l-col-inn">
    <ul>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
      <li>menu</li>
    </ul>
    </div></div>
</div>
<div id="r-col"><div id="r-col-inn">r-col</div></div>
<br style="clear:both;"/>
<div id="footer">footer</div>
</div>
</body>
</html>

実際の動作サンプル

コメントを残す

メールアドレスが公開されることはありません。