超手軽にレイアウトを作成するjavascript「Simple Layout Manager」

サイトを作成する際にはCSSでデザインする場合が主となっていますが、floatやらclearfixやらなど非常に難しいのも事実です。
Simple Layout Managerを利用することで、超手軽にWebレイアウトを作成することができます。

sponsors

使用方法

ちょっとわかりづらいですが、こちらのページでも使用しています。
(*ページは高さ、幅ともに100%でないと無理のようです)
STEP 1
Simple Layout Managerからファイル群をダウンロードします。
<script type="text/javascript" src="http://yourdomain/prototype.js"></script>
<script type="text/javascript" src="http://yourdomain/layout_manager.js"></script>
STEP 2
基本的なレイアウトである以下を書き込みます。
入れ子にすることもできます。
<div class="lm_container">
	<div class="lm_top"></div>
	<div class="lm_left"></div>
	<div class="lm_center"></div>
	<div class="lm_right"></div>
	<div class="lm_bottom"></div>
</div>
STEP 3
CSSで各要素の高さや幅、背景色などを指定します。
ここで使用している例
body, html { //必須
  overflow:hidden; 
  width:100%;  
  height:100%;  
  margin:0; 
  padding:0;
}
.lm_top {  
padding: 5px; 
margin: 5px;
}     
.lm_center {
overflow:auto; 
padding: 10px;
}
.lm_left { 
padding: 5px; 
border: solid 4px #DEBB54;
width: 31%; 
}      
.lm_right {
padding: 5px; 
width: 33%; 
overflow:auto;
}    
.lm_bottom { 
padding: 10px; 
}     

sponsors

Javascriptサンプルページ一覧
skuare.net