時短HTMLコーディングのZen Codingが面白い

結構前から存在するらしいんですが、HTMLのコーディングをCSSのように入力できるZen Codingが面白い。毎日HTMLを書くので、これに慣れたら相当時間の短縮になりそうです。下のビデオを見るとコンセプトが一目瞭然です。
Zen Coding v0.5

たとえば、以下のようにタイプすると

div#page>div.logo+ul#navigation>li*5>a

以下のコードが生成される。

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Zen Codingは、HTMLエディターにプラグイン（拡張機能）をインストールすることで使えるようになるんですが、MacのCodaやクロスプラットフォームのAptanaなどのエディターで公式にサポートされているようです。自宅ではCodaをメインに使っているので、プラグインをインストールして早速試してみました。ちなみにCodaのプラグインのインストールは、ダウンロードしたファイルをダブルクリックしてCodaを再起動するだけで出来ます。

書き方に慣れれば結構良さそうです。一行のテキストが一気にタグ付き、インデント付きのHTMLに変換されるのを見ると、一瞬「おぉ〜〜っ！！」と感動しました。笑

Dreamweaverでもサードパーティのプラグインがあるようです。「zen codingは超便利！Dreamweaverで使ってみました。 | vivid color + blog」という記事で紹介されていました。職場ではもっぱらDreamweaverなので、試してみようかな。。。

最新のSyntaxはオフィシャルサイトでまとめられています。

2010/10/04 6:26 by @Rriver | RSS | Fb

関連する投稿

• CSS制作のワークフローについて考える
• Reset CSSについてのまとめ：リセットするべき?しないべき？
• HTML5の要素にも使われているCSSで頻繁に使われるクラス名とは？
• CSSのフォーマットを自動化してくれるCodaのCSS Toolsプラグイン
• WordPressで関連記事の表示を追加してみた (Yet Another Related Posts Plugin)

関連するカテゴリ・タグ

カテゴリ： ウェブ制作・運営に役立つツール
タグ： html

Ads by Google