![DNP、読む速度を約2倍にする自動レイアウト技術](https://cdn-ak-scissors.b.st-hatena.com/image/square/22a335615c3147ff7474636d97703ab33b569f02/height=288;version=1;width=512/https%3A%2F%2Fwww.watch.impress.co.jp%2Fimg%2Fipw%2Flist%2F1264%2F745%2Fdnpogp.jpg)
iOSDC 2017 (Sep 16, 2017) https://iosdc.jp/2017/node/1317 Library: https://github.com/inamiy/Cassowary
$ jt -h usage: jt [-h] [-l] [-t THEME] [-f MONOFONT] [-fs MONOSIZE] [-nf NBFONT] [-nfs NBFONTSIZE] [-tf TCFONT] [-tfs TCFONTSIZE] [-dfs DFFONTSIZE] [-ofs OUTFONTSIZE] [-m MARGINS] [-cursw CURSORWIDTH] [-cursc CURSORCOLOR] [-cellw CELLWIDTH] [-lineh LINEHEIGHT] [-altp] [-altmd] [-P] [-T] [-N] [-vim] [-r] [-dfonts] optional arguments: -h, --help show this help message and exit -l, --list list availa
CSSとHTMLの知識は必須だが、慣れている人には超絶便利そうなツールのご紹介。 Drawterはブラウザ上でDOM要素を配置、さまざまなカスタマイズを施したあとにコードを生成してくれるツールだ。 つまるところ、CSSレイアウトに対応したサイト製作ツールといってもいいだろう。 要素ごとにさまざまな属性を直感的に追加していける点が素晴らしい。インターフェースもシンプルで職人ぽいので個人的に好みである。日本語も入力可能だ。 当然ながら作り終えたあとは「Generate Code」コマンドでコードを生成、そのまま使うことができる。 似たようなツールはすでにいくつかあるが、Drawterの完成度はかなり高いのではないだろうか。是非試してみてもらいたい。
Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website's code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn. Currently Drawter is available in Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is
Drawter.com - DrawAble Markup Language ドラッグ&ドロップで描画して好きなHTMLレイアウトを作成できる「Drawter.com」。 次のように、グラフィックソフトを扱うように、範囲をドラッグ&ドロップで囲ってブロックが作れます。 好みのレイアウトが出来たら、後は、Code メニューから「Generate Code」を選ぶだけでコードが作れます。 ブロックベースのレイアウト作成ツールはありますが、こういった自由な形に作成できるものは珍しいですね。 凄く凝ったレイアウトを作る際になかなか使えそうです。 関連エントリ 質問に答えるだけで1〜3カラムのCSSレイアウトページ生成 ビジュアルにドラッグ&ドロップでCSSレイアウトをデザインできる「YAML Builder」 WYSIWYG型オンラインCSSデザインツール「CSSEZ」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く