[ 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>

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