Nishiaki's Log

リーダーチェックしてたら、
ブラウザだけでCSSレイアウトに対応したページをさくさく作ることができる『Drawter』 | 100SHIKI.COM
というのを発見。
百式さんのスクリーンショットもいい感じだし
「こりゃあ、要チェックですぜ！先輩！」ってな訳で見てみた。
なんか使いどころあるかも知れないじゃない！
確かに、作者さんのJavaScript力はスゴいかもしれない。
JQuery作品としてはかなり優秀な作品なんじゃないかな？

それっぽいのを作ろうとしている所-1枚目

それっぽいのを作ろうとしている所-2枚目

配置方法は一応選べる

Auto floatで生成してみたコード

<!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" lang="jp">
        <head>
    <title>こんにちは、世界</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        #node1
        {
        background-color: #333;
        color: #fff;
        }
        #node2
        {
        float: left;
        width: 114px;
        background-color: #999;
        }
        #node3
        {
        float: left;
        width: 536px;
        background-color: #EEE;
        border: 1px solid #ccc;
        }
        #node4
        {
        background-color: #333;
        color: #fff;
        }
     </style>
        </head>
        <body>
        <div id="node1">ここはヘッダ</div><!-- #node1 end -->
        <div id="node3">ここはメイン</div><!-- #node3 end -->
        <div id="node2">ここはサブ</div><!-- #node2 end -->
        <div id="node4">ここはフッタ</div><!-- #node4 end -->
        </body>
        </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>こんにちは、世界</title>

#node1

{

background-color: #333;

color: #fff;

}

#node2

{

float: left;

width: 114px;

background-color: #999;

}

#node3

{

float: left;

width: 536px;

background-color: #EEE;

border: 1px solid #ccc;

}

#node4

{

background-color: #333;

color: #fff;

}

</style>

</head>

<body>

<div id="node1">ここはヘッダ</div>

<div id="node3">ここはメイン</div>

<div id="node2">ここはサブ</div>

<div id="node4">ここはフッタ</div>

</body>

</html>

charsetの前にtitleタグ来た時点で萎える
Auto sizesで生成したらposition: absolute;連発
JQuery作品として見るにはいい
Dreamweaver持っている人は見るのは時間の無駄になる可能性あり
まだ使えね〜
でもそのうちこんな風になるんだろうな

タグ: generator

Drawter.com – DrawAble Markup Languageに萎えた【期待age】