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

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

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

実際の動作サンプル

サンプルコード

<!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>
<div>header</div>
<div>
  <div><div>
    <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><div>l-col</div></div>
</div>
<div><div>r-col</div></div>
<br style="clear:both;"/>
<div>footer</div>
</div>
</body>
</html>

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

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

実際の動作サンプル

https://codepen.io/darucub/pen/gbrPpZN

サンプルコード

<!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>
<div>header</div>
<div>
  <div><div>
    <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><div>
    <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><div>r-col</div></div>
<br style="clear:both;"/>
<div>footer</div>
</div>
</body>
</html>

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。