超手軽にレイアウトを作成するjavascript「Simple Layout Manager」に関するコメントはまだありません。
ご遠慮なくコメントしてください。
超手軽にレイアウトを作成するjavascript「Simple Layout Manager」
サイトを作成する際にはCSSでデザインする場合が主となっていますが、floatやらclearfixやらなど非常に難しいのも事実です。
Simple Layout Managerを利用することで、超手軽にWebレイアウトを作成することができます。

使用方法
Simple Layout Managerからファイル群をダウンロードします。
<script type="text/javascript" src="http://yourdomain/prototype.js"></script>
<script type="text/javascript" src="http://yourdomain/layout_manager.js"></script>
次に基本的なレイアウトである以下を書き込みます。
入れ子にすることもできます。
<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>
最後にCSSで各要素の高さや幅、背景色などを指定します。
超手軽にレイアウトを作成するjavascript「Simple Layout Manager」サンプルで使用している例
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;
}
*ページは高さ、幅ともに100%でないと無理のようです
2007年10月11日
前の記事:jQueryベースの角丸javascript「jQuery Corner」
次の記事:回転式の画像ギャラリーjavascript「MooRevolver」
関連記事
- [prototype]Proto.IPS
- [prototype]Tree.js
- [prototype]Slider
- JavaScriptライブラリの先駆け「prototype」を勉強しなおすサイト20
- [prototype]AjaxMGraph
コメント投稿
この記事へのトラックバック:
- jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
- ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
- BOMBERMAN JAVASCRIPT GAME by mootools.js
- 3ステップで表をソート&値を検索できるjavascript「dataTables」
- Movable Type 4.2にバージョンアップ
- ページの目次を自動で作成するjavascript「jqTOC」
- JavaScriptライブラリ「raphael」で図を描く
- ニューデザイン
- Widgetboxで手軽にRSS型ウィジェット(ガジェット)を作る
- 奥から手前にズームするJavaScript「Spacegallery.js」













